1

タイルマップを作成しました：

http://www.exeneva.com/html5/movingTankExample/

これが私のスタートアップコードです：

function startUp() {
  drawScreen();   
  // Draw the tank
  context.drawImage(tileSheet, tankSourceX, tankSourceY, tileWidth, tileHeight, tankX, tankY, tileWidth, tileHeight);
}

drawScreen（）は、タイルマップを描画します。タイルマップの後にタンクを描画したいのですが、後でタンクをアニメートして移動したいので（drawScreen（）を再度呼び出す必要がないため）、drawScreen（）に配置しません。

なぜ私のタンクが表示されないのですか？

4

2 に答える 2

2

私はあなたがあなたの最後の答えであなたに渡したリンクを読んでいないと推測しています. ティッシュ、ティッシュ…

とにかく、これを解決するには、drawScreen()以前のようにメソッド内でタンクを描画する必要がありますが、重要な移動イベント内からタンクのアニメーション関数を呼び出す必要があります。このように、タンクは動いていないときは停止して描画し、動いているときは元の質問のようにアニメーションで描画します。

編集：

私は今あなたのコード全体を私のマシンに持っています。問題を解決するための手順は次のとおりです。多くのヒントを提供したので、必要に応じてコードを提供します。

1- アニメーションの初期化と、表示するアニメーションのフレームの選択を担当するコードが逆になっています。andの前にカウンターframeIndexを初期化する必要があります。tankSourceXtankSourceY

// Counter to keep track of the current index of animationFrames
var frameIndex = 0;
// Tank tiles
var tankSourceX = Math.floor(animationFrames[frameIndex] % tilesPerRow) * tileWidth;
var tankSourceY = Math.floor(animationFrames[frameIndex] / tilesPerRow) * tileHeight;

2-アニメーションフレームを変更するアニメーション関数内のフレームを定義するこれらの変数を配置すると、との値frameIndexが変更されます。tankSourceXtankSourceY

function animateMovement() { 
    // Animation frames
    frameIndex += 1;
    if (frameIndex == animationFrames.length) {
        frameIndex = 0;
    }
tankSourceX = Math.floor(animationFrames[frameIndex] % tilesPerRow) * tileWidth;
tankSourceY = Math.floor(animationFrames[frameIndex] / tilesPerRow) * tileHeight; 
}

3- 描画およびアニメーション関数は、イベント ハンドラーまたは冒頭のような間隔で呼び出すことができます。

var animateInterval = setInterval(animateMoviment, 200);
var drawingInterval = setInterval(drawScreen, 200);

4- タンクの状態として変数を初期化します。

var tankState = "stopped";

5-アニメーション機能で、この変数にチェックを入れてフレームを変更します。

function animateMovement() { 
    if (tankState == "moving") {
        // Animation frames
        frameIndex += 1;
        if (frameIndex == animationFrames.length) {
            frameIndex = 0;
        }
        tankSourceX = Math.floor(animationFrames[frameIndex] % tilesPerRow) * tileWidth;
        tankSourceY = Math.floor(animationFrames[frameIndex] / tilesPerRow) * tileHeight; 
    }
}

6- イベント ハンドラーを変更して as を設定しtankStateますmoving。

e = e?e:window.event;
tankState = "moving";
...

7- keyup イベントで tankState をリセットします。

document.onkeyup = function(e) {
    tankMoveX = 0;
    tankMoveY = 0;
    tankState = "stopped";
}

もちろん、主要なイベント ハンドラで animate 関数と draw 関数を呼び出して間隔をなくすこともできますが、この方法では、同じ関数で実行されるアニメーションを追加して、NPC の (プレーンでないキャラクターなど) プレイヤーの入力を待たずに実行できます。 ）。

于 2012-05-20T02:01:56.907 に答える
0

呼び出しでは、マップ自体であると推測する代わりに、タンクの画像context.drawImage(tileSheet, ...を渡す必要があります。tileSheet

于 2012-05-20T01:56:57.000 に答える