0

サイトの index.html ページに次のコードがあり、ページが読み込まれると、HTML5 キャンバスに多数の画像が描画されます。

window.onload = function(){



    var sources = {};
        sources[0] = document.getElementById("building").src,
        sources[1] = document.getElementById("chair").src,
        sources[2] = document.getElementById("drink").src,
        sources[3] = document.getElementById("food").src,
        sources[4] = document.getElementById("fridge").src,
        sources[5] = document.getElementById("land").src,
        sources[6] = document.getElementById("money").src,
        sources[7] = document.getElementById("oven").src,
        sources[8] = document.getElementById("table").src,
        sources[9] = document.getElementById("van").src,

        sources[10] = document.getElementById("burger").src,
        sources[11] = document.getElementById("chips").src,
        sources[12] = document.getElementById("drink").src,
        sources[13] = document.getElementById("franchiseFee").src,
        sources[14] = document.getElementById("wages").src,

        sources[15] = document.getElementById("admin").src,
        sources[16] = document.getElementById("cleaners").src,
        sources[17] = document.getElementById("electricity").src,
        sources[18] = document.getElementById("insurance").src,
        sources[19] = document.getElementById("manager").src,
        sources[20] = document.getElementById("rates").src,
        sources[21] = document.getElementById("training").src,
        sources[22] = document.getElementById("water").src,

        sources[23] = document.getElementById("burger").src,
        sources[24] = document.getElementById("chips").src,
        sources[25] = document.getElementById("drink").src,

        sources[26] = document.getElementById("creditors").src,
        sources[27] = document.getElementById("electricity").src,
        sources[28] = document.getElementById("food").src,
        sources[29] = document.getElementById("hirePurchase").src,
        sources[30] = document.getElementById("loan").src,
        sources[31] = document.getElementById("overdraft").src,
        sources[32] = document.getElementById("payeTax").src,
        sources[33] = document.getElementById("tax").src

    loadImages(sources, drawImage);
};

Sources は、JavaScript で画像を保持するために使用している配列です。これにより、HTML の非表示セクションから読み込まれた画像をキャンバスに描画できます。

この関数は現在、意図したとおりに機能します。loadImages 関数への呼び出しがあり、HTML の非表示セクションから JavaScript 配列に画像をロードし、drawImage配列内の各画像に対して関数を呼び出します。しかし、window.onload で呼び出したい別の関数もあります。

window.onload に追加したい関数は次のとおりです。

function drawGameElements(){
    /* Draw a line for the 'score bar'. */
    context.moveTo(0, 25);
    context.lineTo(1000, 25);
    context.stroke();

    /* Draw current level/ total levels on the left, and current score on the right. */
    context.font = "11pt Calibri"; /* Text font & size */
    context.strokeStyle = "black"; /* Font colour */
    context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
    context.strokeText(currentScore, 950, 15);
}

loadImages(sources, drawImage);の行のすぐ下に関数への呼び出しを追加してみましたwindow.onload = function(){};

だから私は今持っている：

window.onload = function(){
...
loadImages(sources, drawImage);
drawGameElements();
};

これは部分的に機能しますが、「スコアバー」のキャンバスの上部に線を引き、キャンバスの左側の線のすぐ上のレベルに「1/3」と書きますが、何らかの理由で右側に現在のスコアを描画しません。

また、キャンバスに描画された画像の 1 つをクリックしてキャンバス上にドラッグ アンド ドロップするとすぐに、「スコア バー」がキャンバスから完​​全に消えます。

これがなぜなのか誰か知っていますか？キャンバスで他に何が起こっても、ゲーム中にスコア バーを表示したままにするにはどうすればよいですか? また、 currentScore 変数を表示するにはどうすればよいですか?

4

2 に答える 2

0

代わりに、loadImages 内でコールバックを使用して drawGameElements を呼び出します。そうすれば、drawGameElements は loadImages が終了した後にのみ実行されます。2 つの関数で競合状態を作成したようです。

于 2012-12-12T15:23:03.313 に答える
0

私なら、キャンバスの外側にスコア バーを作成します。その位置を絶対に設定し、目的の場所でキャンバスの上に置きます。そうすれば、HTML 要素としてアクセスするだけで済み、再描画について心配する必要はありません。

これらの表示に HTML 要素を使用する主な利点は、キャンバス上で画像を移動した後などに再描画する必要がないことです。値を更新する方法についても心配する必要はありません (キャンバスでは、古い値の上に新しい値をペイントするだけでは十分ではありません)。このように、値を HTML 要素に格納するだけで、キャンバス上で自由に動き回ることができ、スコアが常にトップに留まることがわかります。

于 2012-12-12T15:26:07.313 に答える