AI game creator

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

No:21285

←

Prev Next

→

Flappy bird
Developer User9739｜Date and time 23/10/14 15:31:56
Build time 103.636 sec｜Game capacity 4.364KB｜

Script

Sure! Below is an example of a simple implementation of Flappy Bird game using JavaScript and HTML. Please note that due to the complexity of Flappy Bird, the code provided here is a simplified version. You can customize and modify it to add more features and improve the gameplay experience.

To use this code, save it as a `.html` file, and open it in a web browser that supports JavaScript. The game will start automatically, and you can click on the screen (or tap, assuming smartphone operation) to make the bird jump. The objective is to pass through the gaps between the pipes and avoid collision. Your score will increase by one each time you successfully pass a pipe, and the game will end if the bird collides with any of the pipes. This is a basic implementation of Flappy Bird using JavaScript, HTML, and CSS. You can further enhance it by adding sound effects, better graphics, and additional gameplay features as per your requirement.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flappy Bird Game</title>
  <style>
    #game-container {
      position: relative;
      width: 320px;
      height: 480px;
      border: 1px solid #000;
      margin: 0 auto;
    }
    
    #bird {
      position: absolute;
      width: 40px;
      height: 30px;
      background-image: url(path_to_bird_image.png);
      background-repeat: no-repeat;
      background-size: contain;
    }
    
    .pipe {
      position: absolute;
      width: 80px;
      height: 320px;
      background-color: #00ff00;
    }
    
    #score {
      position: absolute;
      top: 20px;
      left: 20px;
      font-size: 24px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="bird"></div>
    <div id="score">0</div>
  </div>

// Game Initialization
    function initGame() {
      isGameOver = false;
      score = 0;
      birdPosition = { x: 120, y: 180 };
      pipesPositions = [{ x: 320, y: 0 }];

document.addEventListener('click', () => {
        if (birdPosition.y > 0) {
          birdPosition.y -= 60;
        }
      });

gameInterval = setInterval(updateGame, 20);
    }

// Game Update
    function updateGame() {
      if (isGameOver) {
        clearInterval(gameInterval);
        return;
      }

const bird = document.getElementById('bird');
      bird.style.top = birdPosition.y + 'px';

for (let i = 0; i < pipesPositions.length; i++) {
        pipesPositions[i].x -= 2;

const pipe = document.getElementById('pipe-' + i);
        if (!pipe) {
          const newPipe = document.createElement('div');
          newPipe.classList.add('pipe');
          newPipe.id = 'pipe-' + i;
          document.getElementById('game-container').appendChild(newPipe);
          pipe = newPipe;
        }

pipe.style.left = pipesPositions[i].x + 'px';

if (pipesPositions[i].x <= -80) {
          pipesPositions.splice(i, 1);
          i--;
        }

// Collision Detection
        const birdRect = bird.getBoundingClientRect();
        const pipeRect = pipe.getBoundingClientRect();

if (
          birdRect.left < pipeRect.right &&
          birdRect.right > pipeRect.left &&
          (birdRect.top < pipeRect.top || birdRect.bottom > pipeRect.bottom)
        ) {
          endGame();
          return;
        }

// Score Increment
        if (birdRect.left > pipeRect.left && !pipe.scored) {
          pipe.scored = true;
          score++;
          document.getElementById('score').textContent = score;
        }
      }

// Bird Gravity
      if (birdPosition.y < 420) {
        birdPosition.y += 2;
      }

// Create New Pipes
      if (pipesPositions[pipesPositions.length - 1].x < 240) {
        const pipeGap = 120;
        const pipeY = Math.floor(Math.random() * (360 - pipeGap));
        pipesPositions.push({ x: 320, y: pipeY });
      }
    }

// Game Over
    function endGame() {
      isGameOver = true;
      clearInterval(gameInterval);
      alert('Game Over. Your score: ' + score);
    }

// Start the game
    initGame();
  </script>
</body>
</html>
```

This is a basic implementation of Flappy Bird using JavaScript, HTML, and CSS. You can further enhance it by adding sound effects, better graphics, and additional gameplay features as per your requirement.