Slot Machine in Javascript

Let me ask you a question.
I'm building a slot machine with Javascript.
I don't know how to make the final "around" or "missing" decision.
Please tell me who it is.

javascript

// Control the left reel
function a1(){

    Replace //a with the number obtained from HTML
    vara = document.getElementById("su1").innerHTML;

    // Convert string i to a number and add 1 to replace x
    varx = parseInt(a)+1;

    // Return to 1 when retrieved value exceeds 9
    if(x>9){
        x = 1;
    }
    Rewrite to //x to display
    document.getElementById("su1").innerHTML=x;

    // Repeat for a certain period of time
    TimeoutID1 = setTimeout("a1(), 100);
}

// Press Start button to display 6
function rstart(){
    a2();
    a1();
    a3();
}

// Control the middle reel
function a2(){

    Replace //i with numbers retrieved from HTML
    vari= document.getElementById("su2").innerHTML;

    // Convert string i to a number and add 1 to substitute j
    varj = parseInt(i)+1;

    // Return to 1 when retrieved value exceeds 9
    if(j>9){
       j = 1;
    }

    Rewrite to //J to display
    document.getElementById("su2").innerHTML=j;

    // Repeat for a certain period of time
    TimeoutID2 = setTimeout("a2(), 100);
}
// Stop with the stop button
function stop(btn){
    if(btn==0) {clearTimeout(TimeoutID1);}
    if(btn==1) {clearTimeout(TimeoutID2);}
    if(btn==2) {clearTimeout(TimeoutID3);}
}

// Right reel control
function a3(){
    varc= document.getElementById("su3").innerHTML;

    // Convert string i to a number and add 1 to substitute j

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

    Rewrite to //z to display
    document.getElementById("su3").innerHTML=z;

    // Repeat for a certain period of time
    TimeoutID3 = setTimeout("a3(), 100);

}

HTML

<html>
  <head>
    <metahttp-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;">slot machine</p>
    <table border="0" style="margin-left:150;margin-bottom:0;">
      <tr>
        <tdid="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#00ff005;margin-left:100;margin-bottom:0;">
      <tr>
        <tdid="su1" class="surot">0<td>
        <tdid="su2" class="surot">0<td>
        <tdid="su3" class="surot">0<td>
      </tr>
    </table>
    <table style="margin-left:100;">
      <tr>
        <td><input type="button" value="stop" onClick="stop(0)"class="surot2">/td>
        <td><input type="button" value="stop" onClick="stop(1)"class="surot2">/td>
        <td><input type="button" value="stop" onClick="stop(2)"class="surot2">/td>
      </tr>
    </table>
    <div style="position:absolute;top:125;left:450;">
      <input type="button" value="start" onClick="rstart()" style="font-size:16pt;font-weight:bold;color:#0000ff;">
    </div>
   </form>
  </body>
</html>

javascript

2022-09-30 10:56

1 Answers

If you find it difficult to add features, the code becomes too complicated.
You should organize the entire code once.refactoring.Specifically,

Examples include:

// State of each reel
varreelStates = [{
    elementID: "su1",
    timerID:null
}, {
    elementID: "su2",
    timerID:null
}, {
    elementID: "su3",
    timerID:null
}];

// Start Reel
function startReel(state){
    if(state.timerID===null){
        // Repeat for a certain period of time
        state.timerID = setInterval(function(){
            Replace //a with the number obtained from HTML
            vara = document.getElementById(state.elementID).innerHTML;

            // Convert string i to a number and add 1 to replace x
            varx = parseInt(a)+1;

            // Return to 1 when retrieved value exceeds 9
            if(x>9){
                x = 1;
            }
            Rewrite to //x to display
            document.getElementById(state.elementID).innerHTML = x;
        }, 100);
    }
}

// Press Start button to display 6
function rstart(){
    // Start spinning all reels
    for (vari=0;i<reelStates.length;i++) {
        startReel(reelStates[i]);
    }

    // clear the score display
    document.getElementById("score").textContent="";
}

// Stop with the stop button
function stop(btn){
    // check not to process reels that have already stopped
    if(reelStates[btn].timerID!==null){

        // turn off the timer
        clearInterval (reelStates [btn].timerID);

        // replace null to indicate that the reel is not spinning
        reelStates [btn].timerID=null;

        // check whether each reel is spinning
        varisAllReelStopped=reelStates.every(function(state){
            return state.timerID === null;
        });

        // Calculate score if all reels are stopped
        if(isAllReelStopped) {

            // get the numbers for each reel
            varreelNumber=reelStates.map(function(state){
                return document.getElementById(state.elementID).innerHTML;
            });

            // Calculate Score
            // Here we calculate by one point for every seven.
            varscore=reelNumber.reduce(function(score,number){
                return score+(number==="7"?1:0);
            }, 0);

            // View Score
            document.getElementById("score").textContent="Score:"+score;
        }
    }
}

// State of each reel
varreelStates = [{
  elementID: "su1",
  timerID:null
}, {
  elementID: "su2",
  timerID:null
}, {
  elementID: "su3",
  timerID:null
}];

// Start Reel
function startReel(state){
  if(state.timerID===null){
    // Repeat for a certain period of time
    state.timerID = setInterval(function(){
      Replace //a with the number obtained from HTML
      vara = document.getElementById(state.elementID).innerHTML;

      // Convert string i to a number and add 1 to replace x
      varx = parseInt(a)+1;

      // Return to 1 when retrieved value exceeds 9
      if(x>9){
        x = 1;
      }
      Rewrite to //x to display
      document.getElementById(state.elementID).innerHTML = x;
    }, 100);
  }
}

// Press Start button to display 6
function rstart(){
  // Start spinning all reels
  for (vari=0;i<reelStates.length;i++) {
    startReel(reelStates[i]);
  }

  // clear the score display
  document.getElementById("score").textContent="";
}

// Stop with the stop button
function stop(btn){
  // check not to process reels that have already stopped
  if(reelStates[btn].timerID!==null){

    // turn off the timer
    clearInterval (reelStates [btn].timerID);

    // replace null to indicate that the reel is not spinning
    reelStates [btn].timerID=null;

    // check whether each reel is spinning
    varisAllReelStopped=reelStates.every(function(state){
      return state.timerID === null;
    });

    // Calculate score if all reels are stopped
    if(isAllReelStopped) {
      // get the numbers for each reel
      varreelNumber=reelStates.map(function(state){
        return document.getElementById(state.elementID).innerHTML;
      });

      // Calculate Score
      // Here we calculate by one point for every seven.
      varscore=reelNumber.reduce(function(score,number){
        return score+(number==="7"?1:0);
      }, 0);

      // View Score
      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;">slot machine</p>
  <table border="0" style="margin-left:150;margin-bottom:0;">
    <tr>
      <tdid="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#00ff005;margin-left:100;margin-bottom:0;">
    <tr>
      <tdid="su1" class="surot">0</td>
      <tdid="su2" class="surot">0</td>
      <tdid="su3" class="surot">0</td>
    </tr>
  </table>
  <table style="margin-left:100;">
    <tr>
      <td>
        <input type="button" value="stop" onClick="stop(0)"class="surot2"/>
      </td>
      <td>
        <input type="button" value="stop" onClick="stop(1)"class="surot2"/>
      </td>
      <td>
        <input type="button" value="stop" onClick="stop(2)"class="surot2"/>
      </td>
    </tr>
  </table>
  <div>
    <input type="button" value="start" onClick="rstart()" style="font-size:16pt;font-weight:bold;color:#0000ff;"/>
  </div>
  <divid="score"></div>
</form>

2022-09-30 10:56

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656