贪吃蛇

60年经典，网格思维的必修课

📖知识引入

🀄世界是一张棋盘

贪吃蛇的世界不是连续的，而是一格一格的网格：蛇每次移动一整格，豆子也落在整格上。网格思维是很多游戏（俄罗斯方块、消消乐）的地基。

🚂蛇是一列小火车

蛇的身体本质是一个列表：蛇头在最前面，后面跟着一节节车厢。移动时「头进一格，尾出一格」——蛇就这样在棋盘上滑行。

🍎吃豆=火车加车厢

吃到豆子时，尾巴那一格不删——蛇就长了一格；没吃到，头进尾出，长度不变。一个「加/删」的小差别，就是这个游戏的全部奥秘。

🧨三种死法

撞墙死、咬到自己死——判定其实还是老朋友：碰撞检测！只不过这次是「蛇头 vs 墙」和「蛇头 vs 自己身体」。

🤖AI实战四步走

①要核心：「网格贪吃蛇，方向键控制」→②试玩验证→③调手感：「速度随分数加快」→④加打磨：吃豆音效、死亡动画。每步都让AI交作业。

💡

贪吃蛇=网格上的小火车：头进尾出，吃豆加车厢！

🔍看蛇是怎么爬的

// 贪吃蛇的「爬行」核心：头进尾出
let snake = [ {x:10, y:10}, {x:9, y:10}, {x:8, y:10} ];  // 列表：蛇头在前
let dir = { x: 1, y: 0 };   // 当前方向：向右

function step() {
  // 1. 计算新蛇头位置
  let head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };

  // 2. 头进：新格子塞到列表最前面
  snake.unshift(head);

  // 3. 吃到豆子了吗？
  if (head.x === food.x && head.y === food.y) {
    score += 10;              // 加分，尾巴不删 -> 变长
    spawnFood();              // 豆子换新位置
  } else {
    snake.pop();              // 尾出：删掉最后一格
  }
}

一只5格长的蛇向右移动一格：

移动前：
┌───┬───┬───┬───┬───┐
│   │ 4 │ 3 │ 2 │ 1 │  🍎
└───┴───┴───┴───┴───┘
（1是蛇头，4是蛇尾）

移动后（没吃豆）：
┌───┬───┬───┬───┬───┐
│   │   │ 4 │ 3 │ 2 │ 1→🍎
└───┴───┴───┴───┴───┘
蛇头进一格，蛇尾删一格
长度不变，看起来在「爬」

移动后（吃到豆）：
┌───┬───┬───┬───┬───┐
│   │ 4 │ 3 │ 2 │ 1 │ 🐍🍎
└───┴───┴───┴───┴───┘
蛇尾不删 -> 长度+1！

给AI的实战提示词（拿去用）：

「请用网页JS做一个贪吃蛇游戏：
20x20网格，方向键控制，
吃到豆子身体加长、分数+10，
撞墙或咬到自己游戏结束，
速度随分数逐渐加快。」

🎯小测验

第1题：贪吃蛇的身体在程序里最像什么？

第2题：蛇「变长」的实现原理是？

第3题：「撞墙死、咬自己死」用到的知识是？

📝本课知识点

✓贪吃蛇的内核：网格+列表
✓移动=头进尾出
✓吃豆=尾部不删，变长一格
✓死法判定还是碰撞检测
✓AI实战四步：核心-验证-调优-打磨

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

🛠️

上一课

第20课

下一课

第22课

🛠️