第3回　JavaScriptでゲーム

3児の父・SE1のマッチョ！KUROMAME BLOG

おはようございます！KUROMAMEです。

本日はJavaScriptで数字当てゲームを作ります。

要件は以下の通りです。

・OKボタンを押して5秒経過したと思ったらボタンを押す

・4.5～5.5秒なら「格好いい」

・それ以外は「残念でした」が出力される


早速コードは以下の通りです

「index2.js」

var game = {
   startTime : null,
   Area : document.getElementById('Area')
}
function start(){
   game.startTime = Date.now();
   document.body.onkeydown = stop;
}
function stop(){
   var currentTime = Date.now();
   var seconds = (currentTime - game.startTime) / 1000
   if(4.5<= seconds && seconds <= 5.5){
       game.Area.innerText = seconds + '秒でした。格好いい'
   }else{
       game.Area.innerText = seconds + '秒でした。残念'
   }
}
if(confirm('OKを押して5秒経過したらボタンを押してください')){
   start();
}

「index.html」

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>JavaScript の関数</title>
</head>
<body>
  <h1 id="Area"></h1>
  <script src="index2.js"></script>
</body>
</html>

すると、

スクリーンショット 2020-11-20 071059

スクリーンショット 2020-11-20 071121

上記のような画面になりました！

詳細は次回以降の解説とします。

この記事が気に入ったらサポートをしてみませんか？