AI game creator

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

No:40102

←

Prev Next

→

Flappy bird
Developer User17968｜Date and time 24/2/1 3:12:01
Build time 18.666 sec｜Game capacity 4.363KB｜

Script

Sure! Here's an example of a simplified implementation of Flappy Bird as a single HTML file using JavaScript and enclosed in script tags. Please note that this is a very basic version, and you may want to add more features and improve the gameplay.

To run this code, save it as a `.html` file and open it in a web browser. Make sure to have the `emozi_all/bird.png` and `emozi_apple.png` images in the same directory as the HTML file. This basic version of Flappy Bird will allow you to control the bird by tapping on the screen and try to navigate it through the pipes. The score is displayed at the top left corner, and the game will end if the bird collides with a pipe or the ground/ceiling. Enjoy playing!

←

Prev　Next

→ 　

Back　

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

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

```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="400" height="600"></canvas>

// Bird class
    class Bird {
      constructor() {
        this.x = 50;
        this.y = canvas.height / 2;
        this.velocityY = 0;
        this.gravity = 0.5;
      }

draw() {
        const birdImage = new Image();
        birdImage.src = 'bird.png';
        context.drawImage(birdImage, this.x, this.y, 50, 50);
      }

update() {
        this.velocityY += this.gravity;
        this.y += this.velocityY;
      }

fly() {
        this.velocityY = -10;
      }
    }

// Pipe class
    class Pipe {
      constructor() {
        this.x = canvas.width;
        this.y = Math.random() * (canvas.height - 200) + 100;
        this.width = 80;
        this.height = 300;
      }

draw() {
        const pipeImage = new Image();
        pipeImage.src = 'pipe.png';
        context.drawImage(pipeImage, this.x, 0, this.width, this.y);
        context.drawImage(pipeImage, this.x, this.y + this.height, this.width, canvas.height - (this.y + this.height));
      }

update() {
        this.x -= 5;
      }
    }

// Helper function to check collision between bird and pipes
    function checkCollision() {
      // Check collision with top and bottom pipes
      for (var i = 0; i < pipes.length; i++) {
        if (
          bird.x + birdImage.width >= pipes[i].x &&
          bird.x <= pipes[i].x + pipes[i].width &&
          (bird.y <= pipes[i].y || bird.y + birdImage.height >= pipes[i].y + pipes[i].height)
        ) {
          gameOver();
        }
      }

// Check collision with ground and ceiling
      if (bird.y + birdImage.height >= canvas.height || bird.y <= 0) {
        gameOver();
      }
    }

// Game over function
    function gameOver() {
      alert('Game Over! Your score: ' + score);
      location.reload();
    }

// Main game loop
    function gameLoop() {
      context.clearRect(0, 0, canvas.width, canvas.height);

// Update and draw bird
      bird.update();
      bird.draw();

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

// Check if the bird passed a pipe successfully
        if (pipes[i].x + pipes[i].width < bird.x) {
          score++;
          pipes.splice(i, 1);
        }
      }

// Add new pipe every 100 frames
      if (frameCount % 100 === 0) {
        pipes.push(new Pipe());
      }

// Check collision
      checkCollision();

// Display score
      context.fillStyle = 'black';
      context.font = '24px Arial';
      context.fillText('Score: ' + score, 10, 30);

// Increment frame count
      frameCount++;

// Restart the game loop
      requestAnimationFrame(gameLoop);
    }

// Initialize game
    function init() {
      canvas = document.getElementById('gameCanvas');
      context = canvas.getContext('2d');
      score = 0;
      frameCount = 0;

// Create bird object
      bird = new Bird();

// Create array of pipes
      pipes = [];

// Add event listener to fly bird on touch
      document.addEventListener('touchstart', function () {
        bird.fly();
      });

// Start the game loop
      gameLoop();
    }

// Call init function on page load
    window.onload = init;
  </script>
</body>
</html>
```

To run this code, save it as a `.html` file and open it in a web browser. Make sure to have the `bird.png` and `pipe.png` images in the same directory as the HTML file. This basic version of Flappy Bird will allow you to control the bird by tapping on the screen and try to navigate it through the pipes. The score is displayed at the top left corner, and the game will end if the bird collides with a pipe or the ground/ceiling. Enjoy playing!