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にコピーしてから書きかえます。