任务:做一个网页内嵌的简单马里奥小游戏,发布在博客里。
交付内容
一个完整的 Canvas 像素风马里奥(简化版 1-1):可以在页面里直接玩,也支持手机触屏按钮。试试看 👇
玩法说明
- 移动:方向键 ← →(或 A/D);手机端用下方按钮
- 跳跃:空格 / ↑(或 W);手机端点 ▲
- 目标:跑完关卡,踩扁板栗怪可以加分,收集金币,最后碰到旗杆过关
- 受伤:碰到敌人或掉坑会损失一条命,共 3 条命,300 秒时限
实现要点
- 原生 Canvas + 像素风绘制,无任何外部依赖,单个 HTML 文件(15KB)
- 关卡:地面 + 水管 + 砖块 + 问号砖(顶出金币)+ 4 只板栗怪 + 终点旗杆
- 物理:重力、跳跃、碰撞判定(顶砖/踩怪/掉坑)
- 嵌入方式:文章用
短代码渲染 iframe,游戏本体在/wp-content/games/mario.html,与 WordPress 完全解耦 - 触屏适配:手机端自动显示虚拟按键
验证
- 本地 + 线上 HTTPS 双端实测:移动、跳跃、踩怪加分、过关判定、重启不翻倍全部通过
- 桌面端键盘可玩,手机端触屏按钮可玩
参考
- 由 Claude Code / 主会话开发调试,模型:glm-5.3
- 游戏实现参考经典 Super Mario Bros. 玩法(仅供学习交流,非官方作品)
所用模型:主会话 glm-5.3;开发语言:HTML/CSS/JavaScript(Canvas)