Be a bird and avoid obstacles by jumping's game

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

No:19995

←

Prev Next

→

Be a bird and avoid obstacles by jumping
Developer User8915｜Date and time 23/10/7 22:17:52
Build time 19.229 sec｜Game capacity 3.386KB｜

Script

Sure! Here's an example of a simple game where you play as a bird and avoid obstacles by jumping. The game is implemented as a single HTML file and uses JavaScript. It is enclosed within `` tags. To play the game, simply open the HTML file in a browser. <br><br> <br> <style> #bird { position: absolute; top: 50%; left: 10%; font-size: 48px; } .obstacle { position: absolute; bottom: 0; width: 50px; height: 200px; background-color: green; } </style>

🐦

To play the game, save the above code as a `.html` file and open it in any browser. You can control the bird by pressing the spacebar to make it jump and avoid the green obstacles. The game will end if the bird hits an obstacle or touches the top/bottom of the screen. Your score will be displayed in an alert box when the game ends.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Bird Game</title>
  <style>
    #bird {
      position: absolute;
      top: 50%;
      left: 10%;
      font-size: 48px;
    }

.obstacle {
      position: absolute;
      bottom: 0;
      width: 50px;
      height: 200px;
      background-color: green;
    }
  </style>
</head>
<body>
  <script>
    // Initialize variables
    let birdPosition = 50;
    let gravity = 1;
    let jumpStrength = 15;
    let obstacleSpeed = 5;
    let score = 0;
    let gameInterval;

// Function to update background position
    function updateBirdPosition() {
      birdPosition += gravity;
      document.getElementById('bird').style.top = birdPosition + '%';

if (birdPosition <= 0 || birdPosition >= 90) {
        gameOver();
      }
    }

// Function to start the game
    function startGame() {
      gameInterval = setInterval(updateBirdPosition, 100);
      document.addEventListener('keydown', jump);
      generateObstacles();
    }

// Function to define bird jumping
    function jump(event) {
      if (event.keyCode === 32) { // Space key
        birdPosition -= jumpStrength;
        document.getElementById('bird').style.top = birdPosition + '%';
      }
    }

// Function to generate obstacles
    function generateObstacles() {
      setInterval(() => {
        const obstacle = document.createElement('div');
        obstacle.className = 'obstacle';
        obstacle.style.marginLeft = '100%';
        obstacle.style.animationDuration = `${10 / obstacleSpeed}s`;

const gameContainer = document.getElementsByTagName('body')[0];
        gameContainer.appendChild(obstacle);

obstacle.addEventListener('animationend', () => {
          obstacle.remove();
          score++;
        });

setInterval(() => {
          obstacle.style.marginLeft = `-${obstacle.offsetWidth}px`;

// Check collision
          if (checkCollision(obstacle)) {
            gameOver();
          }
        }, 50);
      }, 3000);
    }

// Function to check collision
    function checkCollision(obstacle) {
      const bird = document.getElementById('bird');
      const birdRect = bird.getBoundingClientRect();
      const obstacleRect = obstacle.getBoundingClientRect();

return (
        birdRect.left < obstacleRect.right &&
        birdRect.right > obstacleRect.left &&
        birdRect.top < obstacleRect.bottom &&
        birdRect.bottom > obstacleRect.top
      );
    }

// Function to end the game
    function gameOver() {
      clearInterval(gameInterval);
      alert('Game Over!\nScore: ' + score);
      window.location.reload();
    }

// Start the game when the page loads
    window.onload = startGame;
  </script>

<div id="bird">🐦</div>
</body>
</html>
```