JavaScriptで超簡素スロットゲーム #JavaScript

動画学習サイトを使用してですが、人生で初めてプログラムっぽいプログラムを書きました。
備忘録がてら記載。

◾️使用学習サイト
JavaScript実践〜スロットアプリの制作〜 - schoo

かなり丁寧に解説されているので、分かりやすかったです。
各セクションの最後にある質疑応答も役に立ちました。
とりあえず初月無料のプレミアム会員になりました。

ゲーム・処理の内容

2つのスロットの数字が揃ったら特典獲得。

2つのスロットの数字を９まで加算し、その後０に戻す。
STOPボタンを押したら対応したスロットの数字を止める。
2つのスロットの数字が揃った場合、得点獲得。
次のゲームでは、数字の変わるスピードを早める。

index.html


<head>
  <style>
    .slot {
      float: left;
      width: 150px;
      text-align: center;
      font-size: 40px;
    }
  </style>
</head>

<body>
  <h1>スロットチャレンジ！</h1>
  <p>得点:<span id="score">0</span></p>
  <div class="slot">
      <div id="slot0">0</div>
      <input type="button" value="STOP" id="stop0">
  </div>
  <div class="slot">
      <div id="slot1">0</div>
      <input type="button" value="STOP" id="stop1">
  </div>
</body>

index.js

  // 即時関数で囲っておく（スコープを限定）
  (function(){
    var score = 0;
    var interval = 400;
    var timers = []; // スロット
    var results = []; // スロットを止めた時の数字
    var stopCount = 0; // スロットを何個止めたか判別に必要

    // イベントの登録（今回はクリックした時）
    // 左のスロットをクリックした時、タイマーを止める
    document.getElementById('stop0').onclick = function() {
      stopSlot(0); // 左のスロット
    }

    // 右のスロットをクリックした時、タイマーを止める
    document.getElementById('stop1').onclick = function() {
      stopSlot(1);
    }

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

    // 左右のスロットをスタートさせる処理の中身
    function startSlot() {

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

      // スロット開始
      runSlot(0);
      runSlot(1);
    }

    // スロットを回す処理の中身
    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++;

      // 2個めのスロットを止めた場合に結果を表示する
      if (stopCount == 2) {
        checkResult();
      }
    }

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

      // 2つの数字が同じであれば次へ、そうでなければGAMEOVER
      if (results[0] == results[1]) {
        alert('おめでとう！');

        score += 200; // 得点を足す
        interval *= 0.8;
        // 得点追加の処理
        getScore();
        // 次のゲームに進む
        startSlot();
      } else {
        gameover();
      }
    }

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

    // 揃えられなかった時
    function gameover() {
      alert('ゲームオーバー…。');
    }

  })();

やっぱり「書いてみる」が１番の学習方法ですね。