JavaScript»基礎»オブジェクト シャッフルされたトランプを5枚ダブらないようにならべる
ファイル名: js-basic/quest_00633.html
下のソースコードをうつして、5枚のトランプをキャンバスに
ソースコード
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const image = new Image();
image.src = "cards.png";
image.onload = function() {
// 52枚のトランプオブジェクトを作成して配列に入れる
const cards = [];
for (let num = 0; num < 13; num++) {
for (let mark = 0; mark < 4; mark++) {
const card = {
num: num, // 左のnumはプロパティ名、右のnumは変数名
mark: mark // 同上
};
cards.push(card);
}
}
// 配列のなかみをシャッフルする
for (let i = cards.length - 1; i > 0; i--) {
const r = Math.floor(Math.random() * (i + 1));
const tmp = cards[i];
cards[i] = cards[r];
cards[r] = tmp;
}
for (let i = 0; i < 5; i++) {
const card = cards.pop();
context.drawImage(image, card.num * 32, card.mark * 64, 32, 64, i * 48 + 48, 128, 32, 64);
}
};
解説
トランプは13の数字と4つのマークの組み合わせで表現できます。今回はnumプロパティが数字、markプロパティがマークをあらわしてトランプオブジェクトを作っているのがわかりますね。
配列のシャッフルは、先頭の要素から順にランダムな位置の要素とオブジェクトを入れ替えています。直接2つの要素を入れ替えることはできないので、一度変数tmpにコピーしてから書きかえます。