ドットインストール学習日記：JavaScriptで作るスロットマシーン

dotinstall HTML/CSS JavaScript

今日のドットインストール学習記録。

ドットインストールにいろいろと新機能が追加された。
ドットインストールにブックマークや学習メモなどの機能を追加！ #dotinstall | IDEA*IDEA

個人的にはマイページが充実したのがうれしい！

ボクは4期生らしい。

メルマガに載っていた、"学習状況"のグラフ版がついて、毎日確認できるのがうれしい。
ここ数日、月末繁忙であんまり進められてないorz
良くも悪くも、やってるかどうか一目瞭然ｗ

今日は時間つくって、追加されたばかりのレッスンをやってみる。

JavaScriptで作るスロットマシーン

JavaScriptでスロットマシーンを作る、全3回のレッスン。

0~9の数字をランダムで表示し、stop! でひとつずつ止める。
3つ全部止めたらいくつ揃ったか表示する。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<title>JavaScriptでスロット</title>
</head>
<body>
<h1>スロットマシーン</h1>
<span id="spin_0">0</span> <input type="button" value="stop!" onclick="stop()" />
<span id="spin_1">0</span> <input type="button" value="stop!" onclick="stop()" />
<span id="spin_2">0</span> <input type="button" value="stop!" onclick="stop()" />
<script type="text/javascript">
var i = 0;
var r = [];
var timerId;
function spin() {
	document.getElementById('spin_'+i).innerHTML = Math.floor(Math.random() * 10);
	timerId = setTimeout(spin, 100);
}
spin();
function stop() {
	r[i] = document.getElementById('spin_'+i).innerHTML;
	i++;
	if (i > 2) {
		clearTimeout(timerId);
		r.sort();
		if (r[0] == r[1] && r[0] ==r[2]) {
			alert('3つ揃った！');
		} else if (r[0] ==r[1] || r[1] ==r[2]) {
			alert('2つ揃った！');
		} else {
			alert('残念！')
		}
	}
}
</script>
</body>
</html>

完成したものはこんな感じ

Math.floor(Math.random() * 10)

これで0~9の整数をランダムで得る。ほかにも使い勝手がよさそう。