ソースコードは以下のようになった。
まずは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="https://pg-happy.jp/wp-content/uploads/2022/05/dice1-1.png" style="display:none;"> <img id="dice1-2" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice1-2.png" style="display:none;"> <img id="dice1-3" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice1-3.png" style="display:none;"> <img id="dice1-4" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice1-4.png" style="display:none;"> <img id="dice2-1" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice2-1.png" style="display:none;"> <img id="dice2-2" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice2-2.png" style="display:none;"> <img id="dice2-3" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice2-3.png" style="display:none;"> <img id="dice2-4" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice2-4.png" style="display:none;"> <img id="dice3-1" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice3-1.png" style="display:none;"> <img id="dice3-2" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice3-2.png" style="display:none;"> <img id="dice3-3" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice3-3.png" style="display:none;"> <img id="dice3-4" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice3-4.png" style="display:none;"> <img id="dice4-1" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice4-1.png" style="display:none;"> <img id="dice4-2" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice4-2.png" style="display:none;"> <img id="dice4-3" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice4-3.png" style="display:none;"> <img id="dice4-4" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice4-4.png" style="display:none;"> <img id="dice5-1" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice5-1.png" style="display:none;"> <img id="dice5-2" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice5-2.png" style="display:none;"> <img id="dice5-3" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice5-3.png" style="display:none;"> <img id="dice5-4" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice5-4.png" style="display:none;"> <img id="dice6-1" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice6-1.png" style="display:none;"> <img id="dice6-2" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice6-2.png" style="display:none;"> <img id="dice6-3" src="https://pg-happy.jp/wp-content/uploads/2022/05/dice6-3.png" style="display:none;"> <img id="dice6-4" src="https://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を止める。
