html5畫布動畫對象遵循路徑

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、0或為負數。 感謝所有幫助。

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

    }