JavaScript»ゲーム制作»リソースの読込 2つ以上の画像をロードする

ファイル名: js-game/quest_00374.html

下のソースコードをうつして、草原そうげんとキャラクターの画像がぞうを読み込み、いっしょに表示ひょうじしてください。

画像がぞうは下のリンクからダウンロードできます。

画像をダウンロード

画像をダウンロード

ソースコード

const loadImages = function(images, callback) {
  let count = 0;
  const loadedImages = {};
  const keys = Object.keys(images);
  keys.forEach(function(key) {
    loadedImages[key] = new Image();
    loadedImages[key].onload = function() {
      if(++count >= keys.length) {
        callback(loadedImages);
      }
    };
    loadedImages[key].src = images[key];
  });
}

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

const images = {
  mapchip: "array-map.png",
  character: "pipo-charachip022.png"
};

loadImages(images, function(images) {
  for (var y = 0; y < 10; y++) {
    for (var x = 0; x < 10; x++) {
      context.drawImage(images.mapchip, 40, 0, 40, 40, x * 32, y * 32, 32, 32);
    }
  }
  context.drawImage(images.character, 0, 0, 32, 32, 96, 96, 32, 32);
});

解説

images配列は、名前(キー)とファイル名をセットで持っています。
Object.keysは配列のキーを配列にして返します。