AI game creator

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

No:36849

150

←

Prev Next

→

Flappy bird
Developer User16885｜Date and time 24/1/18 19:28:16
Build time 16.828 sec｜Game capacity 3.151KB｜

Script

Sure! Here's a simple implementation of the Flappy Bird game using HTML, CSS, and JavaScript. The game will run in a single HTML file and can be played on a smartphone.

To play the game, you would need to provide the `emozi_all/play.png` and `emozi_apple.png` images and save them in the same directory as the HTML file. You can customize the game further if desired.

←

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. The game will run in a single HTML file and can be played on a smartphone.

```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="320" height="480"></canvas>

const birdImage = new Image();
    birdImage.src = 'bird.png';

const pipeImage = new Image();
    pipeImage.src = 'pipe.png';

const bird = {
      x: 50,
      y: canvas.height / 2,
      width: 34,
      height: 24,
      velocity: 0,
      gravity: 0.7,
    };

const pipes = [
      { x: canvas.width, y: 0, width: 52, height: 320, passed: false },
    ];

let score = 0;

function drawBird() {
      context.drawImage(birdImage, bird.x, bird.y, bird.width, bird.height);
    }

function drawPipes() {
      pipes.forEach((pipe) => {
        context.drawImage(pipeImage, pipe.x, pipe.y, pipe.width, pipe.height);
      });
    }

function drawScore() {
      context.fillStyle = '#000';
      context.font = '20px Arial';
      context.fillText(`Score: ${score}`, 10, 30);
    }

function updateBird() {
      bird.velocity += bird.gravity;
      bird.y += bird.velocity;
    }

function updatePipes() {
      if (pipes[0].x + pipes[0].width < 0) {
        pipes.shift();
        score++;
      }

pipes.forEach((pipe) => {
        pipe.x -= 2;

if (bird.x + bird.width > pipe.x && bird.x < pipe.x + pipe.width) {
          if (bird.y < pipe.y + pipe.height && bird.y + bird.height > pipe.y) {
            gameOver();
          }
        }

if (pipe.x + pipe.width == bird.x && !pipe.passed) {
          pipe.passed = true;
        }
      });

if (pipes[pipes.length - 1].x + pipes[pipes.length - 1].width < canvas.width - 100) {
        const pipeGap = 100;
        const maxYOffset = 200;
        const yOffset = Math.floor(Math.random() * maxYOffset) - maxYOffset / 2;
        pipes.push({ x: canvas.width, y: pipeGap / 2 + yOffset, width: 52, height: 320, passed: false });
      }
    }

function checkCollision() {
      if (bird.y + bird.height > canvas.height || bird.y < 0) {
        gameOver();
      }
    }

function gameOver() {
      alert(`Game Over! Score: ${score}`);
      location.reload();
    }

function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);

drawBird();
      drawPipes();
      drawScore();

updateBird();
      updatePipes();
      checkCollision();

requestAnimationFrame(draw);
    }

document.addEventListener('touchstart', () => {
      bird.velocity = -10;
    });

birdImage.onload = draw;
  </script>
</body>
</html>
```

To play the game, you would need to provide the `bird.png` and `pipe.png` images and save them in the same directory as the HTML file. You can customize the game further if desired.