0

HTML5 キャンバスを使用して、単純な Web ベースのゲームを作成しています。

現在、ページが読み込まれると、キャンバス上のランダムな場所に多数の画像が表示され、ユーザーはそれらを正しい場所にドラッグする必要があります。

これは問題ありませんが、ゲームのプレイを開始するために、これらの画像が表示される前にユーザーがクリックする必要がある開始ボタンをキャンバスに追加したいと考えています。

index.html ページに次の JS 関数があります。

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

    drawStartButton();
    loadImages(sources, drawImage);
    drawGameElements();
    drawDescriptionBoxes();

};

この関数の最後にある他の関数へのすべての関数呼び出しが呼び出され、目的の関数を実行していますが、drawStartButton();追加した関数は除きます。

この関数が呼び出されない理由がよくわかりません... のコードdrawStartButton();は別の JS ファイルにあり、次のようになります。

function drawStartButton(){
            image.onload = function(){
                context.drawImage(image, 410.5, 120);
            };
            image.src = startButton;

関数が保存されているファイルを参照する必要がありますか? 同じJSファイルにある他の関数呼び出しについては行っていませんdrawStartButton()...

この関数が呼び出されない理由と、それが確実に呼び出されるようにする方法を知っている人はいますか?

4

3 に答える 3

2

後ろにセミコロンを追加:

sources[33] = document.getElementById("tax").src

(ちょうど良い練習)

また、それらの要素を取得しようとする前に、これらすべての要素が存在する (そしてロードされている) ことを確認してsrcください (ただし、onload既に があるので、それで問題ありません)。

ここで、これらすべてを簡単にすることができgetElementByIdます。

var sources = [],
    sourceNames = [
    'building',  'chair',       'drink',       'food',         'fridge',  'land',      'money',    'oven', 'table', 'van',
    'burger',    'chips',       'drink',       'franchiseFee', 'wages',                
    'admin',     'cleaners',    'electricity', 'insurance',    'manager', 'rates',     'training', 'water',
    'burger',    'chips',       'drink',                       
    'creditors', 'electricity', 'food',        'hirePurchase', 'loan',    'overdraft', 'payeTax',  'tax'
];

for(var i = 0, l = sourceNames.length; i < l; i++){
    sources[i] = document.getElementById(sourceNames[i]).src;
}

getElementByIdのいずれかが を返すため、コードが壊れている可能性が最も高いnullです。
（また、そこに重複がありますが、それは意図的なものですか？）

代わりにこのループを使用して、これをテストできます。

for(var i = 0, l = sourceNames.length; i < l; i++){
    console.log('Getting ' + sourceNames[i]);
    sources[i] = document.getElementById(sourceNames[i]).src;
}

最後に取得された要素が表示されます。

また、関数を含むファイルがdrawStartButton()最初にロードされていることを確認する必要があります。そうしないと、この関数は存在しません。

そして最後に：

image.src = startButton;と置き換えますimage.src = startButton.src;

于 2013-02-15T10:07:35.167 に答える
0

このファイルの前に、他の JavaScript ファイルを html ファイルに含めていることを確認する必要があります。そうすれば、すべて正常に動作するはずです。また、関数本体を a で閉じていることを確認してください}。これはコピー ペースト エラーのような気がします。

また、他の人が説明したように、必要です。JavaScript で各ステートメントを終了します。

于 2013-02-15T10:08:33.107 に答える
0

アプリケーション固有の ID 名の長いリストを JavaScript コードに含める代わりに、共通のクラスでこれらの html 要素を取得することを検討する必要があります。

<img class="preload_image" src"...">

そしてあなたのjavascriptで次のようなもの

var preload_images = document.getElementsByClassName('preload_image');
var sources = [];
for(var i = 0;i < preload_images.length;i++){
sources.push(preload_images[i].src);
}

これにより、コードがきれいに保たれ、タグを追加する代わりにタグにクラスを追加するだけで、何かがプリロードされるようにすることができます。その後、js ファイルに移動して、タグの ID をソース リストに追加する必要があります。また、変更を加えることなく他のプロジェクトで簡単に使用できるため、コードはより柔軟なままです。

于 2013-02-15T10:25:10.827 に答える