スロットゲームを作る。 - javascriptを始める。

仕様
・１〜９までの数字をランダムに表示させ続ける。
・ストップボタンを押すことで、数字を止める。
・３カ所、ランダム表示させる。
・そろった個数のアラートを表示させる。

手順
1.画面を作る。
2.一定の時間ごとにランダムに数値を表示させる処理を書く。
3.ストップボタンを押したときの処理を書く。
4.３つ目のスロットが止められたときに、メッセージを表示させる処理を書く。

説明＆ソース

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>スロットゲーム</title>
  </head>
  <body>
    <h1>スロットゲーム</h1>
    <span id="slot_0">0</span> <input type="button"  value="ストップ" onclick="stop();">
    <span id="slot_1">0</span> <input type="button"  value="ストップ" onclick="stop();">
    <span id="slot_2">0</span> <input type="button"  value="ストップ" onclick="stop();">
    <script type="text/javascript">
//使う変数を宣言しておく。
      var i = 0;
      var r = [];
      var timerId;
//ランダムに数値を表示させる処理。      
      function slot() {
        document.getElementById('slot_'+i).innerHTML = Math.floor(Math.random()*10);
        timerId = setTimeout(slot, 100);
      }
//実行する処理。
      slot();
//ストップボタンを押したときの処理。
      function stop() {
//i=0,1,2のときに選ばれたランダムな数値を配列に格納する。
        r[i] = document.getElementById('slot_'+i).innerHTML;
        i++;
//i>2となったとき処理を止める。
        if (i>2) {
          clearTimeout(timerId);
//配列をソートする。
          r.sort();
          if (r[0] == r[1] && r[0] == r[2]) {
            alert('みっつそろった');
          } else if (r[0] == r[1] || r[1] == r[2]) {
            alert('ふたつそろった');
          } else {
            alert('ざんねん');
          }
        }
      }
    </script>
  </body>
</html>