JavaScript»オブジェクト指向»メソッド カードの勝敗を判定するメソッド

ファイル名: js-oop/quest_00671.html

下のソースコードに必要なプログラムを書き加えて、カードの数の大きさをきそうゲームを完成させてください。

カードをくばる

ソースコード

class Card {

  constructor(num, mark) {
    this.num = num;
    this.mark = mark;
  }

  // Cardオブジェクトを引数として受け取り、
  // 自分自身が引数のカードよりも強いときにtrue、
  // そうでないときにfalseを返すメソッド winAgainst を、
  // ここに書いてね
  // カードは、数の大きい方が強く、数が同じ場合は、
  // マークが♠♣♥♦の順に強いものとします

}

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

const image = new Image();
image.src = "cards.png";
image.addEventListener("load", () => {

  // 52枚のトランプオブジェクト作成し、配列cardsに入れる
  const cards = [];
  
  for (let num = 0; num < 13; num++) {
    for (let mark = 0; mark < 4; mark++) {
      cards.push(new Card(num, mark));
    }
  }

  // 配列のなかみをシャッフルする
  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;
  }

  // 親のカード表示
  const dealer = cards.pop();
  context.drawImage(image, dealer.num * 32, dealer.mark * 64, 32, 64, 144,  32, 32, 64);

  // プレイヤーのカード表示
  const player = cards.pop();
  context.drawImage(image, player.num * 32, player.mark * 64, 32, 64, 144, 224, 32, 64);

  // カードをくばった1秒後に勝負を表示する
  // この中で、winAgainstメソッドを使っている
  setTimeout(() => {
    let msg = null;
    if (player.winAgainst(dealer)) {
      msg = "You Win!";
    } else {
      msg = "You Lose!";
    }
    context.font = "32px sans-serif";
    context.fillText(msg, 96, 176);
  }, 1000);

});

ヒント

自分自身のプロパティの値は「this.プロパティ名」で呼び出せるよ。
勝敗を決めるには、まず数を比べて、勝負がつかなければマークを比べるから、コードにすると……。