手把手教你制作一款简单的小游戏【web前端】

淡淡蓝蓝

想必大家小时候都听说过或玩过4399小游戏（这句话好像暴露了年龄～），在当时电脑不算很普及，没有那么多网游，大型单机游戏的时代，数量众多且种类丰富的网页小游戏使我们的童年增添了非常多的乐趣。
诸如黄金矿工，狂扁小朋友这些耳熟能详的小游戏，在当时都是由Adobe公司下的Flash动画标准来开发的。
可在2017年时Adobe公司宣布，出于安全和可靠性的原因，将于2020年年底，也就是今年内正式停止支持Flash。
Flash是20多年前诞生多，它曾是开发者们最受青睐的技术之一，被用于开发游戏，播放视频在各大浏览器中，如今已成为时代的眼泪，取而代之的便是HTML5+JavaScript技术。
在这里向大家安利一下当今比较热门的前端渲染引擎PixiJS（github收藏30k），它使用了HTML5+JS+WebGL封装而成，是一个非常强大的2D渲染引擎，可以用十分高效的性能来完成当年Flash所能完成的游戏开发任务。
下面，我们便用PixiJS来制作一个简单的网页小游戏。
该游戏的玩法很简单，控制我们的角色，躲避怪物，获取宝箱拿到出口处便可获得胜利。
1. 首先，我们需要制作好游戏所需的图像素材，如下图：


上图中把该小游戏中的所有素材：角色，宝箱，怪物，出口都整合到了一张图中，然后通过一个JSON数据文件（该文件内保存了各个素材的大小和位置）来从图片中获取你想要的素材。


2. 在js代码中导入上述的图片和JSON文件。接着调用PixiJS的API，创建一个PixiJS应用，即我们的游戏舞台，再执行setup函数对游戏进行初始化


3. 在setup初始化函数中，创建两个游戏场景，因为游戏分为游戏中的场景和游戏结束时的场景






然后，根据JSON文件分别提取出图片中的素材，放置到场景一中。


4. 然后，循环创建多个怪物在场景一中，并随机赋予它们初始位置和速度，干扰玩家获取宝箱。


5. 制作血条，当玩家碰撞到怪物时便会损失一定的血量，血条为空则游戏结束，展示场景二。


6. 绑定键盘事件，这里给出了左方向键的实现方式，其他方向同理。


7. 做好上述准备后，便调用play函数使游戏开始，该函数将会被每秒执行60次（这得益于webGL强大的性能），直到游戏结束。




8. 在play函数中，主要功能为：
（1）监听键盘事件，改变玩家的位置。


（2）监听怪物的位置变化，当怪物碰撞到墙时会直接朝着反方向移动。


（3）碰撞检测：
①　检测玩家是否碰撞到怪物。碰到则临时改变透明度并减少血量，当血量小于0时则游戏结束






②　玩家是否碰撞到宝箱。当玩家碰到宝箱时，宝箱将跟随玩家一起移动。




③　宝箱是否碰撞到出口。当宝箱碰到出口，即玩家带着宝箱到出口时，游戏结束。


完成了上面的代码，一款简单的网页小游戏就做好了，最终效果如下图所示。大家是不是感觉很简单～该游戏demo出自PixiJS的官方教程。
（https://github.com/Zainking/learningPixi#casestudy），感兴趣的小伙伴们可以去pixi官网查看更多高级炫酷的demo。
只要发挥你的想象力，便可以制作出许多有意思的游戏~


最后别忘了关注专栏噢~下期干货满满，等你来阅读

笑狼

前排支持下了哦~