JavaScript»基礎»関数 ランダムな目のサイコロを表示し、その目の数を返す関数

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

下のソースコードに必要なプログラムを書き加えて、ランダムな目のサイコロを4つと、目の数の合計を表示ひょうじするプログラムを完成させてください。画像がぞうは下のリンクからダウンロードできます。

画像をダウンロード

ソースコード

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

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

  // ここに、ランダムな目のサイコロを表示し、目の数を返す関数 castDice を書いてね
  // castDice(0, 120) なら、x座標が0、y座標が120のところに、サイコロを表示します

  let total = 0;
  total += castDice(0, 0);
  total += castDice(110, 10);
  total += castDice(10, 110);
  total += castDice(120, 120);

  context.font = "20px monospace";
  context.fillText("TOTAL: " + total, 10, 310);
};

ヒント

サイコロを表示ひょうじするとき、目の数に関係しているのはどこかな？