AI game creator

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

No:37035

←

Prev Next

→

Flappy bird
Developer User16966｜Date and time 24/1/20 0:06:58
Build time 17.57 sec｜Game capacity 4.134KB｜

Script

Sure, here's an example of a Flappy Bird game implemented as a single HTML file using JavaScript:

You can copy the code above and save it as a `.html` file, then open it in a web browser to play the Flappy Bird game. Use the spacebar or any key to control the bird's height and navigate through the pipes. The goal is to get the highest score by successfully passing through the pipes without colliding.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure, here's an example of a Flappy Bird game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="500" height="500"></canvas>

// Initialize the game
    window.onload = function() {
      canvas = document.getElementById('gameCanvas');
      canvasContext = canvas.getContext('2d');

intervalId = setInterval(update, 1000 / 60);

document.addEventListener('keydown', function(event) {
        if (event.code === 'Space') {
          birdVelocity = -10;
        }
      });

generatePipes();
    }

// Generate new pipes
    function generatePipes() {
      pipes.push({
        x: canvas.width,
        y: getRandomPipeY()
      });
    }

// Get random Y position for pipes
    function getRandomPipeY() {
      return Math.floor(Math.random() * 200) + 100;
    }

// Update game logic and draw
    function update() {
      // Game Over condition
      if (birdY > canvas.height - birdRadius || collisionDetection()) {
        clearInterval(intervalId);
        if (gameScore > highestScore) {
          highestScore = gameScore;
        }
        resetGame();
      }

// Update bird position based on gravity and velocity
      birdVelocity += birdGravity;
      birdY += birdVelocity;

// Clear the canvas
      canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// Draw bird
      canvasContext.fillStyle = 'yellow';
      canvasContext.beginPath();
      canvasContext.arc(birdX, birdY, birdRadius, 0, Math.PI * 2, false);
      canvasContext.fill();

// Update and draw pipes
      for (var i = 0; i < pipes.length; i++) {
        var pipe = pipes[i];

pipe.x -= gameSpeed;

// Remove offscreen pipes
        if (pipe.x < -pipeWidth) {
          pipes.splice(i, 1);
        }

// Draw bottom pipe
        canvasContext.fillStyle = 'green';
        canvasContext.fillRect(pipe.x, pipe.y, pipeWidth, canvas.height - pipe.y);

// Draw top pipe
        canvasContext.fillRect(pipe.x, 0, pipeWidth, pipe.y - pipeGap);

// Increment score if bird successfully crosses a pipe
        if (pipe.x === birdX) {
          gameScore++;
        }
      }

// Draw score on canvas
      canvasContext.fillStyle = 'white';
      canvasContext.fillText('Score: ' + gameScore, 10, 20);
      canvasContext.fillText('Highest Score: ' + highestScore, 10, 40);
      
      // Generate new pipe every pipeDistance
      if (pipes[pipes.length - 1].x < canvas.width - pipeDistance) {
        generatePipes();
      }
    }

// Check collision between bird and pipes
    function collisionDetection() {
      for (var i = 0; i < pipes.length; i++) {
        var pipe = pipes[i];

if (
          birdX + birdRadius > pipe.x &&
          birdX - birdRadius < pipe.x + pipeWidth &&
          (birdY - birdRadius < pipe.y || birdY + birdRadius > pipe.y + pipeGap)
        ) {
          return true;
        }
      }

return false;
    }

// Reset game variables for a new game
    function resetGame() {
      birdY = 250;
      birdVelocity = 0;
      gameScore = 0;
      pipes = [];
      generatePipes();
      intervalId = setInterval(update, 1000 / 60);
    }
  </script>
</body>
</html>
```