AI game creator

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

No:40252

←

Prev Next

→

Flappy bird
Developer User18048｜Date and time 24/2/2 3:34:21
Build time 17.704 sec｜Game capacity 3.762KB｜

Script

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

Score: 0

To play the game, you can save the above code to a file with an `.html` extension, and then open it in any web browser. Use the Space key to make the bird jump and avoid crashing into the pipes. The goal is to achieve the highest score possible. Please note that this is a simplified version of the Flappy Bird game, and it may not include all the features and mechanics present in the original 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 game Flappy Bird using HTML, CSS, and JavaScript, enclosed within a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Flappy Bird</title>
  <style>
    #canvas {
      border: 1px solid #000;
      background-color: #f8f8f8;
      display: block;
      margin: 0 auto;
    }
    
    .score {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <div class="score">Score: <span id="score">0</span></div>

// Bird Object
    function Bird() {
      this.x = canvas.width / 2;
      this.y = canvas.height / 2;
      this.speedY = 0;

this.draw = function() {
        ctx.fillStyle = '#f44336';
        ctx.fillRect(this.x, this.y, 25, 25);
      };

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

this.jump = function() {
        this.speedY = -jumpHeight;
      };

this.crashWith = function(pipe) {
        return !(this.x + 25 < pipe.x || this.x > pipe.x + pipe.width || this.y + 25 < pipe.y || this.y > pipe.y + pipe.height);
      };
    }

// Pipe Object
    function Pipe() {
      this.x = canvas.width;
      this.y = Math.floor(Math.random() * (canvas.height - 100));
      this.width = 50;
      this.height = Math.floor(Math.random() * 200) + 100;

this.draw = function() {
        ctx.fillStyle = '#4caf50';
        ctx.fillRect(this.x, this.y, this.width, this.height);
      };

this.update = function() {
        this.x -= 2;
      };
    }

// Game Functions
    function startGame() {
      bird = new Bird();
      pipes = [];
      score = 0;
      clearInterval(gameLoopInterval);

gameLoopInterval = setInterval(function() {
        updateGame();
        drawGame();
      }, 20);

document.addEventListener('keydown', function(event) {
        if (event.keyCode === 32) { // Space key
          bird.jump();
        }
      });
    }

function updateGame() {
      bird.update();

if (pipes.length === 0 || pipes[pipes.length - 1].x < canvas.width - 200) {
        if (Math.random() > 0.5) {
          pipes.push(new Pipe());
        }
      }

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

if (bird.crashWith(pipes[i])) {
          gameOver();
          return;
        }

if (pipes[i].x + pipes[i].width < 0) {
          pipes.splice(i, 1);
          i--;
          score++;
          scoreSpan.textContent = score;
        }
      }
    }

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

for (var i = 0; i < pipes.length; i++) {
        pipes[i].draw();
      }

bird.draw();
    }

function gameOver() {
      clearInterval(gameLoopInterval);
      alert('Game Over! Your Score: ' + score);
      startGame();
    }

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

Please note that this is a simplified version of the Flappy Bird game, and it may not include all the features and mechanics present in the original game.