修复JS实现网格游戏玩家指定范围可移动坐标生成的错误

问题原因 #

你当前的代码仅生成了以玩家坐标为中心、8个正方向（横、竖、45度对角线）上距离等于步长的点，没有覆盖两个正方向之间的所有中间坐标，因此range≥2时会出现漏算的U区域。
你给出的示例对应的是切比雪夫距离≤range的正方形可移动范围，即横向、纵向偏移量的最大值不超过range的所有非玩家自身坐标点。

修正代码 #

const generateMoveableAreas = (playerX, playerY, range) => {
  const moveableAreas = [];
  // 遍历横向所有允许的偏移量
  for (let dx = -range; dx <= range; dx++) {
    // 遍历纵向所有允许的偏移量
    for (let dy = -range; dy <= range; dy++) {
      // 跳过玩家自身所在的位置，和原有逻辑保持一致
      if (dx === 0 && dy === 0) continue;
      moveableAreas.push({
        x: playerX + dx,
        y: playerY + dy
      });
    }
  }
  return moveableAreas;
};

其他可移动范围规则（可选） #

如果后续需要调整可移动范围的形状，可修改判断条件实现：

• 曼哈顿距离（菱形范围，总移动步数不超过range）：添加判断if (Math.abs(dx) + Math.abs(dy) > range) continue
• 欧氏距离（圆形范围，直线距离不超过range）：添加判断if (Math.sqrt(dx*dx + dy*dy) > range) continue

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