HTML5Canvas超级玛丽游戏
HTML5 的 Canvas 技术写的超级玛丽，还原度挺高，玩法也比较顺滑。用JavaScript用户输入、碰撞检测、角色移动这些逻辑，响应也快，整体体验蛮像小时候玩红白机的感觉。
Canvas 的绘图能力用得还挺到位，地形、人物、敌人，全都在canvas上动态渲染，动画连贯度还不错。你可以看看drawScene()这些绘图函数，代码结构清晰，调试也方便。
游戏逻辑部分靠JavaScript撑起来，像键盘控制、跳跃判定、敌人行为这些都得比较细。比如按下跳跃键，keydown事件触发后，先计算垂直速度，再更新y坐标位置。逻辑写得不难，但思路挺清晰。
文件结构也比较常规，index.html放的是游戏框架，main.js是主要逻辑，资源图像都集中在一个sprites文件夹里。你找素材、调试路径都方便。
顺带一提，如果你是刚入门 HTML5 游戏开发，这个项目蛮适合练手。重点可以看几个方面：碰撞检测算法、requestAnimationFrame实现的渲染循环，还有角色动画是怎么做帧切换的。逻辑不算复杂，调试也容易。
如果你想深入研究，可以看看这些相关内容：
如果你打算自己做个小游戏，拿这个项目改改也是个不错的选择，逻辑框架已经搭好了，换资源就能出新东西。
文件大小：6.71MB
评论区