pixi.js 游戏之 《疯狂汽车》

　　最近想开发一款h5小游戏，起初是想利用cocos2d-js进行开发，但是发现cocos2d-js有点重，想需找一个轻量级、容易上手、能制作小游戏的框架进行学习。在寻找的过程中找到了 pixi.js 这个框架，学习了它几个api之后，还有看了一个作者的中文文档 https://github.com/Zainking/LearningPixi ，然后自己就想自己开发一款小游戏来巩固学习pixi.js的api知识。

　　在学习阶段，自然不能挑战复杂度太高的游戏，不然会打击信心。于是乎自己在制作过程中，前期先进行了游戏的规划及规则定义。

　　在制作过程中，由于没有美工，也只好利用自己的 ps 技术进行了设计稿美工设计（哈哈，不会美工的设计师不是好前端。设计稿设计的比较粗糙，还请各位看官谅解，这里我采用了屎黄色作为主色调进行设计，因为自己比较喜欢暖色调）。

　　这款游戏，主要是以 汽车行驶、躲避障碍、速度加快、吃金币 为关键字，进行游戏的整个开发。

 

游戏相关截图

 

游戏规则

　　通过点击游戏界面中的左右按钮，或通过键盘的的左右键点击，进行对障碍物的躲避，必要的时候可以通过在应急车道上进行躲避，但会消耗总分。撞击金币得到相应的总分加成，获得的总分越多即排名越靠前。

 

游戏开发思路

　　考虑的是先要利用 PIXI.Container 进行页面的排布，根据层的概念 zIndex 进行每个页面切换的时候显示。这里需要注意的是 zIndex 是否在pixi.js v5版本上才有的，zIndex属性在v4版本似乎要引入插件文件才能进行层级处理，所以在选择版本的时候要注意啦。pixi.js让物体运动，我使用的是 app.ticker.add 方法里面加入 if 判断进行游戏的启动跟暂停，利用变量开关进行控制。

　　开发这个游戏利用的api不多，还有利用了一个碰撞库 bump.js 就可以进行开发，这里不做过多的游戏开发的api介绍了，试玩游戏和看源码就是最好的了解。

 

游戏源码地址

　　在这里就不做过多的游戏代码开发过程介绍了，因为写起来似乎需要很多的时间，所以请见谅 ^_^。

　　游戏主要信息内容我已经开源到github上了，有兴趣的童鞋可以进行玩一玩，给个 star ，是我最希望看到的，哈哈。

　　所有游戏资源都已经放在了github中，包含了设计稿psd和源代码。有兴趣的同学，还可以改造一下玩法成为自己的游戏。

　　好啦，最为重点的地址来啦 → https://github.com/Zion0707/pixijs_game_crazy_car ← 。

 

注意事项

　　由于自己是学习阶段，所以在开发中，适配兼容性没有做过多的处理，还有一些细节上没有进行太多的处理。