如何将EasyStar.js寻路逻辑集成至现有网格生成器

你当前的核心问题出在EasyStar.js的初始化语法错误，以及网格配置、寻路触发逻辑不当，导致程序停滞。以下是针对性的解决步骤：

1. 修正EasyStar.js的导入与初始化 #

你当前的初始化代码存在语法错误，EasyStar通过require导入后已经是构造函数，无需额外加.js后缀：

// 错误写法
const EasyStar = require("easystarjs"); 
const easystar = new EasyStar.js();

// 正确写法
const EasyStar = require("easystarjs"); 
const easystar = new EasyStar();

2. 正确配置网格与可行走规则 #

初始状态下所有网格设为不可行走（用1标记障碍），单独将起点、终点设为可行走（用0标记），并告知EasyStar可通行的 tile 值：

// 初始化20×20网格，全为不可行走状态
const grid = Array(20).fill().map(() => Array(20).fill(1));

// 设置首列起点为可行走（示例取首列第一行，可按需调整）
grid[0][0] = 0;
// 设置末列终点为可行走（示例取末列最后一行）
grid[19][19] = 0;

// 配置EasyStar：仅值为0的tile可通行
easystar.setAcceptableTiles([0]);
easystar.setGrid(grid);

3. 避免寻路阻塞主线程 #

使用EasyStar的异步寻路回调，仅在用户修改网格后触发计算，避免主线程阻塞：

function triggerPathfinding() {
  const startX = 0, startY = 0;
  const endX = 19, endY = 19;

  // 先校验起点、终点是否处于可通行状态
  if (grid[startY][startX] !== 0 || grid[endY][endX] !== 0) return;

  // 异步寻路
  easystar.findPath(startX, startY, endX, endY, (path) => {
    if (path === null) {
      // 无通路，清空之前的路径着色
      clearPathColor();
      return;
    }
    // 有通路，渲染路径
    renderPath(path);
  });

  // 触发寻路计算
  easystar.calculate();
}

4. 路径着色与状态重置逻辑 #

拿到路径数组后，遍历修改对应网格的样式，同时保留起点、终点的特殊颜色：

function renderPath(path) {
  clearPathColor();
  // 跳过起点、终点，给路径中间节点着色
  path.forEach((point, index) => {
    if (index === 0 || index === path.length - 1) return;
    const cell = document.querySelector(`.grid-cell[data-x="${point.x}"][data-y="${point.y}"]`);
    if (cell) cell.style.backgroundColor = "#87CEEB";
  });
}

function clearPathColor() {
  document.querySelectorAll(".grid-cell").forEach(cell => {
    // 保留起点、终点样式，重置其他节点
    if (!cell.classList.contains("start") && !cell.classList.contains("end")) {
      cell.style.backgroundColor = cell.dataset.walkable === "true" ? "#fff" : "#333";
    }
  });
}

5. 点击网格切换状态的优化逻辑 #

点击网格时切换其可通行状态，同步更新网格数据后触发寻路：

function handleCellClick(e) {
  const cell = e.target;
  const x = parseInt(cell.dataset.x);
  const y = parseInt(cell.dataset.y);

  // 禁止修改起点、终点
  if ((x === 0 && y === 0) || (x === 19 && y === 19)) return;

  // 切换可通行状态
  const isWalkable = grid[y][x] === 0;
  grid[y][x] = isWalkable ? 1 : 0;
  cell.style.backgroundColor = isWalkable ? "#333" : "#fff";
  cell.dataset.walkable = !isWalkable;

  // 更新EasyStar网格并触发寻路
  easystar.setGrid(grid);
  triggerPathfinding();
}

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