个人用Canvas开发HTML5小游戏

　　各位同学们，大家晚上好, 受豪情大大委托，我来做一个简单的分享:个人用Canvas开发HTML5小游戏。第一次做这样的分享，心里还有点小激动呢，讲的不好的地方，请各位多多指正。

　　先来个自我介绍吧，我是12年毕业的，但是毕业后一年才接触了前端，然后觉得对前端更感兴趣,就入坑啦。现在做前端已经3年啦，从小菜鸟成长为了大菜鸟。

　　先来扯扯项目背景吧,机缘巧合下，有人找我做了一个私活，就是一个躲水果的小游戏。那个厂商的目的是为了品牌宣传吧，想借助于微信进行一个传播，然后游戏分数高的获得一定的奖励。

　　当时我也没做过小游戏开发，然后想想应该会蛮有趣的，于是就接了。因为没做过，一开始怎么入手就把我难住了，于是就百度了一下，看了几个小游戏的做法，感觉简单做一下也不是非常难嘛，于是二话不说就上了。每次写代码前或者看别人的代码，会感觉这个功能实现应该蛮难的吧，然后可能会想一大堆，但是开始动手写了，会觉得写着写着就简单了，所以我觉得多写写，多理理很多难题都会迎刃而解。

　　当时写代码的时候也没有考虑太多，前端用了canvas 画了，什么选型比较啊都没有做过。在正式开发中我们应该要考虑更多，为什么用这个东西，这个东西有什么缺点，能给我们带来什么。开发前考虑的东西多了，带来的坑自然会少的。之前开发公司的项目时，想选用一个mvvm框架时，比较react,vue 和angular ,这几个各有利弊，个人觉得vue用起来最简单，最顺手,同时也了解了react-router,redux，了解了阿里前后端分离的方案，用nodejs解决seo的问题,了解了react如何兼容ie8等。由于项目需要支持ie8，最后才定下来用react+redux 进行开发。所以开发项目前，大局上要定清楚尤其是自己没有接触过的，这样坑才会少。

　　当时开发小游戏时，为了赶进度，也没有考虑性能上的问题，就直接画了，后来看了关于canvas的性能上的一篇文章 http://taobaofed.org/blog/2016/02/22/canvas-performance/，觉得当时写的好水啊，性能好渣啊。所以我觉得多看看别人写的，不断地向别人学习很重要，我们前端很多都是自学的，很多都没有经过系统性的学习，所以很多人会写，但不一定会理解。这里我推荐一个博文http://www.cnblogs.com/TomXu/tag/Javascript/，对基础性的提升会蛮大。

　　还有一个觉得以前做的不对的是关于手机端适配的问题，当时用了

　　 这个来完成适配，当时这个兼容性并不好，后来看了淘宝的rem解决方案，觉得采用rem解决方案会更好，兼容性会更佳。

　　我们这一行，你一旦停下脚步，将会有N多人把你超越，能力的成长是不断学习实践的积累。

　　扯了太多废话啦，我们来讲讲这个项目具体怎么实现吧。后端我用了thinkphp,用户体系就用了微信公众号授权，可以拿到用户的openid作为用户唯一识别。

　　游戏的套路，就是先载入游戏，然后触发游戏开始，游戏结束时记录游戏分数，并给出一个排名，诱导你转发盆友圈炫耀，或者再来一次。

　　这里我们可以定义一个game_control 对象来控制这一系列流程，同时我们还需要一个人物对象，3个水果对象。

　　我们可以定义一个基础原型对象ship作为类，可以记录位置，大小，x,y轴的移动速度，相应的图片，然后人物对象和水果对象就是它的几个实例啦。然后通过canvas的drawImage方法将它们画出在画布中。

　　game_control 对象定义几个方法，init,start,draw,end,reset等方法。

　　init方法主要是初始化游戏的，主要处理图片加载，图片加载完后，几个对象的初始化。然后调用bindmove方法给canvas注册手指触摸事件，如果手机触摸在人物对象这个位置，那么代表游戏开始，调用start方法。start方法主要是实现每一帧的循环方法。在循环方法中，通过手指的移动来计算 人物的x,y 轴的位置，通过时间 和 水果x,y 轴的速度（这里我们定了每5秒增加速度）计算出相应的位置（如果水果的位置与边界放生碰撞，则改变它移动的方向），然后再进行一一比较，看是否发生触碰，我们将模型当作矩形（复杂模型我也不造怎么算~~）,当发生触碰时，则判定游戏结束，将坚持了的时间输出。至于持续性的与后台的数据交互可以通过websocket来实现(不过我没有试过~~,当时做项目的时候只是结束的时候去保存了一下，这种做法很容易被别人刷数据)，游戏结束时提示 分享页面或者在玩一次即可。

　　附上demo二维码(未优化版~~)

　　

　　同时附上git地址(简化版):https://github.com/zjb65532788/game

　　最后再一次感谢豪情哥提供这样一个平台供大家学习戒交流，感谢小伙伴的耐心倾听，我也希望通过不断学习，让自己再提升几个台阶。感谢大家啦！