AI game creator

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

No:38160

←

Prev Next

→

Flappy bird
Developer User17254｜Date and time 24/1/23 1:50:33
Build time 19.375 sec｜Game capacity 3.914KB｜

Script

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

To use this implementation, save the code above into a file with an HTML extension (e.g., `flappy_bird.html`), and also make sure to have an image of a bird named `emozi_all/bird.png` in the same directory as the HTML file. You can then open the HTML file in a web browser (preferably on a smartphone) to play the Flappy Bird game. The game starts once you press the spacebar. You need to navigate the bird through the gaps between the walls by tapping the screen or pressing the spacebar to make the bird jump. If the bird hits a wall or goes off the top/bottom of the canvas, the game ends, and your score is displayed. You can then click the "OK" button on the alert to restart the game.

←

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>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

#game-canvas {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <canvas id="game-canvas" width="400" height="600"></canvas>

var bird = new Image();
      bird.src = "bird.png";
      var birdWidth = 40;
      var birdHeight = 30;
      var birdX = 50;
      var birdY = canvas.height / 2 - birdHeight / 2;
      var gravity = 1.5;
      var jumpPower = 25;

var walls = [];
      var wallWidth = 50;
      var wallHeight = 200;
      var wallGap = 150;
      var wallSpeed = 2;
      var maxWallInterval = 1500;
      var lastWallTime = 0;

var score = 0;
      var gameStarted = false;

function updateBird() {
        birdY += gravity;
        if (gameStarted && birdY <= canvas.height - birdHeight) {
          birdY -= jumpPower;
        }
      }

function createWall() {
        var wallX = canvas.width;
        var wallY = Math.floor(Math.random() * (canvas.height - wallHeight - wallGap));
        walls.push({ x: wallX, y: wallY });
        lastWallTime = new Date().getTime();
      }

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

ctx.drawImage(bird, birdX, birdY, birdWidth, birdHeight);

for (var i = 0; i < walls.length; i++) {
          ctx.fillStyle = "#00FF00";
          ctx.fillRect(walls[i].x, 0, wallWidth, walls[i].y);
          ctx.fillRect(walls[i].x, walls[i].y + wallHeight + wallGap, wallWidth, canvas.height - walls[i].y - wallHeight - wallGap);
        }

ctx.fillStyle = "#000000";
        ctx.font = "24px Arial";
        ctx.fillText("Score: " + score, 10, 30);
      }

function endGame() {
        clearInterval(gameInterval);
        alert("Game Over! Score: " + score);
        location.reload();
      }

function startGame() {
        gameStarted = true;
        createWall();
        var gameInterval = setInterval(function() {
          updateBird();
          updateWalls();
          draw();
        }, 20);
      }

document.addEventListener("keydown", function(event) {
        if (event.keyCode === 32 && !gameStarted) {
          startGame();
        }
      });

bird.onload = function() {
        draw();
      };
    }
  </script>
</body>
</html>
```

To use this implementation, save the code above into a file with an HTML extension (e.g., `flappy_bird.html`), and also make sure to have an image of a bird named `bird.png` in the same directory as the HTML file. You can then open the HTML file in a web browser (preferably on a smartphone) to play the Flappy Bird game.

The game starts once you press the spacebar. You need to navigate the bird through the gaps between the walls by tapping the screen or pressing the spacebar to make the bird jump. If the bird hits a wall or goes off the top/bottom of the canvas, the game ends, and your score is displayed. You can then click the "OK" button on the alert to restart the game.