Reflexes game

このエントリーをはてなブックマークに追加

This is reflexes game, which player can push button faster?
When display "PUSH!!!", push button !
Not push before.

Circit

Wire two LEDs and two buttons.
The pin no which wired are written on program.

  led1 = obniz.wired("LED", { anode:3, cathode:2 } );
  button1 =  obniz.wired("Button", {signal: 0, gnd: 1});

  led2 = obniz.wired("LED", { anode:8, cathode:9 } );
  button2 =  obniz.wired("Button", {signal: 10, gnd: 11});

Make HTML

Make start button and place which display results.

<button onclick="start();" >start</button>
<h2 id="print"></h2>
<h2 id="results"></h2>

Set button click function "start", and add id for display information.

You can write inner h2 like this.

    document.getElementById("print").innerHTML = "PUSH!!!";

Disolay "PUSH!!!" on random time.

Get Ramdom value with Math.random().
I want to get random value between 2sec and 12sec, so write like this.

 let timeSeconds = Math.random() * 10 +2;

Delay to display, use setTimeout.

 setTimeout(()=>{
    document.getElementById("print").innerHTML = "PUSH!!!";
  },timeSeconds * 1000)

Detect which button pushed faster.

You can use button.onchange to get button state, but cannot detect faster only it.
Add var winner and set faster player infomation.

    let winner = null;
    document.getElementById("print").innerHTML = "PUSH!!!";

    button1.onchange = function(pushed){
      if(pushed && winner === null){
        winner = "Player1";
        document.getElementById("results").innerHTML = "Palyer 1 won! " ;
      }
    }

    button2.onchange = function(pushed){
      if(pushed && winner === null){
        winner = "Player2";

        document.getElementById("results").innerHTML = "Palyer 2 won! " ;
      }
    }

Too faster push

Now, it is safe that you push before display.
So detect too faster push.

Too faster push is push before timeSecondssec.
So change button.onchange on the basis of before
timeSeconds or after.

// too fast push 
    button1.onchange = function(pushed){
      if(pushed){
        waiting = false;
        document.getElementById("results").innerHTML = "Palyer 2 won! <br/> player 1 pushed too fast.";
      }
    }
     button2.onchange = function(pushed){
      if(pushed){
        waiting = false;
        document.getElementById("results").innerHTML = "Palyer 1 won! <br/> player 2 pushed too fast.";
      }
     }

Those are component of Reflexes game. Let's make it!

Program

<!-- HTML Example -->

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@2.0.2/obniz.js" crossorigin="anonymous"></script>
</head>
<body>

<div id="obniz-debug"></div>
<h1>Reflexes game</h1>
<button onclick="start();" >start</button>
<h2 id="print"></h2>
<h2 id="results"></h2>

<script>
let obniz = new Obniz("OBNIZ_ID_HERE");
let led1,button1;
let led2,button2;
let speaker;
  
obniz.onconnect = async function () {
  led1 = obniz.wired("LED", { anode:2, cathode:3 } );
  button1 =  obniz.wired("Button", {signal: 0, gnd: 1});
  
  led2 = obniz.wired("LED", { anode:8, cathode:9 } );
  button2 =  obniz.wired("Button", {signal: 10, gnd: 11});
  
  obniz.display.clear();
  obniz.display.print("Reflexes game");

}

async function start(){
  if(!led1){return;}
  led1.off();
  led2.off();
  let timeSeconds = Math.random() * 10 +2;
  let waiting = true;
  
  document.getElementById("print").innerHTML = "wait.";
  document.getElementById("results").innerHTML = "";
  
  setTimeout(()=>{
    if(!waiting){ return;}
    let time = new Date();
    waiting = false;
    let winner = null;
    document.getElementById("print").innerHTML = "PUSH!!!";
    
    button1.onchange = function(pushed){
      if(pushed && winner === null){
        winner = "Player1";
        
        let pushTime = new Date();
        let duration = pushTime.getTime() - time.getTime();
        document.getElementById("results").innerHTML = "Palyer 1 won! " + duration + "[ms]";
        led1.blink(100);
      }
    }
    
    button2.onchange = function(pushed){
      if(pushed && winner === null){
        winner = "Player2";
        
        let pushTime = new Date();
        let duration = pushTime.getTime() - time.getTime();
        document.getElementById("results").innerHTML = "Palyer 2 won! " + duration + "[ms]";
        led2.blink(100);
      }
    }
      
  },timeSeconds * 1000)
  
  
  // too fast push 
    button1.onchange = function(pushed){
      if(pushed){
        waiting = false;
        document.getElementById("results").innerHTML = "Palyer 2 won! <br/> player 1 pushed too fast.";
        led2.blink(100);
      }
    }
     button2.onchange = function(pushed){
      if(pushed){
        waiting = false;
        document.getElementById("results").innerHTML = "Palyer 1 won! <br/> player 2 pushed too fast.";
        led1.blink(100);
      }
     }
    
    
  function loop(){
    if(!waiting){
      return;
    }
    document.getElementById("print").innerHTML += ".";
    setTimeout(loop,500);
  }
  setTimeout(loop,500);
  
}

</script>
</body>
</html>

Run Now

The html will be opened to run a program.

You will Get in Few Days

Circuit for Starter “obniz Board” is available on Amazon and other online stores.
You can get it at below

Our products and resellers

Forum

Visit our developer’s forum to discuss and discover technologies.

Forum

Contact

Feel free to contact out support and technical team.

Contact us