贪吃蛇游戏吃苹果功能失效：为何代码无法触发吃苹果逻辑？

问题根源 #

代码存在两个核心问题导致吃苹果逻辑不生效：

1. 苹果坐标未转换为画布实际像素：生成ax和ay时计算的是格子索引（比如0-44，因450/10=45），但绘制苹果和碰撞检测时直接用索引值，未乘以方块尺寸box，导致苹果位置与蛇头坐标不在同一坐标系，永远无法触发碰撞。
2. 碰撞检测后缺少必要逻辑：即使触发碰撞，也未重新生成苹果、增加蛇长度，游戏体验不完整。

修复步骤 #

• 修正苹果坐标计算：生成坐标后乘以box，转换为画布像素坐标。
• 调整碰撞检测逻辑：坐标匹配时触发提示、重新生成苹果，并让蛇长度增加（跳过snake.pop()）。
• 优化蛇长度控制：改用变量控制蛇的初始长度，吃到苹果后递增长度。

完整修正代码 #

HTML

<canvas id="game" width="450" height="450"></canvas>

CSS

canvas {
  border: 1px solid #000;
  background-color: #000;
}

JavaScript

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
var box = 10;

// Snake
var snake = [];
var px = canvas.width / 2;
var py = canvas.height / 2;
var dir = "right";
var snakeLength = 3; // 初始蛇长度

// Apple - 生成符合像素坐标的苹果位置
function generateApple() {
  var maxGrid = canvas.width / box;
  return {
    x: Math.floor(Math.random() * maxGrid) * box,
    y: Math.floor(Math.random() * maxGrid) * box
  };
}
var apple = generateApple();

document.addEventListener("keydown", function(e) {
  if (e.keyCode === 37 && dir !== "right") dir = "left";
  else if (e.keyCode === 38 && dir !== "down") dir = "up";
  else if (e.keyCode === 39 && dir !== "left") dir = "right";
  else if (e.keyCode === 40 && dir !== "up") dir = "down";
});

function updateDirection() {
  switch(dir) {
    case "right": px += box; break;
    case "left": px -= box; break;
    case "up": py -= box; break;
    case "down": py += box; break;
  }

  // 边界循环处理
  if (px >= canvas.width) px = 0;
  if (px < 0) px = canvas.width - box;
  if (py >= canvas.height) py = 0;
  if (py < 0) py = canvas.height - box;
}

function drawElements() {
  // 绘制苹果
  ctx.fillStyle = "green";
  ctx.fillRect(apple.x, apple.y, box, box);

  // 更新蛇头位置
  updateDirection();
  const head = { x: px, y: py };
  snake.unshift(head);

  // 检测吃苹果
  const ateApple = head.x === apple.x && head.y === apple.y;
  if (ateApple) {
    alert("吃到苹果了！");
    apple = generateApple();
    snakeLength++;
  } else {
    // 没吃到则移除尾部，保持长度
    snake.pop();
  }

  // 绘制蛇身
  ctx.fillStyle = "red";
  snake.forEach(segment => {
    ctx.fillRect(segment.x, segment.y, box, box);
  });

  // 初始化蛇长度
  if (snake.length < snakeLength) {
    snake.push({ x: px, y: py });
  }
}

function gameLoop() {
  setInterval(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawElements();
  }, 1000 / 15); // 调整帧率为15FPS，操作更流畅
}

gameLoop();

关键修改说明 #

1. 苹果坐标标准化：通过generateApple()确保苹果位置是box的整数倍，与蛇的坐标系统统一。
2. 碰撞后逻辑完善：吃到苹果时重新生成苹果、增加蛇长度，不执行尾部移除操作。
3. 蛇长度可控：用snakeLength变量管理蛇的长度，初始设为3，吃到苹果后递增。
4. 边界逻辑优化：修正边界循环时的坐标计算，避免蛇头超出画布范围。

内容的提问来源于stack exchange，提问作者Phantom