Canvas修仙传·第三重天金丹境（上集） ——九转游戏开发心法之《灵蛇奇谭》

各位道友，历经前两重天的修炼，恭喜诸位突破"动画"与"交互"桎梏！今日我们将解锁Canvas修仙路上第一个质变境界——将代码炼化为游戏元神！(ﾉ◕ヮ◕)ﾉ*:・ﾟ✧

---

章前黑话词典

🔍 金丹境术语表：

• 游戏循环(Game Loop)：驱动游戏逻辑的灵气泵
• 状态机(State Machine)：记录万物生灭的生死簿
• 精灵图(Spritesheet)：封印多帧动画的卷轴
• 瓦片地图(Tilemap)：拼接世界的马赛克
• 脏矩形(Dirty Rect)：优化渲染的净衣术

---

第一转：贪吃蛇的九窍玲珑心

项目核心架构图

├── 蛇之本源（数据层）
│   ├── 蛇头坐标  
│   ├── 蛇身坐标队列  
│   ├── 移动方向向量  
├── 天地法则（逻辑层）  
│   ├── 方向输入处理  
│   ├── 死亡判定  
│   ├── 食物生成  
├── 万象更新（视图层）  
│   ├── 网格渲染  
│   ├── 渐变蛇身  
│   ├── 粒子特效  

---

第一式：天地棋盘·网格系统

术语解谜：网格坐标系

将画布划分为虚拟网格，用行列坐标代替像素坐标，是2D游戏开发的筑基之术

// 天地棋盘初始化
const GRID_SIZE = 20   // 每个网格20x20像素
const COLS = canvas.width / GRID_SIZE  // 40列
const ROWS = canvas.height / GRID_SIZE // 30行

// 坐标转换大法
function toGrid(x, y) {
   
  return {
   
    col: Math.floor(x / GRID_SIZE),
    row: Math.floor(y / GRID_SIZE)
  }
}

function toPixel(col, row) {
   
  return {
   
    x: col * GRID_SIZE + 1, // +1留出缝隙
    y: row * GRID_SIZE + 1
  }
}

🔥 渡劫要点：

• 网格尺寸需能被画布宽高整除
• 渲染时保留1像素缝隙提升视觉效果
• 使用Math.floor确保坐标取整

---

第二式：灵蛇化形·数据结构

核心代码：蛇的数字化身

class Snake {
   
  constructor() {
   
    this.body = [
      {
    col: 10, row: 10 }, // 蛇头
      {
    col: 9, row: 10 },  // 蛇身
      {
    col: 8, row: 10 }
    ]
    this.direction = {
    x: 1, y: 0 } // 初始向右
    this.nextDirection = {
    x: 1