你今天会做一个「躲避 + 收集」的小游戏:主角左右移动,接住掉落的好东西,躲开坏东西,分数达到目标就赢。

做完这节课,你会得到一个可以继续改造的基础游戏。它不一定已经足够拿去申请 Review,但它会让你拥有一个能运行、能截图、能交给 AI 继续扩展的起点。


01. 认识编辑器与移动主角 (8 min)

目标:看懂 MakeCode Arcade 的积木区 / 模拟器 / 角色概念,让角色受键盘控制。

开始前

  1. 打开 arcade.makecode.com
  2. 点击 New Project
  3. 项目名建议使用英文和数字,比如 first-pocket-game
  4. 如果你要录屏,请从这里开始录,后面可以剪成开发日志素材。

动手步骤

  1. 点击 New Project 新建项目,命名为 my-first-game
  2. 在左侧积木抽屉中,打开 Sprites,拖出 set mySprite to sprite [ ] of type Player 放入 on start 中。
  3. 点击方块中的灰色空格,打开像素编辑器,手绘或在 Gallery 中选一个 16×16 的主角形象(比如一个小飞船或小人)。
  4. 打开 Controller,拖出 move mySprite with buttons,放在刚才那块积木下方。默认地,它会允许上下左右移动。双击它的小 + 号,可以限制 vx (水平速度) 和 vy (垂直速度)。

插图建议:这里放一张 MakeCode 编辑器截图,标出 Blocks 区、模拟器、工具栏和 JavaScript 切换按钮。

你会得到:在左侧模拟器里,你可以用键盘方向键(或 WASD)控制主角在屏幕里自由移动了。

02. 让东西掉下来 (10 min)

目标:理解「每隔一段时间生成对象」和重力物理。

动手步骤

  1. 打开 Game,拖出 on game update every 500 ms,将时间改为 1000 ms (即 1 秒)。
  2. Sprites 中拖出 set projectile to sprite [ ] of type Food 放入这个更新积木中。把它重命名为 apple。画一个苹果。
  3. 设置初始位置:从 Sprites 拖出 set mySprite x to 0,将变量改为 apple,值改为 pick random 0 to 160(从 Math 抽屉中找随机数积木,160 是屏幕宽度)。
  4. 设置下落速度:拖出 set mySprite vx 0 vy 0,将变量改为 applevy 改为 50vx 保持 0。这样苹果就会垂直下落。
  5. 防止苹果堆积:在 Sprites 底部找到 set mySprite auto destroy on wall on 并开启,保证掉出屏幕的苹果被自动销毁。

你会得到:每隔 1 秒,就会有一个苹果从屏幕顶部随机位置产生,并匀速向下坠落。

03. 接住与碰撞 (10 min)

目标:理解 Sprite 碰撞事件、生命值 and 加分。

动手步骤

  1. on start 积木中,从 Info 拖入 set life to 3
  2. 拖出 Sprites 中的重合事件:on sprite of type Player overlaps otherSprite of type Food
  3. 在重合事件内:
    • 拖入 Info 中的 change score by 1
    • 拖入 Sprites 中的 destroy otherSprite,并点击 + 加上 spray 效果。这会销毁被接住的苹果。
  4. 现在做坏东西:复制步骤 2 的 on game update 积木,改成 every 1500 ms,生成 type Enemy 的炸弹(重命名为 bomb),vy 设为 70
  5. 拖出 Player overlaps Enemy 事件:在里面放入 change life by -1destroy otherSprite (即炸弹)。

你会得到:接住苹果分数加 1,碰到炸弹扣 1 颗心。生命归零时游戏自动结束(Game Over 画面是 MakeCode 内置的)。

04. 胜负与难度递增 (10 min)

目标:理解游戏结束条件,给游戏设计胜利目标。

动手步骤

  1. 在 Player overlaps Food (接苹果) 积木内部,加入一个 Logic 里的 if then 判断。
  2. 条件设为 score >= 20 (分数值从 Info 拖出)。
  3. 如果成立,拖入 Game 中的 game over WIN
  4. 为了好玩,你可以去 Music 里加一些 play sound 积木,在接到苹果或撞到炸弹时播放简短音效。

你会得到:一个完全闭环的游戏。拿到 20 分通关,撞满 3 次炸弹失败。这已经达到了 YSWS 的最低 ship 门槛!

05. 让 AI 帮你扩展 (12 min)

目标:学会把 AI 当搭档,进行文本模式的代码扩展。这里先用“复制代码给 AI”的方式,下一篇文档会讲 CodeBuddy 工作流。

动手步骤

  1. 在 MakeCode 页面顶部,把编辑器从 Blocks 切换到 JavaScript(或 TypeScript)。
  2. 你会看到刚才拼接的所有积木都变成了代码。复制全部代码。
  3. 把这段代码贴给你的 AI 助手(如 Cursor、Claude),发送以下 Prompt:
    这是我制作的 MakeCode Arcade 躲避收集游戏的 TypeScript 代码。
    请帮我做如下修改:
    1. 增加一种新的金色苹果(GoldFood),每 10 秒低概率掉落一个,接住后加 5 分并播放特殊音效。
    2. 随分数增加,苹果掉落的速度稍微加快。
    请给出修改后的完整 TS 代码,并说明你改动了哪些函数或变量。
    
  4. 阅读 AI 给出的解释,理解它的改动。然后将代码复制并覆盖粘贴回 MakeCode 的 JavaScript 编辑器中。
  5. 切回 Blocks 模式,如果代码无误,它会重新渲染成积木(部分高级语法在 Block 模式下不可还原,但可以直接在 JS 模式下运行和预览)。

提示:在 interview 环节,审核人会让你解释这些新增的代码。请务必读懂它,不要直接粘贴完全不理解的复杂代码。

06. 导出与分享 (8 min)

目标:获取分享链接和截图,为提交做准备。

动手步骤

  1. 在 MakeCode 页面左上角,点击 Share 按钮。
  2. 输入你的游戏名称,点击 Publish project
  3. 生成一个以 https://makecode.com/_xxxxxx 开头的链接。复制并保存这个链接,它是我们审核你项目的唯一依据。
  4. 在模拟器中玩一下,使用模拟器下方的相机图标,或者电脑快捷键,截 1-2 张游戏运行画面(你可以把这些图片存在你的项目文件夹中,用于提交 README 时当附件)。

录屏建议:这里录一段 20-30 秒的视频,内容是你打开 Share 链接、试玩、达到胜利或失败画面。

07. 课后最小作业 (10 min)

完成课程以后,不要立刻提交 Review。先做下面 3 件小事:

  1. 把游戏名称改成你自己的,不要叫 my-first-game
  2. 至少改 1 个美术元素,比如主角、苹果、炸弹、背景色。
  3. 写下第一篇开发日志,回答这 4 个问题:
    • 我做了什么游戏?
    • 玩家要怎么赢?
    • 我今天最卡的地方是什么?
    • 我是自己解决的,还是问了 AI?

日志不用很长,但要具体。比如“我不知道怎么让苹果随机掉下来,后来发现要用 on game update every 1000 ms,再把 x 设置成随机数”,这就是好日志。

08. 进入下一步

现在你已经有了一个基础游戏。下一步去看 用 CodeBuddy 和 AI 辅助开发,把它改成一个有你自己主题的作品。