反射神経ゲーム

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

ボタン早押しの反射神経ゲームです.
PUSH!!!と画面に表示されたらボタンを押してください
お手つき厳禁!

回路

LEDとボタンを2つずつ用意します.
つないだピン番号に応じて,プログラムでwiredを書きます.

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

HTMLの作成

スタートボタンと結果を表示する枠を作ります.

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

ボタンはクリックされたときにstart関数が呼ばれるように,
H2タグは後々結果などを表示するためにid属性を付けておきます.

idをつけておくことで,こうやってタグの中身を書き換えることができます

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

タイマーでランダムな時間に「PUSH!!!」を表示する

一定の時間だと反射神経ゲームにならないので,ランダムな時間が経過したときに「PUSH!!!」を表示するようにします.

ランダムな数字はMath.random()で0〜1までの小数が作れます.
2秒〜12秒の間でランダムな時間を作るため,下記のように書きました

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

PUSHを表示するために,setTimeout関数を使います.

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

どちらのボタンが先に押されたか判定する

ボタンが押された時を知るためにはbutton.onchangeを使いますが,これだけではどちらが先に押されたかわかりません.
winner変数を作り,先に押された方の情報を入れておくことにします.

    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! " ;
      }
    }

これで先に押された方がwinnerとして画面に表示されるようになりました.

お手つきを禁止する

もし今のままだったら,ボタンを連打してもOK担ってしまいます.
お手つきを禁止しましょう.

お手つきというのは,timeSeconds変数で設定した時間よりも前にボタンを押した状態なので,button.onchangeを変えておきます.
timeSeconds秒まではお手つき判定のbutton.onchangeが呼ばれ,timeSeconds秒後はwinner判定のbutton.onchangeが呼ばれます

// 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.";
      }
     }

これらを組み合わせて,反射ゲームを作ります.
組み合わせるついでに,ボタンを押すまでにかかった時間をmsで出してみました.

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@1.6.1/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>

今すぐ実行

HTMLがブラウザで開かれて実行されます。