JS贪吃蛇游戏穿墙位置异常Bug修复求助

核心问题分析 #

这个偏移问题大概率是穿墙后的坐标重置逻辑错误——直接将snake.x/snake.y设为0时，没考虑蛇身方块尺寸（box值）的影响，或是循环边界的取模计算有误。

具体修复步骤 #

• 用取模运算实现循环穿墙：
  放弃直接设0的逻辑，改用取模让坐标自动循环到画布范围内，彻底避免偏移。假设画布宽高为canvas.width/canvas.height，方块尺寸为box，代码如下：

  // 处理x轴穿墙，负数加画布宽后取模，自动回到右侧
  snake.x = (snake.x + canvas.width) % canvas.width;
  // 处理y轴穿墙，负数加画布高后取模，自动回到底部
  snake.y = (snake.y + canvas.height) % canvas.height;
  

• 确保坐标与方块尺寸对齐：
  绘制蛇身前，强制坐标为box的整数倍，避免半块偏移：

  snake.x = Math.round(snake.x / box) * box;
  snake.y = Math.round(snake.y / box) * box;
  

• 验证画布与方块的尺寸匹配：
  保证canvas.width和canvas.height是box的整数倍（比如画布宽400、box=20，400/20=20刚好是整数个方块），避免边界出现非完整方块的情况。

额外排查点 #

• 检查移动步长是否等于box值，步长不符会导致坐标逐渐偏移；
• 确认蛇的初始坐标是box的整数倍，从根源避免偏移。

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