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

No:5141

919

←

Prev Next

→

Stove! Absorbs rain.
Developer User3589｜Date and time 23/6/29 19:28:41
Build time 33.235 sec｜Game capacity 3.095KB｜

Script

了解です！以下に、スマホで遊べる簡単なゲームの例を示します。

雨を吸収するゲーム

得点: 0

残り時間: 30 秒

このゲームは、「ゲームスタート」ボタンを押すと、画面上に雨滴が降ってきます。プレイヤーは雨滴をクリックして吸収し、得点を稼ぎます。制限時間は30秒で、30秒経過するか、プレイヤーが一定数の雨滴を吸収するとゲーム終了です。最終的な得点が表示されます。 Google ColaboratoryやNode.jsなどの環境では実行できませんが、実際のHTMLファイルとして保存し、スマホやウェブブラウザで実行していただければ、プレイすることができます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

了解です！以下に、スマホで遊べる簡単なゲームの例を示します。

<html>
  <head>
    <title>雨を吸収するゲーム</title>
    <style>
      body {
        text-align: center;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <h1>雨を吸収するゲーム</h1>
    <p id="score">得点: 0</p>
    <p id="time">残り時間: 30 秒</p>
    <button onclick="startGame()">ゲームスタート</button>
    <br><br>
    <div id="gameArea"></div>
    
    <script>
      var score = 0;
      var timeLimit = 30;
      var gameArea = document.getElementById("gameArea");
      
      function startGame() {
        score = 0;
        timeLimit = 30;
        document.getElementById("score").innerText = "得点: " + score;
        document.getElementById("time").innerText = "残り時間: " + timeLimit + " 秒";
        createRaindrop();
        var countdown = setInterval(function() {
          timeLimit--;
          document.getElementById("time").innerText = "残り時間: " + timeLimit + " 秒";
          
          if (timeLimit === 0) {
            clearInterval(countdown);
            endGame();
          }
        }, 1000);
      }
      
      function createRaindrop() {
        gameArea.innerHTML = "";
        var raindrop = document.createElement("div");
        raindrop.innerHTML = "☔";
        raindrop.style.fontSize = "60px";
        raindrop.style.position = "absolute";
        raindrop.style.left = Math.random() * (window.innerWidth - 60) + "px";
        raindrop.style.top = "-60px";
        gameArea.appendChild(raindrop);
        
        raindrop.addEventListener("click", function() {
          gameArea.removeChild(raindrop);
          score++;
          document.getElementById("score").innerText = "得点: " + score;
        });
        
        var animation = setInterval(function() {
          var topPos = parseFloat(raindrop.style.top);
          raindrop.style.top = (topPos + 10) + "px";
          
          if (topPos > window.innerHeight) {
            clearInterval(animation);
            if (timeLimit > 0) {
              createRaindrop();
            }
          }
        }, 30);
      }
      
      function endGame() {
        gameArea.innerHTML = "";
        var endMessage = document.createElement("p");
        endMessage.innerText = "ゲーム終了！あなたの得点は " + score + " 点です。";
        gameArea.appendChild(endMessage);
      }
    </script>
  </body>
</html>

このゲームは、「ゲームスタート」ボタンを押すと、画面上に雨滴が降ってきます。プレイヤーは雨滴をクリックして吸収し、得点を稼ぎます。制限時間は30秒で、30秒経過するか、プレイヤーが一定数の雨滴を吸収するとゲーム終了です。最終的な得点が表示されます。

Google ColaboratoryやNode.jsなどの環境では実行できませんが、実際のHTMLファイルとして保存し、スマホやウェブブラウザで実行していただければ、プレイすることができます。