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は配列のキーを配列にして返します。