[技术分享]H5 游戏心得指导

shangjin发布于1 个月前 • 62 次阅读

前言


看着网上铺天盖地而来的h5小游戏,小编也提起了一些兴趣,但是小编找源码,发现都需要付费,于是小编自己潜心研究,终于理清楚了大概的思路,大家思考下面2个问题。

  • h5游戏和传统的js游戏区别

  • h5游戏如何写更加好完美,代码更加健壮,用户体验更加好

h5游戏和传统的js游戏区别


传统的js游戏是用js操作一堆dom的增加和减少,举个例子,假如我们需要写个消消乐的游戏,传统的js先会来个大的div,div中来个消消乐的背景啥的,再划分8*8的的小格子,第一个小格子叫A11,一行二列叫A12,以此类推,直到A88。然后在每个小格子上再放个div,来当作消消乐和用户交互的元素,再在这些元素绘制成不同的颜色,比如A11是红色,A12是绿色等等。接着给A11-A88每个元素绑定事件,主要判断用户手指的方向,比如用户把 A12向下,那么A12就按照制定的规则触发事件。比如我们制定了一套规则,相同颜色的元素如果在同行和同列超过3个以上,就消失掉,同时增加用户分数。每次用户点击元素只能滑动一格。接下来我们只需要把这些规则实现即可,如何实现这里稍微说下。核心就是for循环,没有啥是不能for循环解决的,如果有,再套一层for。for判断是有同行元素或者同列元素连续超过3个,如果有,消除满足条件的元素,同时更新用户分数,然后再随机生成不同颜色的元素(这些元素应当不同于这个位置上下左右已有元素的颜色),填补到空位,周而复始,直到用户达成条件,进入下一轮。

h5游戏的基于canvas的,市面上出现的其他游戏引擎不在讨论范围内,本文讨论最简单的就好。还是以消消乐为例子,canvas分成8*8的区域,每个区域放入带图片的实例渲染一次,出现主界面,每个实例有用户操作的事件,已经公共的事件,用户操作的事件来判断用户把某个元素滑向哪个方向,公共事件用来判断是不是满足消除当前元素,增加用户分数,重新渲染canvas等等。

看了上面的2个分析,h5游戏的优势是只要封装好对象,实例化后都可以在canvas上操作,而传统的js学习成本更低,只要无脑for即可。

h5游戏如何写更加好完美,代码更加健壮,用户体验更加好


  • 使用requestAnimationFrame

requestAnimationFrame按照浏览器cpu渲染,能最大限度的让用户感到流畅,我们只需要把要执行方法放入回调,完美的给了用户视觉展示。

  • 多封装构造函数

把相同的逻辑封装到相同的对象中,这样使用的时候new出来即可,这个大家可以去看看设计模式。

  • 公共的部分抽离

和上面一样,都是为了增加代码的复用性。

  • 理顺相关逻辑,让代码最简洁 写小游戏主要是逻辑理顺,用最简单的逻辑,实现最复杂的功能!

后记


任何事都是知难行易,去努力实践,你会发现新的世界

共收到 0 条回复