AI game creator

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

No:50048

←

Prev Next

→

Flappy bird
Developer User21222｜Date and time 24/3/7 14:34:42
Build time 8.444 sec｜Game capacity 2.072KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="500"></canvas>
  
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    let birdX = 100;
    let birdY = 250;
    let gravity = 0.5;
    
    let pipe1X = 800;
    let pipe1Y = Math.random() * 300 + 100;
    let pipe2X = 1100;
    let pipe2Y = Math.random() * 300 + 100;
    
    let score = 0;
    
    function drawBird() {
      ctx.fillStyle = 'yellow';
      ctx.fillRect(birdX, birdY, 20, 20);
    }
    
    function drawPipe(x, y) {
      ctx.fillStyle = 'green';
      ctx.fillRect(x, y, 50, 200);
    }
    
    function drawScore() {
      ctx.font = '24px Arial';
      ctx.fillStyle = 'black';
      ctx.fillText('Score: ' + score, 20, 30);
    }
    
    function checkCollision() {
      if (birdY < 0 || birdY > 500 || (birdX + 20 > pipe1X && birdX < pipe1X + 50 && (birdY < pipe1Y || birdY + 20 > pipe1Y + 200)) || (birdX + 20 > pipe2X && birdX < pipe2X + 50 && (birdY < pipe2Y || birdY + 20 > pipe2Y + 200))) {
        alert('Game Over! Your score is: ' + score);
        location.reload();
      }
    }
    
    function updateGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      birdY += gravity;
      
      pipe1X -= 2;
      pipe2X -= 2;
      
      if (pipe1X < -50) {
        pipe1X = 800;
        pipe1Y = Math.random() * 300 + 100;
        score++;
      }
      
      if (pipe2X < -50) {
        pipe2X = 800;
        pipe2Y = Math.random() * 300 + 100;
        score++;
      }
      
      drawBird();
      drawPipe(pipe1X, pipe1Y);
      drawPipe(pipe2X, pipe2Y);
      drawScore();
      
      checkCollision();
      
      requestAnimationFrame(updateGame);
    }
    
    document.addEventListener('keydown', function(event) {
      if (event.key === ' ') {
        birdY -= 30;
      }
    });
    
    updateGame();
  </script>
</body>
</html>