0

我正在使用 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 或为负数。感谢所有的帮助。

4

1 回答 1

0

我想出了这个计算函数：

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

    }
于 2012-11-21T00:01:12.453 回答