6
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

JavaScriptでスロットゲームを作ってみた!

はじめに

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

スロットゲーム

他の方の記事を参考にしてスロットゲームを作り、自分なりに改良してみました。
できあがりはこんな感じです。
スクリーンショット 2019-06-28 18.57.11.png
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>

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
6
Help us understand the problem. What are the problem?