【Golang语言社区】H5游戏开发-从零开始开发一款H5小游戏(五) 必要的包装,游戏规则和场景设计

到这里我们已经讲了游戏的整体设计和实现。一个游戏要完整,还需要给它制定一个评分机制,它是整个游戏的关键所在。就好比一部电影,特效再好看,如果剧情狗血,那也是一部烂片。

相信大家都玩过一些简单但很吸引人的小游戏。比如很久以前微信上的打飞机,围住神经猫,还有前段时间大火的slither.io。他们都简单易玩,但却能让人肾上腺素飙升,百玩不腻。

所以一款好玩的小游戏必须具备了这样的特点,简单易玩,却能给人制造紧张感,有时还能利用一些攀比心理。本游戏也基本具备了这样的特点。

计分实现

游戏以秒数作为计分,随着时间的增加,Enemy粒子的运动速度会越来越快,躲避难度也就越来越大。游戏中的计秒实现比较简单,就是用setTimeout来实现,这里不使用setInterval,原因在第一章已经大致讲过了,就是考虑到准确性的问题。

//index.js

function initTimer() {

holdingTime = 0;

holdingLevel = 0;

clearTimeout(timer);

let time = function() {

timer = setTimeout(function() {

holdingTime = +timeEle.innerText + 1;

timeEle.innerText = holdingTime;

//每隔10秒加速一次

if (holdingTime % 10 === 0) {

holdingLevel++;

levelEle.innerText = holdingLevel;

for (let i = 0; i < enemys.length; i++) {

//Enemy粒子速度增加

enemys[i].speedUp();

}

}

clearTimeout(timer);

time();

}, 1000)

};

time();

}

每隔10s, Enemy粒子的速度增加一次,Enemy中封装了speedUp方法。

//Enemy.js

speedUp(speed) {

this.speed += speed || 0.2;

}

在技能粒子中,有一个护盾粒子。吃了护盾后,撞击Enemy粒子能增加分数。实现起来也很简单,直接修改计分板上的分数就行了。

//Player.js

let score = document.getElementById('time').innerText;

document.getElementById('time').innerText = (+score + REDSCORE);

粒子的初始生命值有三条,每次撞击到Enemy粒子都会减少一条,而如果撞击到视界的边界则会直接狗带。这里我们需要增加一个游戏结束的画面。给出最后的分数。

开始和结束画面都是通过DOM实现的,这部分比较简单,就不做具体介绍了。

其实在游戏的评分机制上还可以做很多改进,比如增加排行榜,或记录自己的最优成绩,并可分享到朋友圈等。这部分可以极大增加游戏的热度。 读者可以自己展开想象,对玩法进行扩展。

预加载

当我在微信打开游戏的时候,发现开始画面和结束画面的图片加载很慢。导致DOM结构出来了,图片却迟迟没看到,没法给玩家准确的提示。所以需要增加一个图片预加载的功能。当然这也是每一个网页游戏框架必备的功能。

这部分功能直接参考了阿里的一个游戏框架Hilo,并把它抽象到loader.js。读者可自行查阅实现细节。

抽象后在入口处预加载所需的图片:

//index.js

let loader = new Loader();

let source = [

{src: 'assets/images/number.png'},

{src: 'assets/images/over.png'},

{src: 'assets/images/sprites.png'}

];

loader.load(source, function() {

start(); //开始游戏

});

预加载的时候还需要有个提示画面来告知加载进度。

进度条的实现也独立成一个文件loading.js,并暴露一个外部API给游戏使用。

我们还需要将预加载插件和进度条结合起来,每个图片加载完成后,loader会触发一次load事件,用一个计数器统计加载的图片数,除以总数得到一个进度比例。然后将这个比例barRatio传给进度条。让其渲染出相应的进度。

//根据加载进度渲染进度条

let loaded = 0;

loader.on('load', e => {

++loaded;

barRatio = loaded / source.length;

});

//进度条渲染

(function loading() {

drawLoading(barRatio);

if (!loadingFinish) {

raf(loading);

}

})();

需要注意的一点是,进度条是通过canvas画布实现的。所以进度canvas的draw方法是在不停运行的。如果每张图片加载完的时候才改变进度条的位置,就会造成进度跳跃式地前进,无法连续顺滑加载的效果。这个逻辑在loading中通过一个判断来解决。

//loading.js

let currentBarWidth = bar.total * ratio;

if (bar.width < currentBarWidth) {

bar.width += 2;

}

保证进度条每次增加只能是2。而不是直接让bar.width = currentBarWidth;

结语

至此整个游戏的开发就介绍到这了,主要还是讲游戏的实现思路。 游戏中还是有挺多细节处理的,这些真的要亲自动手写一下才能了解。

本教程的初衷就是想让读者能对H5游戏开发有个宏观的了解,知道怎么入手。想起几周前自己要写这个游戏的时候还无从下手,如今也完成开发并写了几篇总结,算是有所沉淀。

其实H5游戏开发远比这个复杂,本游戏只是基于画笔实现,还没有涉及到图片的绘制,坐标轴转换等等。还有很多了要学习的东西啊。当然这只是自己一时的兴趣尝试,等什么时候心血来潮了,说不定再写一个系列呢。

原文发布于微信公众号 - Golang语言社区(Golangweb)

原文发表时间:2017-06-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏phodal

前端读书路线图:从入门到编写框架

某天,我在阅读《JavaScript 框架设计:第 2 版》的时候,发现我在 2015 年画的读书路线系列中的前端篇,被收录到其中。

12400
来自专栏编程微刊

一份来自前端开发工程师的规范简历

43440
来自专栏進无尽的文章

如何建立一款App的配色方案

当我们评价一款app时,配色应该是仅次于其功能性的另一主要因素。现如今人机交互主要通过GUI来实现,色彩在交互过程中扮演着重要的角色。良好的色彩搭配会帮助用户发...

20840
来自专栏练小习的专栏

W3C对外公布了标准HTML5的草案

周二,W3C机构正式对外公布了互联网网页代码新标准HTML5的草案.预计正式版的标准将会在两年以后形成. HTML可以说是互联网信息组织的一个基石.据悉,这是自...

23690
来自专栏灯塔大数据

塔荐 | 2018 年最值得关注的 JavaScript 趋势

前言 JavaScript 渗透的范围越来越广,它能做的事情已经远不止前端开发而已。不久前stateofjs.com刚刚发布了 2017 JavaScript ...

36780
来自专栏PPT素材

收藏这些网站,做设计和PPT不再为找素材发愁

平时逛的比较多的网站,国内大牌平面设计师社区,海量优秀平面设计作品可以观摩欣赏。做好PPT从培养自己审美开始吧。

20600
来自专栏PPT设计

收藏这些网站,做网站开发和PPT设计不再难

平时逛的比较多的网站,国内大牌平面设计师社区,海量优秀平面设计作品可以观摩欣赏。做好PPT从培养自己审美开始吧。

38600
来自专栏PHP在线

未来Web设计的7大趋势

原文出处: Medium 译文出处:朵璞 1. 手势取代点击 我们都已经忘记滚动条曾经是有多麻烦,大多数用户都得煞费苦心地把鼠标移至屏幕右侧来移动这古...

41150
来自专栏SEO

「动图」SEO必知负面case网页广告说明

37070
来自专栏BestSDK

如何通过按键颜色的对比来引导用户

image.png 你有没有过意外点错按键的时候?当用户没有被正确引导时往往会在模态窗口上做出错误的决策。很多模态窗口会在不明确不同行动区别的条件下就弹出来。 ...

25370

扫码关注云+社区

领取腾讯云代金券