JavaScriptでサイコロを振る、シンプルなチュートリアル

本日はJavaScriptのトレーニング。色々手を出しすぎてよくわからなくなっているのはさておき、setIntervalとclearIntervalで遊んでいました。サイコロを動かして止める、という感じのシンプルなもの。

コードはこんな感じにできました。

<script>
var dice = [];
function getDice1() {
var dice1 = Math.floor(Math.random() * 6);
var number = dice1 + 1;
document.getElementById("condice1").innerHTML =
'<img src="./images/' + number + '.png" width="480">';
 }

function switchDice1(t) {
if (t.id == "start") {
dice.push(setInterval(getDice1, 10));
console.log(dice);
 }
if (t.id == "stop") {
console.log(dice);
clearInterval(dice.shift());
 }
 }
</script>

HTMLは

<p>

<input

id="start" type="button" value="スタート" onclick="switchDice1(this);" />

<input

id="stop" type="button" value="ストップ" onclick="switchDice1(this);" />

</p>

<p><span id="condice1"></span></p>