HTML与JavaScript实现贪吃蛇游戏问题：蛇触碰苹果时被遮挡的解决方法

这是个很典型的Canvas绘制顺序问题——Canvas遵循画家算法：后绘制的元素会叠加在先绘制的元素上方。你遇到的蛇被苹果遮挡的情况，大概率是绘制顺序或者苹果更新时机的问题。

核心解决方案：调整绘制顺序 #

要让蛇始终显示在苹果上方，只需要先绘制苹果，再绘制蛇。这样蛇的图形会覆盖在苹果之上，哪怕两者位置重叠，蛇也会出现在上层。

看你现有的代码，其实已经是先画苹果再画蛇的顺序了？那可能是在蛇吃到苹果的帧里，苹果的位置没有及时更新，导致同一帧内蛇头和苹果处于同一位置，视觉上产生了“卡顿”的错觉。这时候还需要配合苹果的即时更新优化：

具体优化步骤 #

1. 确认绘制顺序正确：
   保持先画苹果、再画蛇的顺序（和你现有代码一致，但要确保没有其他绘制逻辑颠倒了这个顺序）：

   // 先绘制苹果（底层元素）
   context.fillStyle = 'red';
   context.fillRect(apple.x * BLOCK_SIZE + 1, apple.y * BLOCK_SIZE + 1, BLOCK_SIZE - 1, BLOCK_SIZE - 1);
   
   // 再绘制蛇（上层元素，会覆盖苹果）
   context.fillStyle = 'lime';
   for(var i = 0; i < snake.body.length; i++) {
       context.fillRect(snake.body[i].x * BLOCK_SIZE + 1, snake.body[i].y * BLOCK_SIZE + 1, BLOCK_SIZE - 1, BLOCK_SIZE - 1);
   }
   

2. 吃到苹果时立即更新苹果位置：
   当检测到蛇头触碰苹果后，不要等到下一帧才生成新苹果，而是在当前帧就立即更新苹果的坐标，避免同一帧内蛇头和苹果重叠（虽然蛇后画会覆盖苹果，但即时更新能消除视觉上的卡顿感）。示例逻辑：

   // 检测蛇头是否碰到苹果
   if (snake.body[0].x === apple.x && snake.body[0].y === apple.y) {
       // 执行蛇身体增长逻辑
       snake.body.push({...snake.body[snake.body.length - 1]});
       // 立即生成新的苹果位置（需实现随机生成不与蛇身体重叠的坐标）
       generateNewApple();
   }
   

这样调整后，蛇就会始终显示在苹果上方，不会再出现被遮挡的情况啦。

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