JavaScriptでサイコロ転がし – Canvasに画像（DrawImage）をランダム表示

スタート　ストップ

ソースコードは以下のようになった。

まずはHTML側。

スタートとストップボタンを表示。それぞれのボタンにonclickプロパティでstartTimer、stopTimer関数をセット。
canvasを囲うようにdivのwrapperをつけてcanvasのサイズを調整。dice1-1～dice6-4までの画像はdisplay:noneにしておく。

<button onclick="startTimer()">スタート</button>　<button onclick="stopTimer()">ストップ</button>
<div id="wrapper">
<canvas id="aaa"></canvas>
<img id="dice1-1" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice1-1.png" style="display:none;">
<img id="dice1-2" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice1-2.png" style="display:none;">
<img id="dice1-3" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice1-3.png" style="display:none;">
<img id="dice1-4" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice1-4.png" style="display:none;">
<img id="dice2-1" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice2-1.png" style="display:none;">
<img id="dice2-2" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice2-2.png" style="display:none;">
<img id="dice2-3" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice2-3.png" style="display:none;">
<img id="dice2-4" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice2-4.png" style="display:none;">
<img id="dice3-1" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice3-1.png" style="display:none;">
<img id="dice3-2" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice3-2.png" style="display:none;">
<img id="dice3-3" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice3-3.png" style="display:none;">
<img id="dice3-4" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice3-4.png" style="display:none;">
<img id="dice4-1" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice4-1.png" style="display:none;">
<img id="dice4-2" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice4-2.png" style="display:none;">
<img id="dice4-3" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice4-3.png" style="display:none;">
<img id="dice4-4" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice4-4.png" style="display:none;">
<img id="dice5-1" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice5-1.png" style="display:none;">
<img id="dice5-2" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice5-2.png" style="display:none;">
<img id="dice5-3" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice5-3.png" style="display:none;">
<img id="dice5-4" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice5-4.png" style="display:none;">
<img id="dice6-1" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice6-1.png" style="display:none;">
<img id="dice6-2" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice6-2.png" style="display:none;">
<img id="dice6-3" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice6-3.png" style="display:none;">
<img id="dice6-4" src="http://pg-happy.jp/wp-content/uploads/2022/05/dice6-4.png" style="display:none;">
</div>

JavaScriptは以下のように指示。

  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    canvas {
      display:block;
      background-color:#3399CC;
    }
    #wrapper{
    	width: 100%;
    	height: 500px;
    }
  </style>
  <script>

    var timerId = NaN;
    var dice = [];
    var wpr, cvs, ctx;

    window.onload = function() {
      wpr = document.getElementById("wrapper");
      cvs = document.getElementById("aaa");

      cvs.width = wpr.offsetWidth;
      cvs.height = wpr.offsetHeight;


      for (var i=1; i<=4; i++) {
        for (var j=1; j<=4; j++) {
          dice.push(document.getElementById("dice" + i + "-" + j));
        }
      }

      ctx = cvs.getContext("2d");
      ctx.drawImage(dice[0], 50,50);

    }


    function startTimer() {
      clearInterval(timerId);
      timerId = setInterval(korogasi, 100);
    }
    function stopTimer() {
      clearInterval(timerId);
    }

    function korogasi() {
      var rnd = Math.floor( Math. random() * dice.length);
      ctx.drawImage(dice[rnd], 50,50);
    }

  </script>

window.onload = function()でこのページがロードされたときの処理を行う。

29行目からdiceの配列に画像dice1-1～dice6-4までをセットしていく。

スタートボタンが押されたらstartTimer関数を動かしその中でsetInterval関数を用いて100ミリ秒ごとにランダムで画像を表示（korogasi関数）。

ストップボタンが押されたらstopTimer関数を呼び出しTimerを止める。