はじめに

JavaScriptでスロットゲームを作ってみたので紹介したいと思います。

スロットゲーム

他の方の記事を参考にしてスロットゲームを作り、自分なりに改良してみました。
できあがりはこんな感じです。

3つのスロット(数字)が動いていて、STOPボタンを押すと止まります。
3つの数字を揃えることができたらみごとクリアです。
クリアしたら100点を獲得し次のレベルに進む仕組みになっています。
レベルが上がるとスロットの回転スピードが上がっていき難易度が上がります。
数字を揃えることができなかったらそこでゲームオーバーです。
RESETボタンを押すとやり直せます。

コード

コードはこんな感じです。
コピペで使えるようにJavaScriptもCSSもHTML内に入れておきました。
その分見にくくなってしまいましたが。。。
よかったら好きなように改造してみてください。
bodyタグ以外は省略します。

<body>
  <div class="game">
    <p>得点:<span id="score">0</span>&emsp;レベル:<span id="level">1</span></p>

    <div class="slot">
        <div id="slot0">2</div>
        <input type="button" value="STOP" id="stop0">
    </div>

    <div class="slot">
        <div id="slot1">5</div>
        <input type="button" value="STOP" id="stop1">
    </div>

    <div class="slot">
        <div id="slot2">8</div>
        <input type="button" value="STOP" id="stop2">
    </div>
    <input type="button" value="RESET" id="reset">
  </div>

  <script type="text/javascript">
  // スロットゲームの処理
  // 即時関数で囲っておく（スコープを限定）
    (function(){
      var score = 0; // 得点
      var level = 1; // レベル
      var interval = 400; // スロットのスピード
      var timers = []; // スロット
      var results = []; // スロットを止めた時の数字
      var stopCount = [0,0,0]; // スロットを止めたか判別に使用

      // 左のSTOPをクリックした時スロットを止める
      document.getElementById('stop0').onclick = function() {
        stopSlot(0);
      }

      // 中央のSTOPをクリックした時スロットを止める
      document.getElementById('stop1').onclick = function() {
        stopSlot(1);
      }

      // 右のSTOPをクリックした時スロットを止める
      document.getElementById('stop2').onclick = function() {
        stopSlot(2);
      }

      // スロットをスタートさせる
      startSlot();

      function startSlot() {

        // 初期化（空の状態に戻す）
        stopCount = [0,0,0]; // スロットを止めたか判別に使用
        timers = []; // スロット
        results = []; // スロットを止めた時の数字

        // スロットの最初の数字を設定
        document.getElementById('slot0').textContent = 2;
        document.getElementById('slot1').textContent = 5;
        document.getElementById('slot2').textContent = 8;

        // スロットを回す
        runSlot(0);
        runSlot(1);
        runSlot(2);
      }

      // スロットを回す処理の中身
      function runSlot(num) {

        // 全てのスロットの現在表示されているテキストを取得
        var slotValue = document.getElementById('slot' + num);

        // 9より上の数字になったら0へ戻る
        if(slotValue.textContent < 9) {
          slotValue.textContent ++;
        } else {
          slotValue.textContent = 0;
        }

        // スロットの数字をカウントさせる
        timers[num] = setTimeout(function() {

          // スロットの数字をカウントさせる処理
          runSlot(num);
        }, interval);
      }

      // スロットを止める処理の中身
      function stopSlot(num) {

        // スロットを止める
        clearTimeout(timers[num]);

        // スロットを止めた際の数字を取得
        results[num] = document.getElementById('slot' + num).textContent;

        // スロットを止めたことを記録
        stopCount[num] = 1;

        // 全てのスロットを止めた場合に結果を表示する
        if (stopCount[0]*stopCount[1]*stopCount[2] == 1) {
          checkResult();
        }
      }

      // 全てのスロットを止めた結果
      function checkResult() {

        // 3つの数字が同じであれば次へ、そうでなければGAMEOVER
        if (results[0] == results[1] && results[0] == results[2]) {
          alert('すごい！100点獲得！次のレベルに挑戦してね！');

          score += 100; // 得点を足す
          level += 1;
          interval *= 0.8; // スロットのスピードを早める
          // 得点追加の処理
          getScore();
          // 次のゲームに進む
          startSlot();
        } else {
          gameover();
        }
      }

      // 得点追加時の処理
      function getScore() {
        document.getElementById('score').textContent = score;
        document.getElementById('level').textContent = level;
      }

      // 揃えられなかった時
      function gameover() {
        alert('ゲームオーバー... またチャレンジしてね！');
      }

      document.getElementById('reset').onclick = function() {
        // スロットを全て止める
        clearTimeout(timers[0]);
        clearTimeout(timers[1]);
        clearTimeout(timers[2]);

        // 初期化
        document.getElementById('score').textContent = 0;
        document.getElementById('level').textContent = 1;
        score = 0;
        level = 1;
        interval = 400;
        timers = [];
        results = [];
        stopCount = [0,0,0];

        // スロットスタート
        startSlot();
      }

    })();

  </script>

  <style media="screen">
  .slot {
        float: left;
        width: calc(100% / 3);
        font-size: 40px;
  }

  .game {
    background-color: #BFE9DB;
    margin: 0 auto;
    width: 400px;
    height: 200px;
    text-align: center;
  }
  </style>
</body>