AI game creator

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

No:23470

←

Prev Next

→

Flappy bird
Developer User10926｜Date and time 23/10/31 13:28:35
Build time 82.927 sec｜Game capacity 4.273KB｜

Script

Sure! Here's an example of a simple Flappy Bird game implemented as a single HTML file using JavaScript:

Please note that you'll need to replace the `emozi_all/bird.png` file path with the actual path to your bird image. Also, make sure to save the bird.png file in the same directory as the HTML file. This code sets up a simple Flappy Bird game where the player controls the bird's vertical movement by pressing the space key. The objective is to avoid the pipes moving from right to left on the screen. The game ends if the bird collides with one of the pipes.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's an example of a simple Flappy Bird game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #game {
        background-color: #70c5ce;
        position: relative;
        width: 400px;
        height: 600px;
        margin: 0 auto;
      }
      #bird {
        background-image: url('bird.png');
        background-repeat: no-repeat;
        background-size: contain;
        width: 50px;
        height: 50px;
        position: absolute;
        left: 50px;
        top: 250px;
      }
      .pipe {
        background-color: #97ebdb;
        position: absolute;
        width: 80px;
        bottom: 0;
        height: 200px;
      }
      .pipe-top {
        top: 0;
        transform: scaleY(-1);
      }
    </style>
  </head>
  <body>
    <div id="game">
      <div id="bird"></div>
    </div>

// Initialize the game
      function initialize() {
        bird = document.getElementById("bird");
        pipes = [];
        gravity = 2;

// Add a pipe every 2 seconds
        gameInterval = setInterval(addPipe, 2000);

// Start the game loop
        setInterval(gameLoop, 20);
      }

// Add a new pipe to the game
      function addPipe() {
        const pipe = document.createElement("div");
        pipe.classList.add("pipe");
        pipe.style.left = "400px";

// Randomly position the gap between pipes
        const gapPosition = Math.floor(Math.random() * 400) + 100;
        const topPipeHeight = gapPosition - 50;
        const bottomPipeHeight = 600 - gapPosition - 100;

const topPipe = document.createElement("div");
        topPipe.classList.add("pipe");
        topPipe.classList.add("pipe-top");
        topPipe.style.height = topPipeHeight + "px";

const bottomPipe = document.createElement("div");
        bottomPipe.classList.add("pipe");
        bottomPipe.style.height = bottomPipeHeight + "px";

pipe.appendChild(topPipe);
        pipe.appendChild(bottomPipe);

document.getElementById("game").appendChild(pipe);
        pipes.push(pipe);
      }

// Update the game state
      function update() {
        // Move the bird vertically based on gravity
        const birdTop = parseFloat(bird.style.top) || 250;
        bird.style.top = birdTop + gravity + "px";

// Move all pipes from right to left
        pipes.forEach((pipe) => {
          const pipeLeft = parseFloat(pipe.style.left) || 400;
          pipe.style.left = pipeLeft - 2 + "px";

// Check for collision with bird
          if (checkCollision(bird, pipe)) {
            gameOver();
          }

// Remove pipes that have moved offscreen
          if (pipeLeft < -80) {
            pipe.remove();
          }
        });
      }

// Game loop
      function gameLoop() {
        update();
      }

// Check for collision between two elements
      function checkCollision(element1, element2) {
        const rect1 = element1.getBoundingClientRect();
        const rect2 = element2.getBoundingClientRect();

return (
          rect1.left < rect2.right &&
          rect1.right > rect2.left &&
          rect1.top < rect2.bottom &&
          rect1.bottom > rect2.top
        );
      }

// Handle bird jump on key press
      document.addEventListener("keydown", function (event) {
        if (event.code === "Space") {
          bird.style.top = parseFloat(bird.style.top) - 50 + "px";
        }
      });

// Game over logic
      function gameOver() {
        clearInterval(gameInterval);
        alert("Game Over!");
      }

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

Please note that you'll need to replace the `bird.png` file path with the actual path to your bird image. Also, make sure to save the bird.png file in the same directory as the HTML file.

This code sets up a simple Flappy Bird game where the player controls the bird's vertical movement by pressing the space key. The objective is to avoid the pipes moving from right to left on the screen. The game ends if the bird collides with one of the pipes.