分享下自己学习 HTML5 游戏开发的试水作品及想法-吃豆人游戏
source link: https://www.v2ex.com/t/905726
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
想法的来源最开始是自己在研究如何在迷宫中寻径问题：迷宫寻径算法 。当时我并不知道什么 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 年开始开源的吧，都过去好多年了，也是当年的一腔热忱，后来也没怎么管过它。期间也有不少人提过建议，说按键不是很敏感之类的。其实也是一种实现时候的逻辑选择吧，我不想让错过路口的玩家还能回头走，就没想好如果提高灵敏度了。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK