AI game creator

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

No:9698

1279

←

Prev Next

→

double meteo
Developer User3840｜Date and time 23/7/26 21:13:49
Build time 27.954 sec｜Game capacity 3.344KB｜

Script

了解しました。以下に、ダブルメテオというゲームの実装例を示します。

Score: 0

🌠🌠

🚀

GAME OVER

このゲームでは、スペースキーの左右で移動する宇宙船を操作し、上から降ってくるメテオを避けるというゲームです。スペースキーの左右で宇宙船を移動させ、メテオとの接触を避けながら、スコアを上げていきます。メテオの一番下に到達するとスコアが加算されます。メテオに接触した場合はゲームオーバーとなり、スコアが表示されます。以上のような形で、ダブルメテオというゲームの実装が完了し、遊ぶことができます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に、ダブルメテオというゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>ダブルメテオ</title>
  <style>
    body {
      background-color: black;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    #game {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 3rem;
      color: white;
    }
    
    #gameover {
      display: none;
      font-size: 5rem;
      color: red;
      margin-bottom: 2rem;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="score">Score: 0</div>
    <div id="meteors">🌠🌠</div>
    <div id="spaceship">🚀</div>
    <div id="gameover">GAME OVER</div>
  </div>
  
  <script>
    const spaceship = document.getElementById('spaceship');
    const meteors = document.getElementById('meteors');
    const scoreElem = document.getElementById('score');
    const gameoverElem = document.getElementById('gameover');
    
    let score = 0;
    let gameover = false;
    let timer;
    
    const updateScore = () => {
      score++;
      scoreElem.textContent = `Score: ${score}`;
    };
    
    const moveSpaceship = (event) => {
      const key = event.key;
      const x = spaceship.getBoundingClientRect().x;
      
      if (key === 'ArrowLeft' && x > 0) {
        spaceship.style.left = `${x - 10}px`;
      } else if (key === 'ArrowRight' && x < window.innerWidth - spaceship.offsetWidth) {
        spaceship.style.left = `${x + 10}px`;
      }
    };
    
    const checkCollision = () => {
      const spaceshipRect = spaceship.getBoundingClientRect();
      const meteorRects = Array.from(meteors.children).map(meteor => meteor.getBoundingClientRect());
      
      for (const meteorRect of meteorRects) {
        if (spaceshipRect.top <= meteorRect.bottom && spaceshipRect.bottom >= meteorRect.top && spaceshipRect.left <= meteorRect.right && spaceshipRect.right >= meteorRect.left) {
          gameover = true;
          clearInterval(timer);
          gameoverElem.style.display = 'block';
          break;
        }
      }
    };
    
    const moveMeteors = () => {
      const meteorsRect = meteors.getBoundingClientRect();
      const newY = meteorsRect.y + 10;
      meteors.style.top = `${newY}px`;
      
      if (newY > window.innerHeight - meteorsRect.height) {
        meteors.innerHTML = '🌠🌠';
        updateScore();
      }
      
      if (!gameover) {
        checkCollision();
      }
    };
    
    const startGame = () => {
      document.addEventListener('keydown', moveSpaceship);
      timer = setInterval(moveMeteors, 1000);
    };
    
    startGame();
  </script>
</body>
</html>
```

以上のような形で、ダブルメテオというゲームの実装が完了し、遊ぶことができます。