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

    }

html5 canvas动画对象跟随路径

1 个答案: