html5 canvas動畫物體跟蹤路徑

Question

我使用A *算法來計算我的路徑，因此我有一個包含x和y座標（x，y）的節點數組。在鼠標點擊時，我希望我的播放器能夠根據瓷磚的中心點或角點來排列陣列中的瓷磚。 （允許對角線運動）。例如，我有一個[（1,1），（2,2），（3,2）]的數組，這些值是基於我的基於貼圖的地圖中的行和列值，基於它我可以計算貼圖中心點/所以一旦我的玩家移動到第一個給定的瓦片，那麼他會繼續下一個，等等。 夫婦的事情需要注意： - 播放器的尺寸與瓷磚 相同的 - 玩家每三個單位移動（這樣就不會與瓷磚的中心點完全一致等等）

function drawPlayerRunning(result) { 

    ctx.clearRect(0, 0, mapCanvas.width, mapCanvas.height); 
    drawMapTiles(ctx, 12, 12, tileSize); 
    ctx.drawImage(tileSheet, 0, 40 * playerAnimationCounter, 40, 40, player.cornerPoint.x + canvasPadding, player.cornerPoint.y + canvasPadding, 40, 40); 
    calculatePlayerPosition(result); 

    function calculatePlayerPosition(result) { 

     var row = result[nextTilePlayerMovesToCounter].x; 
     var col = result[nextTilePlayerMovesToCounter].y; 
     map[row][col] = 5; 

     var tilePoint = cursor.getTileCornerPoint(row, col); 

     var calc1 = tilePoint.x - player.cornerPoint.y; 
     var calc2 = player.cornerPoint.y - tilePoint.x; 
     var calc3 = player.cornerPoint.x - tilePoint.y; 
     var calc4 = tilePoint.y - player.cornerPoint.x; 

     playerAnimationCounter++; 

     if ((calc1) >= player.pixelDistanceWhileMoving) { 
      player.cornerPoint.y += player.pixelDistanceWhileMoving; 
      //  $("#textDiv4").text("player cornerPoint (x,y): " + player.cornerPoint.x + "," + player.cornerPoint.y); 
     } if ((calc2) >= player.pixelDistanceWhileMoving) { 
      player.cornerPoint.y -= player.pixelDistanceWhileMoving; 
      //  $("#textDiv4").text("player cornerPoint (x,y): " + player.cornerPoint.x + "," + player.cornerPoint.y); 
     } if ((calc3) >= player.pixelDistanceWhileMoving) { 
      player.cornerPoint.x -= player.pixelDistanceWhileMoving; 
      //  $("#textDiv4").text("player cornerPoint (x,y): " + player.cornerPoint.x + "," + player.cornerPoint.y); 
     } if ((calc4) >= player.pixelDistanceWhileMoving) { 
      player.cornerPoint.x += player.pixelDistanceWhileMoving; 
      //  $("#textDiv4").text("player cornerPoint (x,y): " + player.cornerPoint.x + "," + player.cornerPoint.y); 
     } 
     else { 
      //alert("else - in tile"); 
      playerAnimationCounter = 0; 
      nextTilePlayerMovesToCounter++; 
      //alert(nextTilePlayerMovesToCounter + " - nextTilePlayerMovestoCounter"); 
      if (nextTilePlayerMovesToCounter == result.length) { 
       //alert("if result.lenght == counter"); 
       nextTilePlayerMovesToCounter = 0; 
       ctx.clearRect(0, 0, mapCanvas.width, mapCanvas.height); 
       drawMapTiles(ctx, 12, 12, tileSize); 
       drawPlayer(); 
       isPlayerRunningInProgress = false; 
       clearInterval(playerTimerInterval); 
       return false; 
      } 
      //ctx.clearRect(0, 0, mapCanvas.width, mapCanvas.height); 
      //drawMapTiles(ctx, 12, 12, tileSize); 
      //drawPlayer(); 
      //isPlayerRunningInProgress = false; 
      //clearInterval(playerTimerInterval); 
      //return; 

     } 

     if (playerAnimationCounter > player.pixelDistanceWhileMoving) { 
      playerAnimationCounter = 0; 
     } 
    } 
} 

function movePlayer(result) { 

if (isPlayerRunningInProgress) 
    return false; 
isPlayerRunningInProgress = true; 

animate(result); 


function animate(result) { 
    playerTimerInterval = setInterval(function(){drawPlayerRunning(result)}, 50); 
    } 
} 

這裏是我的功能，他們有點混亂，我想盡可能簡化它，當然最終得到這個工作。我不擔心我在這裏的一些變量，比如isPlayerRunningInProgress和與它相關的檢查，因爲我只想幫助從瓦片到瓦片的基本玩家動作，以及與碰撞相關的檢查（如果玩家到達目的地）。我猜測我需要某種速度變量，比如x和y要麼是1，要麼是負數。 Thx提供所有幫助。

Answer 1

我想出了這個計算功能：

function calculatePlayerPosition(result) { 

     var tilePoint = cursor.getTileCornerPoint(row, col); 

     var tileYMinusPlayerY = tilePoint.x - player.cornerPoint.y; 
     var tileXMinusPlayerX = tilePoint.y - player.cornerPoint.x; 

     if (tileYMinusPlayerY > 2) 
      velocityY = 1; 
     else if (tileYMinusPlayerY < -2) 
      velocityY = -1; 
     else velocityY = 0 

     if (tileXMinusPlayerX > 2) 
      velocityX = 1; 
     else if (tileXMinusPlayerX < -2) 
      velocityX = -1; 
     else velocityX = 0; 

     playerAnimationCounter++; 

     if (Math.abs(tileXMinusPlayerX) >= player.pixelDistanceWhileMoving || Math.abs(tileYMinusPlayerY) >= player.pixelDistanceWhileMoving) { 
      //velocity X 
      player.cornerPoint.x += player.pixelDistanceWhileMoving * velocityX; 
      //velocity Y 
      player.cornerPoint.y += player.pixelDistanceWhileMoving * velocityY; 

     } 
     else { 
      playerAnimationCounter = 0; 
      nextTilePlayerMovesToCounter++; 

      if (nextTilePlayerMovesToCounter == result.length) { 
       nextTilePlayerMovesToCounter = 0; 
       ctx.clearRect(0, 0, mapCanvas.width, mapCanvas.height); 
       drawMapTiles(ctx, 12, 12, tileSize); 
       drawPlayer(); 
       isPlayerRunningInProgress = false; 
       clearInterval(playerTimerInterval); 
       return false; 
      } 
      row = result[nextTilePlayerMovesToCounter].x; 
      col = result[nextTilePlayerMovesToCounter].y; 

      map[row][col] = 5; 

      ctx.clearRect(0, 0, mapCanvas.width, mapCanvas.height); 
      drawMapTiles(ctx, 12, 12, tileSize); 
      drawPlayer(); 

     } 

     if (playerAnimationCounter > player.pixelDistanceWhileMoving) { 
      playerAnimationCounter = 0; 
     } 

    }