2

これまでのところ、私のプログラムは思い通りに動作しています。これはうまくいきます：

// Player object
var player = {
   x: 10,
   y: 10,
   draw: function () {
       ctx.drawImage(playerImg, 0, 0);
   ...

  1. playerImg今のところ正常に動作していますが、最初にロードされているかどうかを確認する必要がありますか?

  2. また、確認する最良の方法は何ですか。すべての画像を配列に入れることを考えていました。次にonLoad関数で確認します。それらがすべて読み込まれたら、ゲーム ループを開始します。これは良い考えですか？

ありがとう

4

1 に答える 1

7

画像の読み込みの仕組み

画像の読み込みは非同期であるため、画像が読み込まれているかどうかを確認する必要があります。コードがなくても機能することがあります。これは主に、画像がキャッシュに存在し、ブラウザーが が呼び出される前に画像を十分に高速にロードできるdrawImageか、または画像がローカル ディスクに存在するためです。

ただし、新しいユーザーは最初にデータをダウンロードする必要があり、初めてのユーザーには、読み込みが完了していないために画像が表示されないなどのエラーが発生することは望ましくありません。

非同期で動作するため、バックグラウンドで画像の読み込みが行われている間もコードは実行され続けます。これにより、イメージの読み込みが完了する前にコードが実行される可能性があります。そのため、画像の読み込みを処理することが重要です

複数画像の扱い

最初にすべての画像 (または開始する必要がある画像) をロードし、配列を使用してそれらを定義できます。

var imageURLs = [url1, url2, url3, ...],
    images = [],
    count = imageURLs.length;

次に、画像要素を繰り返し作成します。

for(var i = 0; i < count; i++) {

    /// create a new image element
    var img = new Image();

    /// element is valid so we can push that to stack
    images.push(img);

    /// set handler and url
    img.onload = onloadHandler;
    img.src = imageURLs[i];

    /// if image is cached IE (surprise!) may not trigger onload
    if (img.complete) onloadHandler().bind(img);
}

コールバック関数で在庫数を計算します。

function onloadHandler() {
    /// optionally: "this" contains current image just loaded
    count--;
    if (count === 0) callbackDone();
}

コールバックは、次に実行するコードです。画像はimages、 と同じ順序で配列に配置されimageURLsます。

本番onerror環境では、何か問題が発生した場合に備えてハンドラーも組み込む必要があります。

于 2013-09-24T06:58:34.580 に答える