Click here for free DL of the app version that can save data.

No:3551

1173

←

Prev Next

→

girl who has led a sheltered life
Developer User3702｜Date and time 23/6/25 14:52:50
Build time 24.525 sec｜Game capacity 2.368KB｜

Script

ランダムに表示される数字を素早くタップするゲームを作成しました。スマホでプレイ可能で、絵文字を使用しています。

素早くタップ!

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

ランダムに表示される数字を素早くタップするゲームを作成しました。スマホでプレイ可能で、絵文字を使用しています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>素早くタップ!</title>
    <style>
      #number {
        font-size: 10rem;
        text-align: center;
        margin-top: 3rem;
      }
      #score {
        font-size: 2rem;
        text-align: center;
        margin-top: 1rem;
      }
    </style>
  </head>
  <body>
    <h1 style="text-align:center;">素早くタップ!</h1>
    <div id="number"></div>
    <div id="score"></div>
    <script>
      var score = 0;
      var timeLeft = 10;
      var timerId;

function updateScore() {
        document.getElementById('score').innerHTML = 'Score: ' + score;
      }

function updateTime() {
        document.getElementById('score').innerHTML = 'Time left: ' + timeLeft;
      }

function generateNumber() {
        //ランダムな数字を生成
        var number = Math.floor(Math.random() * 100);
        //数字を画面に表示
        document.getElementById('number').innerHTML = number;

//数秒後に数字が消えるようにする
        setTimeout(function() {
          document.getElementById('number').innerHTML = '';
        }, 1000);
        
        //タイマーを開始
        timerId = setTimeout(function() {
          timeLeft--;
          updateTime();
          if (timeLeft == 0) {
            clearTimeout(timerId);
            alert('Game over! Your score is ' + score);
          } else {
            generateNumber();
          }
        }, 1000);
      }

//ページロード時にゲームを開始
      generateNumber();

//数字をタップした時の処理を記述
      document.getElementById('number').addEventListener('click', function() {
        //タイムアップした場合は何もしない
        if (timeLeft == 0) {
          return;
        }
        //スコアを加算して表示
        score++;
        updateScore();
        //タイマーをリセット
        clearTimeout(timerId);
        timeLeft = 10;
        updateTime();
        //新しい数字を表示
        generateNumber();
      });
    </script>
  </body>
</html>