AI game creator

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

No:16484

←

Prev Next

→

Flappy bird
Developer User7328｜Date and time 23/9/18 15:49:21
Build time 30.675 sec｜Game capacity 3.056KB｜

Script

Sure! Here's a simple implementation of the Flappy Bird game using HTML, CSS, and JavaScript:

Please note that you need to replace the `emozi_all/bird.png`, `emozi_chicken.png`, and `emozi_rabbit.png` with actual image files for the bird and pipes to display properly. You can adjust the canvas dimensions, pipe dimensions, and other variables to suit your needs. Save the code in a single HTML file and open it in a web browser to play the Flappy Bird game. Have fun!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the Flappy Bird game using HTML, CSS, and JavaScript:

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

// Game canvas
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

// Bird
    const bird = new Image();
    bird.src = 'bird.png';
    let birdY = 200;
    let birdDY = 0;
    const birdWidth = 50;
    const birdHeight = 50;

// Pipes
    const pipeNorth = new Image();
    pipeNorth.src = 'pipeNorth.png';
    const pipeSouth = new Image();
    pipeSouth.src = 'pipeSouth.png';
    const pipeWidth = 70;
    const pipeHeight = 400;
    const pipeGap = 200;
    const pipeDistance = 300;
    const pipes = [];
    pipes[0] = {
      x: canvas.width,
      y: 0
    };

// Game variables
    let score = 0;
    let isGameOver = false;

// Event listeners
    document.addEventListener('keydown', flap);

// Game loop
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw bird
      ctx.drawImage(bird, 50, birdY, birdWidth, birdHeight);

// Draw pipes
      for (let i = 0; i < pipes.length; i++) {
        ctx.drawImage(pipeNorth, pipes[i].x, pipes[i].y, pipeWidth, pipeHeight);
        ctx.drawImage(pipeSouth, pipes[i].x, pipes[i].y + pipeHeight + pipeGap, pipeWidth, pipeHeight);

// Move pipes
        pipes[i].x -= 2;

// Check collision
        if (
          (birdY < pipes[i].y + pipeHeight || birdY + birdHeight > pipes[i].y + pipeHeight + pipeGap) &&
          pipes[i].x < birdWidth + 50 &&
          pipes[i].x + pipeWidth > 50
        ) {
          isGameOver = true;
        }

// Update score when passing a pipe
        if (pipes[i].x === 50) {
          score++;
        }

// Remove offscreen pipes
        if (pipes[i].x === 50 - pipeWidth) {
          pipes.shift();
        }
      }

// Draw score
      ctx.font = '22px Arial';
      ctx.fillStyle = '#000';
      ctx.fillText('Score: ' + score, 10, 30);

// Game over
      if (isGameOver) {
        ctx.fillText('Game Over!', 150, 250);
        return;
      }

// Bird gravity
      birdDY += 1;
      birdY += birdDY;

requestAnimationFrame(draw);
    }

// Flap bird on keydown
    function flap(event) {
      if (event.keyCode === 32) {
        birdDY = -12;
      }
    }

// Start the game
    draw();

</script>
</body>
</html>
```

Please note that you need to replace the `bird.png`, `pipeNorth.png`, and `pipeSouth.png` with actual image files for the bird and pipes to display properly. You can adjust the canvas dimensions, pipe dimensions, and other variables to suit your needs. Save the code in a single HTML file and open it in a web browser to play the Flappy Bird game. Have fun!