0

パスの計算にA*アルゴリズムを使用しているため、x座標とy座標（x、y）で構成されるノードの配列があります。マウスクリックで、プレーヤーがタイルの中心点に基づいて配列内のそれらのタイルに沿って移動するようにします。そうでない場合は、コーナーポイントは関係ありません。（斜めの動きを可能にします）。たとえば、[（1,1）、（2,2）、（3,2）]の配列があります。これらの値は、タイルベースのマップの行と列の値であり、それに基づいてタイルの中心点を計算できます。コーナーポイントなので、プレーヤーが最初に指定されたタイルに移動すると、次のタイルに進みます。注意すべき点がいくつかあります：-プレーヤーはタイルと同じサイズです-プレーヤーは3ユニットごとに移動します（したがって、タイルの中心点などと完全に整列しません）

  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、または負になる必要があると思います。すべての助けのためのThx。

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 に答える