AI game creator

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

No:22505

←

Prev Next

→

Flappy bird
Developer User10375｜Date and time 23/10/22 23:41:51
Build time 44.919 sec｜Game capacity 2.412KB｜

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</title>
  <style>
    canvas {
      background: #f8f8f8;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
<script>
  // Game Constants
  const GAME_WIDTH = 320;
  const GAME_HEIGHT = 480;
  const GRAVITY = 0.5;
  const JUMP_STRENGTH = 8;

// Create the canvas
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  canvas.width = GAME_WIDTH;
  canvas.height = GAME_HEIGHT;
  document.body.appendChild(canvas);

// Pictograms
  const birdImage = new Image();
  birdImage.src = "bird.png";
  const pipeNorthImage = new Image();
  pipeNorthImage.src = "pipeNorth.png";
  const pipeSouthImage = new Image();
  pipeSouthImage.src = "pipeSouth.png";

// Game Variables
  let birdX = 50;
  let birdY = 150;
  let velocityY = 0;
  let score = 0;
  let isGameOver = false;

// Handle touch events
  function jump() {
    if (!isGameOver) {
      velocityY -= JUMP_STRENGTH;
    }
  }
  document.addEventListener("touchstart", jump);

// Game Loop
  function gameLoop() {
    ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);

// Bird
    ctx.drawImage(birdImage, birdX, birdY);

if (!isGameOver) {
      // Move bird
      birdY += velocityY;
      velocityY += GRAVITY;

// Pipes
      const pipeGap = 100;
      const pipeWidth = 52;
      const pipeHeight = 242;
      const pipeX = GAME_WIDTH - 50;

const pipeNorthY = Math.floor(Math.random() * (GAME_HEIGHT - pipeHeight)) - pipeHeight;
      const pipeSouthY = pipeNorthY + pipeHeight + pipeGap;

ctx.drawImage(pipeNorthImage, pipeX, pipeNorthY);
      ctx.drawImage(pipeSouthImage, pipeX, pipeSouthY);

// Collision detection
      if (
        (birdX + birdImage.width >= pipeX && birdX <= pipeX + pipeWidth) &&
        (birdY <= pipeNorthY + pipeHeight || birdY + birdImage.height >= pipeSouthY)
      ) {
        isGameOver = true;
      }

// Update score
      if (birdX === pipeX + pipeWidth) {
        score++;
      }
    }

// Game Over
    if (birdY >= GAME_HEIGHT || birdY + birdImage.height <= 0) {
      isGameOver = true;
    }

// Display Score
    ctx.fillStyle = "#000";
    ctx.font = "20px Arial";
    ctx.fillText("Score: " + score, 10, 30);

if (!isGameOver) {
      requestAnimationFrame(gameLoop);
    }
  }

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