-2

このJSFiddleでは、赤い四角形が 1 つのタイルから次のタイルに非常に速く移動することがわかりますが、1 つのタイルから次のタイルに移動するのに約 0.2 秒かかるように設定するにはどうすればよいですか?

4

1 に答える 1

2

タイトルの質問に答えるために、一定時間後に JavaScript を実行する方法はsetTimeout()(またはsetInterval()) を使用します。

動きをアニメーション化するのは、ウォルト・ディズニーの手描きアニメーションの場合と同じです。それぞれ少しずつ変化させてたくさんの絵を描いて、一度に 1 枚ずつ表示し、各フレームを表示する前に少し時間を待ちます。

そのためには、各フレームを計算する必要があります。目的の位置と現在の位置の違いを見つけ、それらの違いをステップに切り刻みます。次に、現在位置が目的地に一致するまで、位置を 1 ステップずつ移動してイメージを描画します。

jsfiddle.net/kmHZt/79

var lastPos;
function draw() {
    var endPos = {
        x: (playerX - vX) * 32,
        y: (playerY - vY) * 32
    };
    var pos = $.extend({}, endPos, lastPos);
    var step = {
        x: (endPos.x - pos.x) / 10,
        y: (endPos.y - pos.y) / 10
    };
    drawStep();

    function drawStep() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        for (y = 0; y <= vHeight; y++) {
            for (x = 0; x <= vWidth; x++) {
                theX = x * 32;
                theY = y * 32;
                context.drawImage(tiles[board[y + vY][x + vX]], theX, theY, 32, 32);
            }
        }
        context.fillStyle = 'red';
        pos.x += step.x;
        pos.y += step.y;
        context.fillRect(pos.x, pos.y, 32, 32);
        if (Math.round(pos.x - endPos.x) + Math.round(pos.y - endPos.y) == 0) {
            lastPos = pos;
            return;
        }
        setTimeout(drawStep, 20);
    }
}
于 2013-03-13T23:32:34.250 に答える