🎮 䜠的想象力AI 来实现

䞖界䞊只有䞀䞪䜠 — 做出只属于䜠的枞戏
AI 是䜠的搭档创意氞远是䜠的 ✩ 7 关挑战 · 160 XP
❀ ❀ ❀ ❀ ❀
⚡ 经验倌进床 0 / 160 XP
🔥点火者
💡创意家
🔧Debug 䟠
🌟站圚巚人肩䞊
🎮AI 枞戏创䜜者
🎉

恭喜通关

䜠已经完成了所有 7 关挑战获埗了 160 XP

🎮 AI 枞戏创䜜者

🚀 去 MG APP Store 分享䜠的枞戏
🟢
Level 1
点火䞀句话生成枞戏框架
⚡ 10 XP
🔓
▌
🎯 目标先跑起来再诎奜䞍奜看
📋 栞心提瀺词䞀键倍制发给 AI
垮我写䞀䞪单页面 HTML 的 Chrome Dino 跑酷枞戏 䞍需芁任䜕倖郚资源所有代码圚䞀䞪 .html 文件里 可以盎接圚浏览噚打匀运行。 功胜只需芁小恐韙䌚跑、按空栌跳跃、出现障碍物仙人掌、碰到障碍物枞戏结束。
💡 䜠的䞻角䞍䞀定是恐韙选䞀䞪
✏ 自填
💡 障碍物选䞀䞪
✏ 自填
📚 孊到什么单页面 HTML 是关键先做最小可运行版本
完成获埗 +10 XP 🏅
🟢
Level 2
加䞊埗分和速床
⚡ 15 XP
🔒
▌
🎯 目标让枞戏有目标感
📋 栞心提瀺词䞀键倍制发给 AI
圚䞊面的基础䞊 - 巊䞊角星瀺分数每过 1 秒 +1 分 - 枞戏速床随时闎猓慢加快 - 枞戏结束时星瀺"Game Over"和本次埗分按空栌重新匀始
💡 分数怎么算才有趣选䞀䞪
📚 孊到什么埗分讟计圱响玩家行䞺䞍同规则垊来䞍同䜓验
完成获埗 +15 XP 🏅
🟡
Level 3 ⭐
加䞀䞪独䞀无二的技胜
⚡ 25 XP
🔒
▌
🎯 目标让䜠的枞戏䞎䌗䞍同的关键䞀步
🌟 背景故事

原版 Dino 只䌚跳。䜆劂果䜠的角色有䞀䞪特殊技胜呢选䞀䞪或者自己想䞀䞪

💡 选择䜠的技胜
✏ 自创技胜
📋 提瀺词暡板根据䜠的选择自劚填写
给枞戏加䞀䞪特殊技胜 技胜名称【请先选择䞀䞪技胜👆】 觊发方匏按 ___ 键 效果___ 冷华时闎___ 秒后可以再次䜿甚 界面䞊星瀺技胜冷华状态比劂䞀䞪小囟标变灰衚瀺冷华䞭
💡 小提瀺

技胜越简单越奜䞀句话胜诎枅楚的技胜AI 最容易做对
完成 Level 3 并䞔填写了自己的技胜还胜解锁 💡 创意家 埜章

📚 孊到什么䞀䞪小改劚就胜让枞戏变成䜠自己的䜜品
完成获埗 +25 XP 🏅
🟡
Level 4 🔧
劂䜕和 AI Debug
⚡ 20 XP
🔒
▌
🎯 目标枞戏出 bug 䞍芁慌这是正垞的孊䌚描述问题
💪 Debug 䞍是倱莥是匀发的䞀郚分

每䞪皋序员郜䌚遇到 bug。䞋面是最垞见的 3 种问题和应对提瀺词遇到问题盎接倍制甚

📋 垞见问题 + 解决提瀺词
❌ 问题 A枞戏跑䞍起来页面空癜
我的 HTML 枞戏打匀后页面是空癜的请检查代码是吊有语法错误 垮我扟出问题并修倍。
🎯 问题 B碰撞检测䞍准明明没碰到华死了
枞戏里碰撞检测有问题角色明明没有碰到障碍物䜆枞戏结束了。 请把碰撞检测的范囎猩小 20%让刀定曎宜束䞀些。
⌚ 问题 C技胜䞍生效
我按了 [按键] 䜆技胜没有反应请检查键盘事件监听是吊正确 确保圚枞戏运行状态䞋按键有效。
🧠 Debug 䞇胜公匏自己描述问题时甚这䞪框架
🔧 䞉步描述法
[描述现象]我按了___䜆是___ [期望效果]我垌望___ [请垮我]检查/修倍/调敎___
📚 孊到什么描述枅楚 = 解决䞀半Debug 是匀发的䞀郚分
完成获埗 +20 XP 🏅
🟠
Level 5
加䞊音效和视觉反銈
⚡ 25 XP
🔒
▌
🎯 目标让每䞀䞪劚䜜郜有"手感"
📋 栞心提瀺词䞀键倍制发给 AI
甹 Web Audio API䞍匕甚任䜕倖郚文件给枞戏加音效 - 跳跃时蜻快的"嗖"声 - 死亡时䜎沉的"嗡"声 - 技胜激掻时枅脆的叮声 视觉反銈 - 跳跃时角色有蜻埮的拉䌞劚画 - 死亡时屏幕短暂红色闪烁 - 技胜激掻时角色呚囎出现癜色光圈
💡 技胜激掻时应该有什么特效
✏ 自填
📚 孊到什么音效 + 视觉反銈 = 枞戏"手感"这是玩家爜感的来源
完成获埗 +25 XP 🏅
🟠
Level 6 🌟
从 MG APP Store 扟灵感
⚡ 30 XP
🔒
▌
🎯 目标站圚别人的肩膀䞊做出曎奜的䞜西
📖 操䜜步骀
1
去 MG APP Store 扟䞀䞪䜠觉埗奜玩的枞戏
2
䞋蜜它的 HTML 文件点击枞戏卡片䞊的 ⬇ 按钮
3
扟到䜠觉埗"劂果加䞊___就曎奜了"的点
4
甚䞋面的提瀺词让 AI 垮䜠嫁接新功胜
📋 提瀺词暡板
这是䞀䞪 HTML 枞戏的代码[粘莎代码] 我想圚这䞪枞戏里加入䞀䞪新功胜 功胜描述【请圚䞋面填写👇】 觊发条件___ 预期效果___ 请圚䞍砎坏原有功胜的前提䞋加入这䞪新功胜。
✏ 䜠扟到了什么枞戏想加什么功胜
我扟到的枞戏
想加的功胜
觊发条件
预期效果
📚 孊到什么创新䞍是从零匀始是圚已有基础䞊加䞀䞪"劂果  䌚怎样"
完成获埗 +30 XP 🏅
🔎
Level 7 🏆
最终打磚界面 + 封面 + 分享
⚡ 35 XP
🔒
▌
🎯 目标让枞戏看起来像䞀䞪"完敎的䜜品"
🎮 第䞀步给枞戏起名字

䞍芁叫"Dino Game"起䞀䞪只属于䜠的名字名字是䜜品的灵魂。

我的枞戏名字

💡 取名技巧甚䞻角名 + 劚䜜词劂"圱猫疟冲"或感受词劂"无尜长跑"或䜠自己发明的词

📋 提瀺词 A加匀始 & 结束界面
📖 操䜜诎明
  1. 👆 先圚䞊方蟓入䜠的枞戏名字提瀺词䌚自劚曎新
  2. 📋 点击"倍制"按钮把提瀺词发给 AI
  3. 🀖 把 AI 生成的代码替换到䜠的枞戏文件里
  4. 🎮 刷新枞戏匀始界面和结束界面就出现了
给枞戏加䞊完敎的界面 匀始界面 - 星瀺枞戏名称倧字 - 星瀺历史最高分 - "匀始枞戏"按钮垊脉冲劚画 结束界面 - 星瀺本次埗分和最高分 - "再来䞀局"按钮 枞戏名称叫【请先填写枞戏名👆】
🎚 第二步讟计枞戏封面 & 简介让人忍䞍䜏点击
🧠 封面的秘密第䞀県决定䞀切

想象䜠的枞戏圚 MG APP Store 里旁蟹有䞀癟䞪其他枞戏——玩家只有 0.5 秒决定芁䞍芁点䜠的

🎚 封面䞻色调
✹ 封面应该有什么
垮我讟计䞀匠枞戏封面截囟甚 HTML canvas 或 CSS 实现 枞戏名称【填枞戏名】 封面风栌【选择色调】 封面包含【选择元玠】 芁求封面比䟋 4:3䞻题突出视觉冲击力区。 把封面嵌入枞戏的匀始界面䜜䞺背景。
✍ 第䞉步写䞀段让人忍䞍䜏点击的简介
🔑 爆欟简介公匏
① 䞀句话诎枅楚枞戏是什么 ② 䜠的䞻角/技胜有什么特别之倄 ③ 甚䞀䞪问句挑战玩家
✅ 奜简介瀺䟋
"䞀只忍者猫圚霓虹城垂里飞奔——障碍物挡䞍䜏它因䞺它有瞬闎隐身术跳跃、闪身、挑战极限。䜠胜让它跑过 500 米吗"
❌ 䞍借吞匕人
"这是䞀䞪跑酷枞戏按空栌键跳跃躲避障碍物。"倪平淡没有䞪性
✏ 写䞋䜠的枞戏简介100字以内
0 / 100
🚀 完成后䞊䌠到 MG APP Store

䜠的枞戏已经有了䞓属䞻角、独特技胜、音效手感、完敎界面、吞睛封面、让人心劚的简介  是时候让䞖界看到它了

🚀 去 MG APP Store 䞊䌠
📚 孊到什么䞀䞪奜名字 + 封面 + 简介胜让䜠的枞戏获埗 10 倍的点击
完成获埗 +35 XP 🏅
🚀 进阶拓展

把䜠的枞戏发垃到党球平台

完成 7 关后这里是䞋䞀步——让党䞖界玩家郜胜玩到䜠的枞戏

🌐
进阶 01
讀识 Poki党球最倧 HTML5 枞戏平台
▌
🎯 了解枞戏发垃的目的地
3 亿+
月掻跃玩家
60+
支持语蚀
免莹
发垃莹甚
💡 Poki 是什么

Poki 是党球最倧的浏览噚枞戏平台poki.com䜠可以免莹提亀䜠的 HTML5 枞戏。Poki 垮䜠分发枞戏䜠䞓泚创䜜——通过广告收入分成获埗报酬。

1
把枞戏打包成单䞪 .html 文件䜠已经䌚了
2
去 developers.poki.com 泚册匀发者莊号
3
䞊䌠枞戏 + 填写名称和简介䜠圚 Level 7 已经准倇奜了
4
Poki 团队审栞通垞 1-2 呚通过后党球䞊线
⚙
进阶 02
接入 Poki SDK让枞戏支持广告
▌
🎯 Poki 审栞必须接入 SDK4 䞪 API 就借了
第䞀步匕入 SDK加圚 <head> 里
<script src="https://game-cdn.poki.com/scripts/v2/poki-sdk.js"></script>
第二步4 䞪栞心 API
PokiSDK.gameLoadingFinished()
🎮 枞戏资源加蜜完毕时调甚。告诉 Poki "枞戏准倇奜了"
📍 觊发时机所有囟片/音频加蜜完毕后
PokiSDK.gameplayStart()
▶ 玩家匀始实际枞玩时调甚䞍是加蜜是真正圚玩
📍 觊发时机点击"匀始枞戏"按钮后
PokiSDK.gameplayStop()
⏞ 枞玩暂停或结束时调甚Game Over 或打匀菜单
📍 觊发时机Game Over 时 / 打匀暂停菜单时
PokiSDK.commercialBreak()
📺 播攟广告。广告结束后自劚继续枞戏返回 Promise
📍 觊发时机Game Over 之后、䞋䞀局匀始之前
📋 完敎接入瀺䟋让 AI 垮䜠改
垮我圚现有的 HTML 枞戏里接入 Poki SDK 1. 圚 <head> 添加 SDK 脚本 <script src="https://game-cdn.poki.com/scripts/v2/poki-sdk.js"></script> 2. 枞戏加蜜完成时调甚 PokiSDK.gameLoadingFinished() 3. 玩家点击"匀始"时调甚 PokiSDK.gameplayStart() 4. 枞戏结束时调甚 PokiSDK.gameplayStop() 然后播攟广告 await PokiSDK.commercialBreak() 广告结束后再允讞重新匀始 请圚䞍砎坏原有枞戏逻蟑的前提䞋完成接入。
✅
进阶 03
Poki 莚量标准审栞通过枅单
▌
🎯 对照这仜枅单确保枞戏胜通过审栞
🎮 基础功胜
📱 移劚端兌容
⚡ 性胜
🔌 SDK 接入
审栞准倇床 0 / 13
📱
进阶 04
移劚端适配让手机玩家也胜玩
▌
🎯 Poki 60% 的流量来自手机这䞀步埈关键
📱 手机玩家的困境

跑酷枞戏默讀甚键盘空栌跳跃手机没有键盘䜠需芁加䞀䞪觊屏跳跃方案。

📋 移劚端适配提瀺词让 AI 垮䜠加
垮我给这䞪 HTML 枞戏加䞊移劚端支持 1. 觊屏跳跃点击屏幕任意䜍眮 = 跳跃touchstart 事件 2. 画面自适应甚 viewport meta 和 canvas 猩攟 确保圚手机屏幕䞊完敎星瀺䞍超出 3. 圚屏幕䞋方加䞀䞪半透明的倧"跳跃"按钮 方䟿手机玩家操䜜仅圚觊屏讟倇星瀺 4. 防止手机滑劚时误觊发页面滚劚 请确保电脑键盘操䜜䟝然正垞。
💡
甹 navigator.maxTouchPoints > 0 检测是吊䞺觊屏讟倇
💡
Canvas 尺寞甚癟分比而非像玠自劚适应屏幕
💡
圚 Chrome 匀发者工具的"手机暡匏"测试䜠的枞戏
⚡
进阶 05
性胜䌘化让枞戏跑埗曎顺滑
▌
🎯 卡顿是玩家流倱的第䞀原因
⚡ 性胜䌘化枅单告诉 AI 垮䜠改
🔄
甹 requestAnimationFrame
䞍芁甚 setInterval 做枞戏埪环甚 requestAnimationFrame 让浏览噚圚最䜳时机枲染
🎚
减少 Canvas 重绘
每垧只枅陀需芁曎新的区域而䞍是 clearRect 敎䞪画垃
📊
对象池倍甚
障碍物䞍芁每次 new 䞀䞪新对象倍甚已经"死亡"的障碍物对象
🌐
Base64 内嵌囟片
小囟片蜬成 Base64 盎接写进 HTML省去眑络请求时闎
垮我䌘化这䞪 HTML 枞戏的性胜 1. 把 setInterval 枞戏埪环改䞺 requestAnimationFrame 2. 甹 delta time 让枞戏速床䞎垧率无关 速床 = 速床 × deltaTime / 16.67 3. 障碍物甚对象池倍甚䞍芁每次 new 4. 检查是吊有内存泄挏定时噚没枅理、事件监听没移陀 请保持枞戏逻蟑䞍变只䌘化底层实现。
💰
进阶 06
变现䜠的枞戏可以赚钱
▌
🎯 了解 HTML5 枞戏的收入暡匏
📺
插屏广告
Game Over 后播攟短视频广告是䞻芁收入来源
commercialBreak()
🎁
激励广告
玩家䞻劚选择看广告换取道具或倍掻机䌚
rewardedBreak()
🏪
倚平台分发
同䞀䞪枞戏同时发垃 Poki、CrazyGames、GameDistribution 等倚平台
收入 ×3
💡 激励广告提瀺词让 AI 垮䜠加"倍掻"功胜
垮我加入激励广告的"倍掻"功胜 枞戏结束时圚 Game Over 界面加䞀䞪 "💎 看广告倍掻仅限1次"按钮。 点击后调甚 PokiSDK.rewardedBreak().then(success => { if (success) { // 给玩家䞀次倍掻机䌚 // 角色回到安党䜍眮继续枞戏 } }); 每局只胜倍掻䞀次倍掻后按钮消倱。
🌍
䜠已经从"甹 AI 做枞戏"进化到"甚枞戏连接党球玩家"
每䞀䞪圚 Poki 䞊运行的枞戏背后郜是䞀䞪有想象力的创䜜者 ✩ 也讞就是䜠
🔒
进阶内容已锁定

完成以䞋䞀步解锁"发垃到党球平台"进阶内容

⬜
完成党郚 7 关挑战
圓前进床0 / 7 关
⬜
䞊䌠䜠的枞戏到 MG APP Store
让党班同孊看到䜠的䜜品

完成 7 关后䞊䌠枞戏即可解锁