Slot machine in javascript

Asked 1 years ago, Updated 1 years ago, 26 views

I am currently building a slot machine with Javascript.
So I have a question, if you hit the start button continuously, the reel will spin faster.
I want to keep the rotational speed constant.
Also, the judgment of the hit and the failure won't disappear.
What should I do?
Thank you for your cooperation.

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);
    }



// 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);

    }

// Stop the three reels
 function stop(btn){
    if(btn==0) {clearTimeout(TimeoutID1); TimeoutID1=0;}
    if(btn==1) {clearTimeout(TimeoutID2); TimeoutID2=0;}
    if(btn==2) {clearTimeout(TimeoutID3); TimeoutID3=0;}

    // Display "skekka" if su1, su2, su3 have the same values, otherwise display missing
    if(!(TimeoutID1 | TimeoutID2 | TimeoutID3)}{
    if( document.getElementById("su1").innerHTML == document.getElementById("su2").innerHTML
    & document.getElementById("su2").innerHTML == document.getElementById("su3").innerHTML){
    document.getElementById("skekka").innerHTML = "per";
    } else {
    document.getElementById("skekka").innerHTML = "missing";
    }
    }
    }

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 19:51

2 Answers

The answer is almost identical to the one for Last question.As I explained last time, one of the reasons why I don't know how to change the code is because it's outstanding and too complicated.Adding or changing features such as questions is not inherently difficult.However, Even if you add a simple feature, it's a very difficult task to apply to an unprocessed and intricate code, and if possible, the code complexity will increase indefinitely and eventually development will collapse.It will be difficult to add or change any more features until you organize the code according to the policy I mentioned last time.

It seems that the previous answer is rarely used, but if the answer is not used, no progress can be made by asking similar questions several times.As I said last time, please organize the code thoroughly before you consider adding features or fixing defects.


2022-09-30 19:51

I want to keep the rotation speed constant.

You must add logic to prevent double pressing.
"In other words, I think it would be good to add ""rstart() does nothing"" between ""start"" and ""all stop""."

Also, the judgment of hit and miss will not disappear.

This will disappear if you put empty characters in "skekka".


2022-09-30 19:51

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.