AI 任务实录:网页版马里奥小游戏

任务:做一个网页内嵌的简单马里奥小游戏,发布在博客里。

交付内容

一个完整的 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)

No Comments

Send Comment Edit Comment


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
Previous
Next