Game to avoid fireworks displays's game | AI game creator

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

No:11864

154

Game to avoid fireworks displays
Developer User4376｜Date and time 23/8/12 18:33:27
Build time 31.161 sec｜Game capacity 3.264KB｜

了解しました。以下に花火大会を回避するゲームの実装例を示します。このゲームでは、プレイヤーが画面をタップしてキャラクターを操作し、花火を回避しながらできるだけ長く生き残ることが目標です。

🐱

このプログラムでは、JavaScriptを使用してゲーム画面の操作や花火の生成・移動・衝突判定を実現しています。プレイヤーキャラクターは猫の絵文字（🐱）で表現され、花火は花火の絵文字（🎆）で表現されます。ゲームオーバー時にはスコアが表示され、再スタートするようになっています。スマートフォンで表示して、画面をタップすることで操作できます。花火に当たった場合や画面上部までキャラクターが上がった場合にゲームオーバーとなります。また、花火が時間経過で生成されるため、生き残るたびにスコアが増えます。尚、本回答は例示の一つであり、他にも様々な実装方法があります。

→ 　

0　

0　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

了解しました。以下に花火大会を回避するゲームの実装例を示します。このゲームでは、プレイヤーが画面をタップしてキャラクターを操作し、花火を回避しながらできるだけ長く生き残ることが目標です。

```html
<!DOCTYPE html>
<html>
<head>
  <title>花火回避ゲーム</title>
  <meta charset="UTF-8">
  <style>
    #game-area {
      width: 100%;
      height: 100vh;
      background-color: black;
      position: relative;
    }
    
    #player {
      position: absolute;
      font-size: 40px;
    }
    
    .firework {
      position: absolute;
      font-size: 60px;
    }
  </style>
</head>
<body>
  <div id="game-area" onclick="jumpPlayer()">
    <span id="player">🐱</span>
  </div>
  
  <script>
    var gameArea = document.getElementById("game-area");
    var player = document.getElementById("player");
    var score = 0;
    
    function jumpPlayer() {
      player.style.top = (player.offsetTop - 100) + "px";
      if (player.offsetTop < 0) {
        gameOver();
      }
    }
    
    function createFirework() {
      var firework = document.createElement("span");
      firework.innerHTML = "🎆";
      firework.className = "firework";
      firework.style.top = Math.random() * 90 + "%";
      gameArea.appendChild(firework);
      
      var moveInterval = setInterval(function() {
        firework.style.left = (firework.offsetLeft - 10) + "px";
        
        if (isCollided(firework)) {
          gameOver();
          clearInterval(moveInterval);
          gameArea.removeChild(firework);
        }
        else if (firework.offsetLeft < -100) {
          gameArea.removeChild(firework);
          clearInterval(moveInterval);
        }
      }, 50);
    }
    
    function isCollided(element) {
      var playerRect = player.getBoundingClientRect();
      var elementRect = element.getBoundingClientRect();
      
      return !(
        playerRect.top > elementRect.bottom ||
        playerRect.bottom < elementRect.top ||
        playerRect.right < elementRect.left ||
        playerRect.left > elementRect.right
      );
    }

function gameOver() {
      alert("Score: " + score);
      score = 0;
      while (gameArea.firstChild) {
        gameArea.removeChild(gameArea.firstChild);
      }
    }
    
    setInterval(function() {
      createFirework();
      score++;
    }, 1500);
  </script>
</body>
</html>
```

このプログラムでは、JavaScriptを使用してゲーム画面の操作や花火の生成・移動・衝突判定を実現しています。プレイヤーキャラクターは猫の絵文字（🐱）で表現され、花火は花火の絵文字（🎆）で表現されます。ゲームオーバー時にはスコアが表示され、再スタートするようになっています。

スマートフォンで表示して、画面をタップすることで操作できます。花火に当たった場合や画面上部までキャラクターが上がった場合にゲームオーバーとなります。また、花火が時間経過で生成されるため、生き残るたびにスコアが増えます。

尚、本回答は例示の一つであり、他にも様々な実装方法があります。