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; 
     } 

    }