AI game creator

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

No:33274

←

Prev Next

→

Flappy bird
Developer User15718｜Date and time 24/1/3 10:28:43
Build time 33.387 sec｜Game capacity 4.084KB｜

Script

Sure! Here's a simple implementation of the game Flappy Bird using HTML and JavaScript, enclosed in script tags for a single HTML file:

To play the game, simply save the above code into an HTML file (e.g., `flappybird.html`) and open it in a web browser. The game will be playable on smartphones as well. The bird can be controlled by tapping/clicking and it should avoid hitting the green obstacles. The score will be displayed at the top-left corner, and the game will end if the bird hits an obstacle or goes off the screen. You can play the game multiple times, as it will restart automatically after game over.

←

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 game Flappy Bird using HTML and JavaScript, enclosed in script tags for a single HTML file:

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas {
        border: 1px solid #000;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="game" width="800" height="600"></canvas>
    <script>
      const canvas = document.getElementById("game");
      const ctx = canvas.getContext("2d");

// Game variables
      let bird;
      let obstacles;
      let score;

// Game initialization
      function gameStart() {
        bird = { x: 100, y: canvas.height / 2, speedY: 0, size: 20 };
        obstacles = [{ x: canvas.width, y: 0, width: 50, height: randomHeight() }];
        score = 0;
        document.addEventListener("keydown", birdJump);
        canvas.addEventListener("click", birdJump);
        gameLoop();
      }

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

// Game update
      function update() {
        bird.y += bird.speedY;
        bird.speedY += 0.5;

// Check for collision with obstacles
        for (let i = 0; i < obstacles.length; i++) {
          const obs = obstacles[i];

// Player loses if bird hits an obstacle
          if (
            bird.x + bird.size > obs.x &&
            bird.x < obs.x + obs.width &&
            bird.y + bird.size > obs.y &&
            bird.y < obs.y + obs.height
          ) {
            gameEnd();
            return;
          }

obs.x -= 2;

// Increase score when bird passes an obstacle
          if (obs.x + obs.width < bird.x && !obs.passed) {
            score++;
            obs.passed = true;
          }

// Remove obstacle when it goes off the screen
          if (obs.x + obs.width < 0) {
            obstacles.splice(i, 1);
            i--;
          }
        }

// Generate new obstacles
        if (obstacles[obstacles.length - 1].x < canvas.width - 200) {
          obstacles.push({
            x: canvas.width,
            y: 0,
            width: 50,
            height: randomHeight(),
            passed: false,
          });
        }

// Check for collision with top/bottom of the screen
        if (bird.y + bird.size > canvas.height || bird.y < 0) {
          gameEnd();
          return;
        }
      }

// Game rendering
      function render() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Render bird
        ctx.fillStyle = "yellow";
        ctx.fillRect(bird.x, bird.y, bird.size, bird.size);

// Render obstacles
        ctx.fillStyle = "green";
        for (const obs of obstacles) {
          ctx.fillRect(obs.x, obs.y, obs.width, obs.height);
        }

// Render score
        ctx.fillStyle = "black";
        ctx.font = "24px Arial";
        ctx.fillText(`Score: ${score}`, 10, 30);
      }

// Event listener for bird jump
      function birdJump() {
        bird.speedY = -8;
      }

// Generate a random height for obstacles
      function randomHeight() {
        return Math.floor(Math.random() * 400) + 100;
      }

// Game end
      function gameEnd() {
        document.removeEventListener("keydown", birdJump);
        canvas.removeEventListener("click", birdJump);
        alert(`Game Over! Your score: ${score}`);
        gameStart(); // Restart the game
      }

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