HTML5Canvas迷宫游戏
HTML5 的 Canvas 迷宫游戏，功能还挺全的，适合练手也适合深入研究。
Canvas 的绘图能力，用来画迷宫挺方便。用beginPath配lineTo，可以随手画个五边形啥的，加点fill或stroke，立马有模有样。响应鼠标事件也不复杂，mousedown、mousemove搭配上位置判断，就能动态画路径，操作起来也顺手。
键盘交互也安排得比较清楚。监听keydown、keyup事件，再根据方向键调整小物体位置，移动起来也挺顺滑。如果再加个transition动画，体验感更上一层楼。
比较贴心的一点是支持保存迷宫。用的是localStorage，把迷宫的布局数据序列化成JSON存起来，下次进来还能继续上次的记录。存储、读取的逻辑也不复杂，适合初学者理解。
界面部分也有点小亮点，虽然谈不上华丽，但该有的提示信息、基本的交互都齐了，应该是用了点CSS3的小动画和样式来增强体验，配合 Canvas 还挺协调。
想看完整实现可以去看看MazeGame.html这个文件，HTML、CSS、JS 都有，分得挺清楚的。适合拆解着看，边看边改效果更好。
如果你刚好在学Canvas或是想试试本地存储怎么玩，不妨把这个项目拉下来玩玩。改个迷宫形状，或者试着加个计时器功能，也挺有意思。
文件大小：2.51KB
评论区