HTML5 复刻超级玛丽游戏源码：Canvas 与原生 JavaScript 实现

经典横版过关玩法的前端复刻

这套源码用 HTML5 技术对《超级玛丽》做了完整复刻，从启动界面、关卡内交互到游戏结束判定都有对应实现。项目不依赖大型游戏引擎，以原生 JavaScript 配合 Canvas 绘制游戏画面，代码量相对轻便。

对于想研究横版过关游戏逻辑的开发者，它把角色控制、碰撞检测、关卡设计与地图渲染等环节拆成了可阅读的模块，适合作为前端 Canvas 编程的实践案例。

主角玛丽奥具备带加速度的缓动移动、抛物线跳跃以及状态成长与降级机制，场景中的碰撞响应围绕这些行为展开。敌人方面，板栗仔、乌龟等角色各有移动模式与死亡动画，分数飞出效果也在其中。

道具系统覆盖子弹、成长蘑菇、加命蘑菇、子弹花与金币，触发条件与关卡配置关联。键盘操作上，A/D 控制左右移动，K 跳跃，获得能力后 J 发射子弹，H 开始游戏。

关卡数据通过配置文件或数据结构来组织，可设置障碍物分布、敌人类型与初始位置，以及隐藏道具的触发条件。地图构建逻辑支持陆地、砖块、管道、岩石、城堡、旗杆等地形元素，并能为不同元素配置物理属性。

代码采用面向对象思路，把角色、敌人、障碍物和道具抽象为独立类，主循环、资源加载、场景绘制与事件响应彼此解耦。若要做二次开发，可重点关注游戏主循环、实体类定义和碰撞检测函数。

项目属于纯前端结构，把 HTML、JS 与图片资源放到任意 Web 服务器目录下，或用浏览器直接打开主 HTML 文件即可开始游戏。运行环境只需支持现代 JavaScript 的浏览器，例如 Chrome、Firefox 或 Edge。

修改源码时，VSCode、Sublime Text 等代码编辑器均可使用。部署前建议先确认浏览器控制台没有资源加载报错，再按注释定位需要调整的模块。