AI game creator

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

No:40193

←

Prev Next

→

Flappy bird in 2d
Developer Flappy｜Date and time 24/2/1 16:13:04
Build time 15.934 sec｜Game capacity 3.85KB｜

Script

Sure, here's a simplified version of Flappy Bird implemented as a single HTML file using JavaScript:

This code sets up a simple Flappy Bird game where the player controls a bird by pressing the space bar to jump. The objective is to guide the bird through the gaps between the pipes while avoiding collisions. The score is displayed on the top-right corner of the canvas, and the game ends when the bird collides with a pipe or hits the ground.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure, here's a simplified version of Flappy Bird implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas {
        border: solid 1px #000;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

// Bird object
      const bird = {
        x: 100,
        y: canvas.height / 2,
        radius: 20,
        speed: 0,
        draw: function() {
          context.beginPath();
          context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
          context.fillStyle = "#FF0000";
          context.fill();
          context.closePath();
        },
        jump: function() {
          this.speed = -10; // Negative speed to go upwards
        },
        update: function() {
          this.speed += gravity;
          this.y += this.speed;
          this.draw();
        },
      };

// Pipes object
      const pipes = {
        position: [],
        gap: 150,
        pipeWidth: 80,
        pipeHeight: 400,
        maxOffset: -200,
        draw: function() {
          for (let i = 0; i < this.position.length; i++) {
            const pipeX = this.position[i];
            const topPipeY = 0;
            const bottomPipeY = this.pipeHeight + this.gap;

// Top pipe
            context.fillStyle = "#00FF00";
            context.fillRect(pipeX, topPipeY, this.pipeWidth, this.pipeHeight);

// Bottom pipe
            context.fillRect(pipeX, bottomPipeY, this.pipeWidth, this.pipeHeight);
          }
        },
        update: function() {
          if (this.position.length === 0 || this.position[this.position.length - 1] < canvas.width - 200) {
            const pipeX = canvas.width;
            const pipeY = Math.floor(Math.random() * this.maxOffset);
            this.position.push(pipeX);
          }

for (let i = 0; i < this.position.length; i++) {
            this.position[i] -= 5;
            if (
              bird.x + bird.radius > this.position[i] &&
              bird.x - bird.radius < this.position[i] + this.pipeWidth &&
              (bird.y - bird.radius < 0 ||
                bird.y + bird.radius > this.pipeHeight + this.gap) ||
              bird.y + bird.radius > canvas.height
            ) {
              endGame();
              return;
            }

if (bird.x === this.position[i] + this.pipeWidth) {
              score++;
            }
          }
          this.draw();
        },
      };

// Game loop
      function gameLoop() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        pipes.update();
        bird.update();
        drawScore();
        requestAnimationFrame(gameLoop);
      }

// Event listeners
      document.addEventListener("keydown", function(event) {
        if (event.keyCode === 32) {
          bird.jump();
        }
      });

// Score display
      function drawScore() {
        context.font = "30px Arial";
        context.fillStyle = "#000";
        context.fillText("Score: " + score, canvas.width - 150, 50);
      }

// Game over
      function endGame() {
        alert("Game Over! Your score is: " + score);
        location.reload();
      }

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