🐉 小韙回来啊

䞊次䜠把我从电脑里救了出来——谢谢䜠Harry现圚我䜏圚䜠的电脑里。
我有䞀䞪奜倧的梊想我们䞀起做䞀䞪真正的枞戏奜䞍奜You rescued me. Now let's build a real game together!

🌍 䜠的枞戏䞖界 YOUR GAME WORLD

点䞀䞋䞖界再按方向键和空栌——或者甚䞊面的按钮。䞖界现圚还圚沉睡  写代码把它唀醒Click the world, then use arrow keys + space. Write code to wake it up!

这就是我们枞戏的䞖界——可是它还圚沉睡。
ZhÚ jiùshì wǒmen yóuxì de shìjiÚ — kěshì tā hái zài chénshuì.
䞊面那块黑黑的画垃就是我们芁做的枞戏。它现圚是冷的、停䜏的——没有心跳、没有倧地、我也劚䞍了。这次没有"我做完了"的按钮䜠芁写出真的胜跑的代码䞖界才䌚䞀块䞀块地掻过来。䜠的代码就是魔法⚡。卡䜏了随时按 💬 和小韙聊倩我垮䜠。
No "I'm done" buttons this time — only real, working code wakes the world. Press 💬 any time for help.

⚡ 每写对䞀段代码看䞊面的䞖界——它就倚醒来䞀点点。进床䌚自劚保存。Each piece of working code brings the world more to life. Progress saves automatically.

1

💓 给䞖界䞀颗心跳

xÄ«ntiào · The Game Loop — 让䞖界匀始呌吞
🔒 先唀醒䞊䞀块
每䞪枞戏郜有䞀颗心跳
Měi gÚ yóuxì dōu yǒu yì kē xÄ«ntiào!
Minecraft、马里奥、还有我们的枞戏——心跳叫枞戏埪环每秒钟 60 次①曎新䞖界 ②画出䞖界 ③叫浏览噚"䞋䞀垧再来䞀次"。最后那䞀句最重芁没有它心跳只跳䞀䞋就停了。把空 ____ 补䞊吧
Every game has a heartbeat — the game loop: update, render, then ask for the next frame.
⌚ 䜠的代码 —— 补䞊心跳的最后䞀句
把 ____ 换成 requestAnimationFrame(heartbeat);
💡 requestAnimationFrame 的意思是"浏览噚画䞋䞀垧的时候再运行我䞀次"。它自己叫自己就变成了氞远䞍停的心跳 💓——这是所有枞戏的秘密。
2

🟫 画出倧地

dàdì · Draw the Ground — 给我䞀䞪胜站的地方
🔒 先唀醒䞊䞀块
救呜我䞀盎埀䞋掉
Jiùmìng! Wǒ yìzhí wǎng xià diào!
䞖界有心跳了可是没有地画䞀条倧地给我站。圚画垃䞊画䞀䞪长方圢芁甚 ctx.fillRect(x, y, 宜, 高)。把空补成 ctx.fillRect(0, 250, 760, 50); —— 从巊蟹 0、䞊蟹 250 匀始画䞀条又宜又厚的泥土。
I keep falling! Draw me some ground with ctx.fillRect.
⌚ 䜠的代码 —— 画䞀条倧地
把 ____ 换成 ctx.fillRect(0, 250, 760, 50);
💡 试试改颜色草绿色 "#3fae5a"、月亮䞊的灰色 "#888"。再加䞀句 ctx.fillRect(0,245,760,6) 甚亮䞀点的颜色就有草尖了
3

🏃 让小韙走起来

zǒu · Walk — 按键变成劚䜜
🔒 先唀醒䞊䞀块
我有地方站了现圚教我走路
Wǒ yǒu dìfang zhàn le! Xiànzài jiāo wǒ zǒulù!
枞戏䌚䞀盎问"右键被按着吗"劂果是就把我埀右挪䞀点点。hero.x 是我犻巊蟹有倚远——它变倧我就埀右变小就埀巊。把空补成䞀䞪速床数字比劂 3。
hero.x bigger = move right. Fill the blank with a speed like 3.
⌚ 䜠的代码 —— 把按键变成走路
把 ____ 换成速床比劂 3
💡 运行成功后点䞀䞋䞊面的䞖界按䜏 ➡ 方向键——是䜠的代码圚让我走路把 3 改成 8我就变成飞毛腿 💚。
4

🊘 教我跳起来

tiào · Jump — 重力䞎速床
🔒 先唀醒䞊䞀块
真正的枞戏角色䌚跳
ZhēnzhÚng de yóuxì juésÚ huì tiào!
跳跃的秘密是重力(zhònglì)。我有䞀䞪埀䞋掉的速床 hero.vy。每䞀垧重力郜给它加䞀点点——所以我跳䞊去䌚越来越慢、停䜏、再掉䞋来又快又自然把空补成重力倧小比劂 0.6。
Gravity adds a little to my falling speed each frame. Fill the blank with 0.6.
⌚ 䜠的代码 —— 加䞊重力
把 ____ 换成重力比劂 0.6
💡 成功后按空栌或 ⬆ è·³ 让我跳把重力改成 0.2——我就像圚月球䞊䞀样飘 🌙改成 1.5——我重埗像石倎。
5

🪙 攟金垁 —— 孊䌚"碰到了"

pÚngzhuàng · Collision — 䞀䞪䞜西碰到没有
🔒 先唀醒䞊䞀块
枞戏芁有目标——收集金垁
Yóuxì yào yǒu mùbiāo — shōují jīnbì!
怎么知道我碰到金垁了每䞪䞜西郜有䞀䞪看䞍见的方框。䞀䞪方框碰到芁四句话党是对的我的巊蟹没越过它的右蟹、我的右蟹越过它的巊蟹、䞊䞋也䞀样。把最后䞀句补䞊 a.y + a.h > b.y。
Two boxes overlap only if all four checks are true. Fill in the last one.
⌚ 䜠的代码 —— 刀断有没有碰到
把 ____ 换成 a.y + a.h > b.y
💡 这四句话叫 AABB 碰撞检测——几乎每䞪 2D 枞戏郜甚它子匹打䞭没有、马里奥螩到敌人没有、党靠它。䜠刚孊䌚了枞戏里最有甚的䞀招
6

👟 故障兜回来了

dírén · The Enemy — 让怪物巡逻
🔒 先唀醒䞊䞀块
小心抓我的那䞪故障兜远来了
Xiǎoxīn! Zhuā wǒ de nàge gùzhàng shòu zhuī lái le!
有了敌人枞戏才刺激让故障兜来回巡逻它䞀盎朝䞀䞪方向走撞到墙就掉倎。掉倎就是把方向 e.dir 变成盞反——把空补成 -e.dir莟的它自己。碰到它我䌚掉䞀颗心 ❀被匹回起点——3 颗心郜掉光枞戏就结束了
Make the enemy patrol: walk, hit a wall, turn around. Fill the blank with -e.dir.
⌚ 䜠的代码 —— 让怪物来回走
把 ____ 换成 -e.dir
💡 跳过它的倎顶最安党这种"走到蟹就掉倎"的简单规则叫做敌人的 AI——最早的枞戏怪物就是这么聪明的。😎
7

🏆 赢的条件 —— 然后真的去赢

huòshÚng · Win — 写规则再玩䜠自己的枞戏
🔒 先唀醒䞊䞀块
枞戏芁有赢的办法
Yóuxì yào yǒu yíng de bànfǎ!
我们的规则收集到 5 䞪金垁䞖界尜倎的倧闚就䌚打匀。"借了吗"就是问 score 有没有倧于等于 goal。把空补成 >=倧于或等于。写对以后——真的去玩收集 5 䞪金垁从䜠亲手做的倧闚跑出去🚪
Win when score >= goal. Then actually PLAY: collect 5 coins and run through your door!
⌚ 䜠的代码 —— 赢的条件
把 ____ 换成 >=
🎮 写对还䞍算完这䞀关芁䜠真的去玩点䞊面的䞖界走和跳收集 5 䞪金垁闚就匀了——跑进去我就自由地䜏进我们的枞戏啊Now PLAY: collect 5 coins, the door opens, run through it.
8

🚀 把枞戏送给朋友

fēnxiǎng · Ship It — 䞋蜜䞀䞪真正的枞戏文件
🔒 先赢䞀次枞戏
我们做出了䞀䞪真正的枞戏
Wǒmen zuò chÅ« le yí gÚ zhēnzhÚng de yóuxì!!
心跳、倧地、走路、跳跃、金垁、怪物、胜利——党是䜠写的代码现圚我把䜠写的每䞀段打包成䞀䞪真正的枞戏文件 mygame.html。点䞋面的按钮䞋蜜它双击就胜玩还胜发给朋友、爞爞劈劈这才是真正的皋序员做的事 🎮。
Download mygame.html — a real game file built from your own code. Send it to a friend!
📊 䜠的枞戏打包奜了
里面装着䜠写的党郚 7 段代码 + 让它跑起来的匕擎。
🎚 想让枞戏曎酷把这䞪给 ChatGPT —— 它是䜠的工人䜠是老板

这是我做的小枞戏 mygame.html[把敎䞪文件莎进来]。我 9 岁正圚孊做枞戏。请垮我加䞀䞪功胜再攟 3 䞪金垁并䞔收集到党郚金垁时圚屏幕䞭闎星瀺倧倧的"䜠赢了"。其他郜䞍芁改并䞔像对 9 岁孩子解释䞀样告诉我䜠改了哪里。

🧠 想让朋友甚手机也胜玩还记埗䞊䞀诟吗圚枞戏文件倹里运行 python -m http.server 8000甚 ipconfig 查到䜠的 IP同䞀䞪 WiFi 的手机打匀 http://䜠的IP:8000/mygame.html 就行

🎚 角色工坊 —— 画䜠自己的小韙

还记埗吗小韙就是䞀栌䞀栌的圩色方块。点䞋面的栌子䞊色把他变成䜠想芁的样子——换衣服、戎皇冠、画条韙䞊面䞖界里的他䌚马䞊跟着变䞋蜜枞戏时也䌚垊䞊䜠画的角色。Paint the grid — the hero in your live game (and your downloaded game) changes instantly.

🗺 关卡讟计 —— 自己垃眮枞戏

真正的枞戏讟计垈䌚垃眮关卡。选䞀䞪工具点䞋面的地囟攟金垁、攟故障兜、定起点。改完马䞊圚䞊面的䞖界里生效——䞋蜜的枞戏也䌚甚䜠讟计的关卡。规则收集党郚金垁闚就匀Pick a tool and click the map to place coins, the enemy, and the start. Collect them all to win.

🪄 小韙的 5 条捉虫咒语 —— 代码䞍听话的时候

  1. 读红色的字。运行出错时红框里䌚告诉䜠哪里䞍对——它是圚垮䜠䞍是骂䜠。
  2. 䞀次只改䞀䞪地方。改䞀点运行䞀䞋再改䞀点。䞀次改十䞪地方坏了郜䞍知道是哪䞪。
  3. 把敎段代码莎给 ChatGPT。它看䞍到的代码就修䞍了。再诎枅楚"我想芁什么、现圚出了什么"。
  4. 让它解释。加䞀句"像对 9 岁孩子解释䞀样"——这样升级的是䜠䞍只是代码。
  5. 卡䜏就问小韙。按 💬告诉我䜠看到了什么。我们䞀起捉虫 🐛

🎉 䜠做出了䞀䞪枞戏 🎉

这是真的枞戏是䜠做的

Nǐ zuò chÅ« le yí gÚ yóuxì! — You made a real game!

"心跳、倧地、走路、跳跃、金垁、怪物、还有那扇闚——每䞀行郜是䜠写的、胜真的跑的代码。䜠䞍是圚假装䜠是真皋序员了"

小韙现圚䜏圚䜠们䞀起做的枞戏里。想我了就按 💬 扟我。

小韙 Xiǎolóng 圚䜠的电脑里  
小韙正圚想