TransWikia.com

Javascriptでのスロットマシン

スタック・オーバーフロー Asked by user10383 on January 5, 2021

質問させていただきます。
Javascriptでスロットマシンを作っているのですが、
最後の「あたり」「はずれ」の判定をどうやっていいのか分かりません。
どなたか教えて下さい。

javascript

//左リールの制御
function a1() {

    //aにHTMLから取得した数字を代入
    var a=document.getElementById("su1").innerHTML;

    //文字列のiを数字に変換し1を足してxに代入
    var x=parseInt(a)+1;

    //取得した値が9を超えたら1に戻す
    if(x>9) {
        x=1;
    }
    //xに書き換えてして表示する
    document.getElementById("su1").innerHTML=x;

    //一定期間繰り返す
    TimeoutID1=setTimeout("a1()",100);
}

//スタートボタンを押すと6を表示する
function rstart() {
    a2();
    a1();
    a3();
}

//真ん中のリールの制御
function a2() {

    //iにHTMLから取得した数字を代入
    var i=document.getElementById("su2").innerHTML;

    //文字列のiを数字に変換し1を足してjに代入
    var j=parseInt(i)+1;

    //取得した値が9を超えたら1に戻す
    if(j>9) {
       j=1;
    }

    //Jに書き換えてして表示する
    document.getElementById("su2").innerHTML=j;

    //一定期間繰り返す
    TimeoutID2=setTimeout("a2()",100);
}
//ストップボタンで止める
function stop(btn) {
    if(btn == 0) {clearTimeout(TimeoutID1);}
    if(btn == 1) {clearTimeout(TimeoutID2);}
    if(btn == 2) {clearTimeout(TimeoutID3);}
}

//右のリールの制御
function a3() {
    var c=document.getElementById("su3").innerHTML;

    //文字列のiを数字に変換し1を足してjに代入

    var z=parseInt(c)+1;
    if(z>9) {
       z=1;
    }

    //zに書き換えてして表示する
    document.getElementById("su3").innerHTML=z;

    //一定期間繰り返す
    TimeoutID3=setTimeout("a3()",100);

}

HTML

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript" src="sample1.js"></script>
  </head>
  <body>
   <form name="game">
    <style type="text/css">
    <!--
    .surot{text-align:center;font-size:38;font-weight:bold;color:#ff0000;width:90;height:65;background-color:#0000ff;}
    .surot2{font-size:14pt;font-weight:bold;color:#0000ff;text-align:center;width:96;}
-->
    -->
    </style>
    <p style="text-align:center;font-size:24pt;font-weight:bold;">スロットマシン</p>
    <table border="0" style="margin-left:150;margin-bottom:0;">
      <tr>
        <td id="skekka" style="font-size:34;font-weight:bold;color:#ff0000;width:200;height:40;text-align:center;"></td>
      </tr>
    </table>
    <table style="background-color:#00ff00;border:solid #00ff00 5;margin-left:100;margin-bottom:0;">
      <tr>
        <td id="su1" class="surot">0<td>
        <td id="su2" class="surot">0<td>
        <td id="su3" class="surot">0<td>
      </tr>
    </table>
    <table style="margin-left:100;">
      <tr>
        <td><input type="button" value="ストップ" onClick="stop(0)" class="surot2"></td>
        <td><input type="button" value="ストップ" onClick="stop(1)" class="surot2"></td>
        <td><input type="button" value="ストップ" onClick="stop(2)" class="surot2"></td>
      </tr>
    </table>
    <div style="position:absolute;top:125;left:450;" >
      <input type="button" value="スタート" onClick="rstart()" style="font-size:16pt;font-weight:bold;color:#0000ff;">
    </div>
   </form>
  </body>
</html>

One Answer

機能を追加しにくいと感じたら、そのコードは複雑になり過ぎています。
一度コード全体を整理したほうがいいでしょう。リファクタリングと言います。具体的には、

  1. よく似た処理を行っているa2a1a3をひとつの関数に纏めます。
  2. a1という関数名は意味がわかりづらいので、意味のわかりやすいものに変えます。
  3. ゲーム全体の状態を表わすようなオブジェクトを追加します。

例としては以下のようになります。

// 各リールの状態
var reelStates = [{
    elementID: "su1",
    timerID: null
}, {
    elementID: "su2",
    timerID: null
}, {
    elementID: "su3",
    timerID: null
}];

//リールの開始
function startReel(state) {
    if (state.timerID === null) {
        //一定期間繰り返す
        state.timerID = setInterval(function () {
            //aにHTMLから取得した数字を代入
            var a = document.getElementById(state.elementID).innerHTML;

            //文字列のiを数字に変換し1を足してxに代入
            var x = parseInt(a) + 1;

            //取得した値が9を超えたら1に戻す
            if (x > 9) {
                x = 1;
            }
            //xに書き換えてして表示する
            document.getElementById(state.elementID).innerHTML = x;
        }, 100);
    }
}

//スタートボタンを押すと6を表示する
function rstart() {
    // すべてのリールの回転を開始
    for (var i = 0; i < reelStates.length; i++) {
        startReel(reelStates[i]);
    }

    // スコア表示を消す
    document.getElementById("score").textContent = "";
}

//ストップボタンで止める
function stop(btn) {
    // 既に止まっているリールに対して処理を行わないようにチェックする
    if (reelStates[btn].timerID !== null) {

        // タイマーを止める
        clearInterval(reelStates[btn].timerID);

        // nullを代入してリールが回っていない状態を示す
        reelStates[btn].timerID = null;

        // それぞれのリールが回っているかどうかを調べる
        var isAllReelStopped = reelStates.every(function (state) {
            return state.timerID === null;
        });

        // すべてのリールが停止していたらスコアの計算
        if (isAllReelStopped) {

            // それぞれのリールの数字を取得する
            var reelNumbers = reelStates.map(function (state) {
                return document.getElementById(state.elementID).innerHTML;
            });

            // スコアを計算
            // ここでは7ひとつごとに1点で計算している
            var score = reelNumbers.reduce(function (score, number) {
                return score + (number === "7" ? 1 : 0);
            }, 0);

            // スコアを表示
            document.getElementById("score").textContent = "Score: " + score;
        }
    }
}

// 各リールの状態
var reelStates = [{
  elementID: "su1",
  timerID: null
}, {
  elementID: "su2",
  timerID: null
}, {
  elementID: "su3",
  timerID: null
}];

//リールの開始
function startReel(state) {
  if (state.timerID === null) {
    //一定期間繰り返す
    state.timerID = setInterval(function() {
      //aにHTMLから取得した数字を代入
      var a = document.getElementById(state.elementID).innerHTML;

      //文字列のiを数字に変換し1を足してxに代入
      var x = parseInt(a) + 1;

      //取得した値が9を超えたら1に戻す
      if (x > 9) {
        x = 1;
      }
      //xに書き換えてして表示する
      document.getElementById(state.elementID).innerHTML = x;
    }, 100);
  }
}

//スタートボタンを押すと6を表示する
function rstart() {
  // すべてのリールの回転を開始
  for (var i = 0; i < reelStates.length; i++) {
    startReel(reelStates[i]);
  }

  // スコア表示を消す
  document.getElementById("score").textContent = "";
}

//ストップボタンで止める
function stop(btn) {
  // 既に止まっているリールに対して処理を行わないようにチェックする
  if (reelStates[btn].timerID !== null) {

    // タイマーを止める
    clearInterval(reelStates[btn].timerID);

    // nullを代入してリールが回っていない状態を示す
    reelStates[btn].timerID = null;

    // それぞれのリールが回っているかどうかを調べる
    var isAllReelStopped = reelStates.every(function(state) {
      return state.timerID === null;
    });

    // すべてのリールが停止していたらスコアの計算
    if (isAllReelStopped) {
      // それぞれのリールの数字を取得する
      var reelNumbers = reelStates.map(function(state) {
        return document.getElementById(state.elementID).innerHTML;
      });

      // スコアを計算
      // ここでは7ひとつごとに1点で計算している
      var score = reelNumbers.reduce(function(score, number) {
        return score + (number === "7" ? 1 : 0);
      }, 0);

      // スコアを表示
      document.getElementById("score").textContent = "Score: " + score;
    }
  }
}
.surot {
  text-align: center;
  font-size: 38;
  font-weight: bold;
  color: #ff0000;
  width: 90;
  height: 65;
  background-color: #0000ff;
}

.surot2 {
  font-size: 14pt;
  font-weight: bold;
  color: #0000ff;
  text-align: center;
  width: 96;
}
<form name="game">
  <p style="text-align:center;font-size:24pt;font-weight:bold;">スロットマシン</p>
  <table border="0" style="margin-left:150;margin-bottom:0;">
    <tr>
      <td id="skekka" style="font-size:34;font-weight:bold;color:#ff0000;width:200;height:40;text-align:center;"></td>
    </tr>
  </table>
  <table style="background-color:#00ff00;border:solid #00ff00 5;margin-left:100;margin-bottom:0;">
    <tr>
      <td id="su1" class="surot">0</td>
      <td id="su2" class="surot">0</td>
      <td id="su3" class="surot">0</td>
    </tr>
  </table>
  <table style="margin-left:100;">
    <tr>
      <td>
        <input type="button" value="ストップ" onClick="stop(0)" class="surot2" />
      </td>
      <td>
        <input type="button" value="ストップ" onClick="stop(1)" class="surot2" />
      </td>
      <td>
        <input type="button" value="ストップ" onClick="stop(2)" class="surot2" />
      </td>
    </tr>
  </table>
  <div>
    <input type="button" value="スタート" onClick="rstart()" style="font-size:16pt;font-weight:bold;color:#0000ff;" />
  </div>
  <div id="score"></div>
</form>

Answered by Hibiya Ryuto on January 5, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP