JavaScript迷宫小游戏带A*寻路与步数统计
随机生成的迷宫、带 A*寻路、还能显示步数，JavaScript 写的迷宫小游戏真挺有意思的。玩法不复杂，但背后的逻辑却值得研究。适合拿来练手，尤其是刚学完路径算法或者 canvas 绘图的同学。
DFS 生成迷宫的逻辑比较直观，像挖地道那样一条路走到黑。代码里估计就是用递归+回溯，一路标记已访问的格子，走不动就返回，就能生成一张不重样的地图。
自动寻路用的是 A*，看函数命名和注释就能猜出来了。A*其实不难搞，主要是搞清楚估价函数f(n) = g(n) + h(n)是怎么计算的。游戏里走的路径看起来还挺“聪明”，绕开了死角和冤枉路。
整个游戏就一个迷宫.html，直接用浏览器打开就能玩。界面看着简单，核心都靠Canvas画出来的，图形刷新效率还不错，鼠标点点、键盘一按，响应也快。
步数统计蛮有意思的，一边玩一边看你是怎么绕弯路的。当前步数和最优步数的对比，也算是个小挑战，看你能不能把路径走得跟算法一样短。
注释写得挺清楚，尤其对新手来说友好。每段逻辑都带了，不懂算法也能慢慢对上代码。看完估计你也能自己撸一个迷宫出来。
键盘事件监听写得比较轻巧，keydown配合方向键控制人物移动，挺顺手的。如果你想扩展成关卡模式，可以在这块加点逻辑，比如加入“钥匙”和“门”的判定。
游戏核心数据结构就是二维数组，一眼看过去就像个地图矩阵。你可以试着打印下整个maze[i][j]，更好理解迷宫是怎么连通的。
如果你对算法感兴趣，建议顺手读下这篇《JavaScript 自动匹配迷宫寻路》，跟项目里 A*的写法有点像。
，这小游戏不光能玩，还能学到不少实用技巧。HTML5 + JS + Canvas，入门友好，扩展空间也大。如果你正在学前端或者练算法，真可以拿来改改玩玩。
文件大小：3.74KB
评论区