分享下自己学习 HTML5 游戏开发的试水作品及想法-吃豆人游戏

想法的来源最开始是自己在研究如何在迷宫中寻径问题：迷宫寻径算法。当时我并不知道什么 Dijkstra 和 A*，只觉得好玩，于是参考物理知识“波的传播”特性，波阵面上的任一点都是下一个波源，然后参考实现了寻径算法。后来觉得仅仅一个 Demo 没意思，正好我正在学 canvas ，对于一些 api 掌握没有很大把握，就想着做一个小游戏试试巩固下。最短的路径寻找在游戏一定是大有用处的。但是如果用它呢？我想起了经典的游戏一些游戏：围住神经猫、吃豆人……可是，这时候有个问题，我不会作图啊！围住神经猫看来没有戏了，于是我就选中了最容易靠代码画图实现的吃豆人~

吃豆人的寻径大体上就是 4 个幽灵如何抓玩家，问题是最短路径算法只能是一对一寻找。由于游戏设定一定是玩家跑的速度比 NPC 快的，如果只是单独 NPC 寻径追着玩家，那必然会出现几个 NPC 跟在玩家后面跑，这样的游戏体验将大打折扣。那么如何实现多个 NPC 相互配合呢？我想起了小时候和小伙伴追赶的游戏，第一反应是，如果我和几个小伙伴一起围堵一个人，那么当我在这个巷子发现有人已经在堵他了，那我一定是找下一个巷子包抄。那么这时候一起配合追赶的小伙伴对于我来说就是一堵墙吧？

于是乎，我有了清晰的实现逻辑：当 NPC 各自在寻找玩家的过程中，相互都把其他 NPC 当做游戏中的墙，然后利用最短路径算法去追玩家，这就实现了几个 NPC“智能”的围堵逻辑！

另外在做游戏过程中发觉，一个游戏系统比如少不了对对象的管理，还加入了一些动画管理及事件绑定等操作。觉得做下来，确实颇有收获。所以特别想分享给一些也正在学习 HTML5 画布的小伙伴，相信多多少少应该会提供一些思路吧……

项目演示地址：https://passer-by.com/pacman/

项目开源地址：https://github.com/mumuy/pacman

项目是 2015 年开始开源的吧，都过去好多年了，也是当年的一腔热忱，后来也没怎么管过它。期间也有不少人提过建议，说按键不是很敏感之类的。其实也是一种实现时候的逻辑选择吧，我不想让错过路口的玩家还能回头走，就没想好如果提高灵敏度了。