AI game creator

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

No:37136

←

Prev Next

→

flappy bird
Developer User17003｜Date and time 24/1/20 13:40:01
Build time 9.993 sec｜Game capacity 3.204KB｜

Script

Sure, here's an example of a simplified version of the Flappy Bird game implemented as a single HTML file with JavaScript:

This code creates a canvas element for the game, defines the game's objects (bird and pipe), handles the game loop, collision detection, and game over condition. The bird can be controlled by pressing the Space key to make it jump. The score is displayed in an alert box when the game is over. Please note that this is a simplified implementation of the Flappy Bird game, and there might be additional features and improvements that can be made.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a simplified version of the Flappy Bird game implemented as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <script>
    // Flappy Bird game logic

const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    document.body.appendChild(canvas);

const width = window.innerWidth;
    const height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;

const gravity = 0.5;
    const jumpHeight = -10;
    let score = 0;

// Bird object
    const bird = {
      x: 50,
      y: height / 2,
      velocity: 0,
      radius: 20,
      jump() {
        this.velocity = jumpHeight;
      },
      update() {
        this.velocity += gravity;
        this.y += this.velocity;
      },
      draw() {
        context.beginPath();
        context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        context.fillStyle = '#FF0000';
        context.fill();
        context.closePath();
      },
      checkCollision(pipe) {
        if (
          this.x + this.radius > pipe.x &&
          this.x - this.radius < pipe.x + pipe.width &&
          this.y + this.radius > pipe.y &&
          this.y - this.radius < pipe.y + pipe.height
        ) {
          return true;
        }
        return false;
      },
    };

// Pipe object
    const pipe = {
      width: 100,
      height: height / 2,
      x: width,
      y: Math.random() * (height - height / 2),
      speed: 6,
      draw() {
        context.beginPath();
        context.rect(this.x, this.y, this.width, this.height);
        context.fillStyle = '#00FF00';
        context.fill();
        context.closePath();
      },
      update() {
        this.x -= this.speed;
      },
    };

function gameLoop() {
      context.clearRect(0, 0, width, height);

bird.update();
      bird.draw();

pipe.update();
      pipe.draw();

if (bird.checkCollision(pipe)) {
        gameOver();
        return;
      }

if (pipe.x + pipe.width < 0) {
        pipe.x = width;
        pipe.y = Math.random() * (height - height / 2);
        score++;
      }

requestAnimationFrame(gameLoop);
    }

function gameOver() {
      alert(`Game Over! Your score: ${score}`);
      resetGame();
    }

function resetGame() {
      score = 0;
      bird.y = height / 2;
      bird.velocity = 0;
      pipe.x = width;
      pipe.y = Math.random() * (height - height / 2);
    }

document.addEventListener('keydown', function (event) {
      if (event.code === 'Space') {
        bird.jump();
      }
    });

gameLoop();

</script>
</body>
</html>
```

This code creates a canvas element for the game, defines the game's objects (bird and pipe), handles the game loop, collision detection, and game over condition. The bird can be controlled by pressing the Space key to make it jump. The score is displayed in an alert box when the game is over.

Please note that this is a simplified implementation of the Flappy Bird game, and there might be additional features and improvements that can be made.