如何確定遊戲區域中的可移動區域

Question

我正在構建基於2D正方形網格的基於回合的HTML遊戲。每個網格平方可以穿越不同數量的移動點（IE：道路1 MP，草原1.5 MP，森林2 MP）等。當用戶點擊一個單位時，我想確定所有可能的可移動空間與所述單位的分配移動點，以便我可以突出顯示它們並使其可點擊。

有沒有免費的圖書館可以做到這一點？我已經看到了一些路徑算法，但沒有關於確定可移動區域。其他遊戲開發者如何處理這個問題？我對vanilla JS和JQuery解決方案都是開放的。

Answer 1

嗯，我決定嘗試自己去攻擊它。我從來沒有在這些算法的偉大，所以我相信有一個更有效的方式來處理它比我所做的。但是，對我而言，它的運行速度足夠快，非常簡單易懂。

如果其他人希望這樣做有幫助，我已經包含下面的代碼。這是我的原始答案的更新版本，我修改後還存儲了所採用的路徑，以便您可以顯示通過正確空間移動的單元。這個答案在下面的例子中使用JQuery，但只在少數幾個地方使用;你可以很容易地用香草JS代替它們。包含實際路徑/區域查找功能的第一塊代碼是純JS。

<script> 
    var possibleMovementAreaArray = new Array(); // This array will hold our allowable movement tiles. Your other functions can access this after running possibleMovementArea(). 

    function possibleMovementArea(unitIndex) { 
     // I'm storing each unit in my game in an array. So I pass in the index of the unit I want to determine the movement area for. 
     var x = unitList[unitIndex][10]; // x coordinate on the playgrid 
     var y = unitList[unitIndex][11]; // y coordinate on the playgrid 
     var mp = unitList[unitIndex][15]; // number of movement points 
     possibleMovementAreaArray.length = 0; // Clear our array so previous runs don't interfere. 

     findPossibleMovement(x, y, mp); 
    } 

    function findPossibleMovement(x, y, mp, prevStepX, prevStepY) { 
     // This is a recursive function; something I'm not normally too good at. 

     for (var d=1; d<=4; d++) { 
      // We run through each of the four cardinal directions. Bump this to 8 and add 4 more cases to include corners. 
      if (d == 1) { 
       // Check Up 
       var newX = x; 
       var newY = y - 1; 
      } else if (d == 2) { 
       // Check Down 
       var newX = x; 
       var newY = y + 1; 
      } else if (d == 3) { 
       // Check Left 
       var newX = x - 1; 
       var newY = y; 
      } else if (d == 4) { 
       // Check Right 
       var newX = x + 1; 
       var newY = y; 
      } 

      // Check to see if this square is occupied by another unit. Two units cannot occupy the same space. 
      spaceOccupied = false; 
      for (var j=1; j<=numUnits; j++) { 
       if (unitList[j][10] == newX && unitList[j][11] == newY) 
        spaceOccupied = true; 
      } 

      if (!spaceOccupied) { 
       // Modify this for loop as needed for your usage. I have a 2D array called mainMap that holds the ID of a type of terrain for each tile. 
       // I then have an array called terList that holds all the details for each type of terrain, such as movement points needed to get past. 
       // This for loop is just looking up the ID of the terrain for use later. Sort of like a "SELECT * FROM terrainInfo WHERE ID=terrainOfCurrentTile". 
       for (var j=1; j<=numTerrains; j++) { 
        if (newX > 0 && newX <= mapWidth && newY > 0 && newY <= mapHeight && terList[j][1] == mainMap[newX][newY]) 
         break; // After finding the index of terList break out of the loop so j represents the correct index. 
       } 
       if (j <= numTerrains) { // Run if an actual terrain is found. No terrain is found if the search runs off the sides of the map. 
        var newMp = mp - terList[j][7]; // Decrement the movement points for this particular path. 
        if (newMp >= 0) { // Only continue if there were enough movement points to move to this square. 
         // Check to see if this square is already logged. For both efficiency and simplicity we only want each square logged once. 
         var newIndex       = possibleMovementAreaArray.length 
         var alreadyLogged = false 
         if (possibleMovementAreaArray.length > 0) { 
          for (var j=0; j<possibleMovementAreaArray.length; j++) { 
           if (possibleMovementAreaArray[j][1] == newX && possibleMovementAreaArray[j][2] == newY) { 
            alreadyLogged   = true; 
            var alreadyLoggedIndex = j; 
           } 
          } 
         } 
         if (!alreadyLogged) { 
          // This adds a row to the array and records the x and y coordinates of this tile as movable 
          possibleMovementAreaArray[newIndex]  = new Array(6); 
          possibleMovementAreaArray[newIndex][1] = newX; 
          possibleMovementAreaArray[newIndex][2] = newY; 
          possibleMovementAreaArray[newIndex][3] = prevStepX; // This tracks the x coords of the steps taken so far to get here. 
          possibleMovementAreaArray[newIndex][4] = prevStepY; // This tracks the y coords of the steps taken so far to get here. 
          possibleMovementAreaArray[newIndex][5] = newMp; // Records remaining MP after the previous steps have been taken. 
         } 
         if (alreadyLogged && newMp > possibleMovementAreaArray[alreadyLoggedIndex][5]) { 
          // If this tile was already logged, but there was less MP remaining on that attempt, then this one is more efficient. Update the old path with this one. 
          possibleMovementAreaArray[alreadyLoggedIndex][3] = prevStepX; 
          possibleMovementAreaArray[alreadyLoggedIndex][4] = prevStepY; 
          possibleMovementAreaArray[alreadyLoggedIndex][5] = newMp; 
         } 
         if (newMp > 0) { 
          // Now update the list of previous steps to include this tile. This list will be passed along to the next call of this function, thus building a path. 
          if (prevStepX == '') { 
           var newPrevStepX = [newX]; 
           var newPrevStepY = [newY]; 
          } else { 
           // This code is required to make a full copy of the array holding the existing list of steps. If you use a simple equals then you just create a reference and 
           // subsequent calls are all updating the same array which creates a chaotic mess. This way we store a separate array for each possible path. 
           var newPrevStepX = prevStepX.slice(); 
           newPrevStepX.push(newX); 
           var newPrevStepY = prevStepY.slice(); 
           newPrevStepY.push(newY); 
          } 

          // If there are still movement points remaining, check and see where we could move next. 
          findPossibleMovement(newX, newY, newMp, newPrevStepX, newPrevStepY); 
         } 
        } 
       } 
      } 
     } 
    } 
</script> 

運行上面的代碼後，您可以循環訪問數組以查找所有可用的切片。這是我如何做的：

<script> 
    // Shows the movement area based on the currently selected unit. 
    function showMovement() { 
     var newHTML = ""; 
     curAction = "move"; 
     possibleMovementArea(curUnit); // See above code 
     for (x=0; x<possibleMovementAreaArray.length; x++) { 
      // Loop over the array and do something with each tile. In this case I'm creating an overlay that I'll fade in and out. 
      var tileLeft = (possibleMovementAreaArray[x][1] - 1) * mapTileSize; // Figure out where to absolutely position this tile. 
      var tileTop  = (possibleMovementAreaArray[x][2] - 1) * mapTileSize; // Figure out where to absolutely position this tile. 
      newHTML = newHTML + "<img id='path_" + possibleMovementAreaArray[x][1] + "_" + possibleMovementAreaArray[x][2] + "' onClick='mapClk(" + possibleMovementAreaArray[x][1] + ", " + possibleMovementAreaArray[x][2] + ", 0);' src='imgs/path.png' class='mapTile' style='left:" + tileLeft + "px; top:" + tileTop + "px;'>"; 
     } 
     $("#movementDiv").html(newHTML); // Add all those images into a preexisting div. 
     $("#movementDiv").css("opacity", "0.5"); // Fade the div to 50% 
     $("#movementDiv").show(); // Make the div visible. 
     startFading(); // Run a routine to fade the div in and out. 
    } 
</script> 

既然我們確定的路徑，我們可以輕鬆地顯示運動以及通過存儲的信息循環：

<script> 
    for (j=0; j<possibleMovementAreaArray[areaIndex][3].length; j++) { 
     // This loop moves the unit img to each tile on its way to its destination. The final destination tile is not included. 
     var animSpeed = 150; // Time in ms that it takes to move each square. 
     var animEase = "linear"; // We want movement to remain a constant speed through each square in this case. 
     var targetLeft = (possibleMovementAreaArray[areaIndex][3][j]-1) * mapTileSize; // This looks at each step in the path array and multiplies it by tile size to determine the new horizonal position. 
     var targetTop = (possibleMovementAreaArray[areaIndex][4][j]-1) * mapTileSize; // This looks at each step in the path array and multiplies it by tile size to determine the new vertical position. 
     $("#char_"+curUnit).animate({"left":targetLeft, "top":targetTop}, animSpeed, animEase); // Do the animation. Subsequent animations get queued.     
    } 

    // Now we need to move to that last tile. 
    newLeft = (x-1) * mapTileSize; 
    newTop = (y-1) * mapTileSize; 
    $("#char_"+curUnit).animate({"left":newLeft, "top":newTop}, 400, "easeOutCubic"); // Slow unit at the end of journey for aesthetic purposes. 

    $("#char_"+curUnit).addClass("unitMoved", 250); // Turns the image grayscale so it can easily be seen that it has already moved. 
</script> 

希望這是幫助他人。