言語切り替え

反射神経ゲーム

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

用意するもの

手順

以下の表や図のように配線します。ボタンは左右どちらの向きで繋いでも問題ありません。

obniz 部品
0 ボタン1 signal
1 ボタン1 GND
2 LED1 アノード
3 LED1 カソード
8 LED2 アノード
9 LED2 カソード
10 ボタン2 signal
11 ボタン2 GND

プログラムをかく

LEDとスイッチを繋いだピン番号に応じて、プログラムで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で出してみました。

最後にobnizに電源を繋いでプログラムを実行すると、反射神経ゲームができます。「PUSH!!!」と画面に表示されてから、2人のうちどちらがボタンを早く押せるか競争してみましょう。

プログラム

<!-- 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>