坐标与移动

游戏世界的每样东西，都有自己的门牌号

📖知识引入

📐屏幕是张方格纸

游戏画面其实是一张大坐标纸：横向400格、纵向500格（像素）。马里奥站在哪、金币飘在哪，全靠一对数字（x, y）说话。

➡️x管左右

x是横向门牌号：x变大，角色往右走；x变小，往左走。篮球往右运，就是x一直在+1、+1、+1。

⬇️y管上下（有陷阱！）

注意：屏幕的y轴是倒着长的！左上角是(0,0)，y越大反而越靠下。想往上跳？y要减小！新手最容易在这里晕头转向。

🏃移动=每帧挪一小步

游戏里的移动不是「咻」地飞过去，而是每秒60次、每次挪几像素：「x加3、加3、加3……」快到眼睛以为它在滑行。

🤖让AI调移动手感

「移动有点飘，改成加速起步、松手滑行」——把感觉描述给AI，它负责改数值。你调感觉，AI调代码，绝配。

💡

屏幕y轴向下长——往下是加、往上是减，千万别记反！

🔍给游戏世界定门牌号

// 主角移动的核心代码（网页游戏JS版）
let player = { x: 100, y: 250, speed: 3 };

// 每一帧执行一次：坐标悄悄变化
function update() {
  if (按键.右) player.x += player.speed;  // x变大->往右
  if (按键.左) player.x -= player.speed;  // x变小->往左
  if (按键.上) player.y -= player.speed;  // y变小->往上!
  if (按键.下) player.y += player.speed;  // y变大->往下
}

// 挪一步，画一步
update();
draw();

一张400×300的游戏地图，标出几个关键位置：

(0,0)
  ┌──────────────────────┐
  │ ●金币(200,50)         │
  │        起跳            │
  │ 🏃主角(100,250) ──▶   │
  │   往右走 x变大          │
  │              ▲         │
  │              │往上跳y变小│
  └──────────────────────┘
                    (400,300)

主角向右移动的过程：

第1帧  x=100
第2帧  x=103
第3帧  x=106
第4帧  x=109
……每帧+3，一秒60帧
眼睛看到的就是丝滑滑动 ✨

考考你：金币在(200,50)，主角在(100,250) 主角要往哪个方向跳才能吃到金币？

答：x从100变到200（往右）， y从250变到50（往上，y要变小！）

🎯小测验

第1题：屏幕坐标系中，y坐标变大代表？

第2题：游戏里流畅的移动，真相是什么？

第3题：觉得角色移动「太飘」，最合适的做法是？

📝本课知识点

✓屏幕是一张坐标方格纸
✓x管左右，y管上下
✓y轴向下长，往上跳是y减小
✓移动=每帧挪一小步
✓感觉问题交给AI调参数

第11课完成！继续探索下一课吧 🚀

🔤

上一课

第10课

下一课

第12课

🔤