

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

javascript

[code]

    //左リールの制御
    function a1() {
    
        //aにHTMLから取得した数字を代入
        var a=document.getElementById("su1").innerHTML;
    
        //文字列のiを数字に変換し１を足してxに代入
        var x=parseInt(a)+1;
    
        //取得した値が９を超えたら１に戻す
        if(x>9) {
            x=1;
        }
        //xに書き換えてして表示する
        document.getElementById("su1").innerHTML=x;
    
        //一定期間繰り返す
        TimeoutID1=setTimeout("a1()",100);
    }
    
    //スタートボタンを押すと６を表示する
    function rstart() {
        a2();
        a1();
        a3();
    }
    
    //真ん中のリールの制御
    function a2() {
    
        //iにHTMLから取得した数字を代入
        var i=document.getElementById("su2").innerHTML;
    
        //文字列のiを数字に変換し１を足してjに代入
        var j=parseInt(i)+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を数字に変換し１を足してjに代入
    
        var z=parseInt(c)+1;
        if(z>9) {
           z=1;
        }
    
        //zに書き換えてして表示する
        document.getElementById("su3").innerHTML=z;
    
        //一定期間繰り返す
        TimeoutID3=setTimeout("a3()",100);
    
    }
    
[/code]

HTML

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2015-07-30T12:36:11.403
12842
2020-11-04T16:25:06.460
2015-07-30T20:09:47.507
2521
10383
question
javascript
Javascriptでのスロットマシン


機能を追加しにくいと感じたら、そのコードは複雑になり過ぎています。  
一度コード全体を整理したほうがいいでしょう。[リファクタリング](https://ja.wikipedia.org/wiki/%E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0_\(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0\))と言います。具体的には、

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

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

[code]

    // 各リールの状態
    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を数字に変換し１を足してxに代入
                var x = parseInt(a) + 1;
    
                //取得した値が９を超えたら１に戻す
                if (x > 9) {
                    x = 1;
                }
                //xに書き換えてして表示する
                document.getElementById(state.elementID).innerHTML = x;
            }, 100);
        }
    }
    
    //スタートボタンを押すと６を表示する
    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;
            }
        }
    }
    
[/code]

[code]

    // 各リールの状態
    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を数字に変換し１を足してxに代入
          var x = parseInt(a) + 1;
    
          //取得した値が９を超えたら１に戻す
          if (x > 9) {
            x = 1;
          }
          //xに書き換えてして表示する
          document.getElementById(state.elementID).innerHTML = x;
        }, 100);
      }
    }
    
    //スタートボタンを押すと６を表示する
    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;
        }
      }
    }
[/code]

[code]

    .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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2015-07-30T21:36:31.990
12857
2019-12-13T14:05:06.753
2019-12-13T14:05:06.753
32986
10330
12842
answer