JavaScript»基礎»関数 裏返しのトランプカードを表示する関数

ファイル名: js-basic/quest_00189.html

下のソースコードに必要なプログラムを書き加えて、裏返しのトランプカード5枚を表示ひょうじするプログラムを完成させてください。画像がぞうは下のリンクからダウンロードできます。

画像をダウンロード

ソースコード

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

const cards = new Image();
cards.src = "cards.png";
cards.onload = function() {

  // ここに、裏返しのトランプカードを表示する関数 drawDownCard を書いてね
  // drawDownCard(0, 120) なら、x座標が0、y座標が120のところにカードを表示します

  for (let i = 0; i < 5; i++) {
    const x = (i + 1) * 48;
    drawDownCard(x, 128);
  }
};

ヒント

トランプの表示のやり方をわすれたときは、「ランダムにトランプカードを1枚表示する」を思い出そう。