javascript - Javascript 中的 A*(使用 p5.js)不起作用

Question

我正在为位于二维正方形数组中的玩家编写寻路算法。我想找到从a到b的最短路径并高效地完成它。我之前在java(处理)中工作，并且我的功能运行得很好。

boolean findPath(PVector down, PVector up, Square[][] board) {
  PVector start = up;
  PVector goal = down;

  ArrayList<Square> closedSet = new ArrayList<Square>();
  ArrayList<Square> openSet = new ArrayList<Square>();

  HashMap<Square, Square> cameFrom = new HashMap<Square, Square>((int)Math.pow(squares, 2));
  HashMap<Square, Float> gScore = new HashMap<Square, Float>((int)Math.pow(squares, 2));
  HashMap<Square, Float> fScore = new HashMap<Square, Float>((int)Math.pow(squares, 2));

  for (int i = 0; i<dungeon.floors.get(currentFloor).numSquares; i++) {
    for (int j = 0; j<dungeon.floors.get(currentFloor).numSquares; j++) {
      gScore.put(board[i][j], 1000.0);
    }
  }

  gScore.put(board[(int)start.x][(int)start.y], 0.0);
  fScore.put(board[(int)start.x][(int)start.y], heuristic(start, goal));

  openSet.add(board[(int)start.x][(int)start.y]);

  while (!openSet.isEmpty()) {
    Square current = board[(int)start.x][(int)start.y];
    float lowest = 1000;
    for (Square s : openSet) {
      if (fScore.get(s)<lowest) {
        lowest = fScore.get(s);
        current = s;
      }
    }
    if (current.locX == goal.x && current.locY == goal.y) {
      while (cameFrom.containsKey(current)) {
        current = cameFrom.get(current);
      }
      board[(int)start.x][(int)start.y].squareType = -3;
      return true;
    }
    openSet.remove(current);
    closedSet.add(current);
    //neighbors() returns an ArrayList of valid neighbors
    for (Square s : current.neighbors(board)) {
      if (closedSet.contains(s)) {
      } else {

        float tempG = gScore.get(current) + 1;
        if (!openSet.contains(s)) {
          openSet.add(s);
        } 
        if (tempG < gScore.get(s)) {

          cameFrom.put(s, current);
          gScore.put(s, tempG);
          fScore.put(s, gScore.get(s) + heuristic(new PVector(s.locX, s.locY), goal));
        }
      }
    }
  }

  return false;
}

float heuristic(PVector start, PVector goal) {
  return dist(start.x, start.y, goal.x, goal.y);
}

但是我正在将游戏转移到 JavaScript，但我无法判断我的代码哪里出了问题。它被卡在一个正方形上并将其永远添加到 closeSet 中(数十万次)。这是我的 Javascript 代码 -

this.findPath = function(f, _start, _goal) {
      var start = _start;
      var goal = _goal;

      var closedSet = [];
      var openSet = [];

      var squareScores = [];
      var startSquare = (start.x * numSquares) + start.y;

      for (var i = 0; i < numSquares; i++) {
         for (var j = 0; j < numSquares; j++) {
            squareScores.push(new MapSquare(dungeon.floors[f].board[i][j], 10000, 10000));
         }
      }

      squareScores[startSquare].gScore = 0;
      squareScores[startSquare].fScore = this.heuristic(start, goal);
      openSet.push(squareScores[startSquare]);

      while (openSet.length > 0) {
         var current = squareScores[startSquare];
         var lowest = 9999;
         for (var s = 0; s < squareScores.length; s++) {
            if (squareScores[s].fScore < lowest) {
               lowest = squareScores[s].fScore;
               current = squareScores[s];
            }
         }
         if (current.square.x == goal.x && current.square.y == goal.y) {
             return true;
         }

         openSet.splice(openSet.indexOf(current.square));  
         closedSet.push(current.square);

         var currentNeighbors = current.square.neighbors(dungeon.floors[f].board);
         for (var i = 0; i < currentNeighbors.length; i++) {
            var skip = false;
            for (let c of closedSet) {
               if (c.x == currentNeighbors[i].x && c.y == currentNeighbors[i].y) {
                  skip = true;
               }
            }
            if (skip) {
               continue;
            }
            else {
               var tempG = current.gScore + 1;

               var dontAdd = false;
               for (let o of openSet) {
                  if (o.x == currentNeighbors[i].x && o.y == currentNeighbors[i].y) {
                     dontAdd = true;
                  }
               }
               if (!dontAdd) {
                  openSet.push(currentNeighbors[i]);
               }
               var index = (currentNeighbors[i].x * numSquares) + currentNeighbors[i].y;
               if (tempG < squareScores[index].gScore) {
                  //cameFrom.push(gScore[i]);
                  console.log("update");

                  squareScores[index].gScore = tempG;
                  squareScores[index].fScore = squareScores[index].gScore + this.heuristic(squareScores[index].square.x, squareScores[index].square.y, goal.x, goal.y);
               }
            }
         }
      }
      return false;
   };

   //dist from player to goal
   this.heuristic = function(_x1, _y1, _x2, _y2) {
      return dist(_x1, _y1, _x2, _y2);
   };

我的 Javascript 代码看起来有点不同，因为我几天来一直在尝试解决这个问题，但我无法弄清楚。我究竟做错了什么？如果代码需要澄清，请询问。

Answer 1

你必须debug你的代码。该链接是关于处理中的调试，但同样的想法也适用于 JavaScript 和 P5.js。

具体来说，您需要准确地弄清楚代码的执行何时与您的预期不同。

您可以通过添加 console.log() 语句来计算变量的值、以什么顺序调用哪些函数、是否输入 if 语句来实现此目的、循环迭代多少次等。

如果这不起作用，您还可以使用调试器单步调试代码。每个浏览器都带有 JavaScript 调试器，它允许您单步执行代码并检查每个变量的值。同样，我们的目标是准确地弄清楚代码何时执行与您预期不同的操作。

当你把它缩小到几行时，如果你仍然不知道如何修复它，那么你可以创建一个 MCVE这可以隔离问题，而无需围绕它添加所有额外的代码。到那时，帮助你就会容易得多。祝你好运。