0

HTML5ゲームを開始する前に、すべてのソースを「基本的に」インポートしようとしていますが、その方法がわかりません。このコードを試しましたが、機能しません:

var canvas = document.getElementById('stage');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.background = 'url(img/tapis.jpg)';
var ctx = canvas.getContext('2d');

var carta = ["img/a1.png","img/a2.png","img/a3.png","img/a4.png","img/a5.png","img/a6.png","img/a7.png",
             "img/a8.png","img/a9.png","img/a10.png",
             "img/b1.png","img/b2.png","img/b3.png","img/b4.png","img/b5.png","img/b6.png","img/b7.png",
             "img/b8.png","img/b9.png","img/b10.png",
             "img/c1.png","img/c2.png","img/c3.png","img/c4.png","img/c5.png","img/c6.png","img/c7.png",
             "img/c8.png","img/c9.png","img/c10.png",
             "img/d1.png","img/d2.png","img/d3.png","img/d4.png","img/d5.png","img/d6.png","img/d7.png",
             "img/d8.png","img/d9.png","img/d10.png"];

var n = carta.length;
carta.forEach(function(srcu) {
var img = new Image();
img.src = srcu;
img.onload = function () {
    --n || oplach();
}
});

これはoplach関数です:

function oplach(){
    var image = new Image();
    for(var i=0; i<carta.length; i++)
    {
        image.src= carta[i];
        ctx.drawImage(image,(i*40),50);
    }
}

しかし、それは機能しません!何か案が?

4

2 に答える 2

0

生成されたimgタグをこのようにDOMに追加します。

carta.forEach(function(srcu) {
  var img = new Image();
  img.src = srcu;
  img.onload = function () { --n || oplach(); }

  // ADD THE FOLLOWING LINE TO YOUR CODE
  document.documentElement.appendChild(img);
});
于 2012-07-09T15:05:57.680 に答える
0

非表示のdivを作成し、このdiv内にすべての画像を追加します。ゲーム内でそれらを使用する必要がある場合、それらは完全にロードされ、キャッシュされます。

foreachループでこのようなもの。

var img = document.createElement("img");
img.src = yoursrc;
document.getElementById("hiddenelement").appendChild(img);

参考文献

http://www.mediacollege.com/internet/javascript/image/preload.html

jQueryを使用した画像のプリロード

于 2012-07-09T15:07:43.620 に答える