AI game creator

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

No:27823

←

Prev Next

→

Flappy bird
Developer User13856｜Date and time 23/12/9 8:17:42
Build time 22.489 sec｜Game capacity 3.638KB｜

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 {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <script>
    // Setup canvas
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    document.body.appendChild(canvas);

// Game variables
    const birdSize = 50;
    const birdX = 100;
    let birdY = canvas.height / 2;
    const gravity = 1;
    let velocity = 0;
    const jumpStrength = 15;
    const gapHeight = 200;
    const gapWidth = 300;
    const pipeWidth = 80;
    let score = 0;

// Pictograms
    const birdImage = new Image();
    birdImage.src = "bird.png";
    const pipeImage = new Image();
    pipeImage.src = "pipe.png";
    const backgroundImage = new Image();
    backgroundImage.src = "background.png";

// Game state
    let gameStarted = false;
    let gameOver = false;

// Event listeners
    document.addEventListener("keydown", function (event) {
      if (!gameOver && (event.key === "Space" || event.key === "ArrowUp")) {
        gameStarted = true;
        velocity -= jumpStrength;
      }
    });

// Update game logic
    function update() {
      if (gameStarted && !gameOver) {
        // Apply gravity and update bird position
        velocity += gravity;
        birdY += velocity;

// Check collision with upper and lower boundaries
        if (birdY < 0 || birdY > canvas.height - birdSize) {
          gameOver = true;
        }

// Check collision with pipes
        for (let i = 0; i < pipes.length; i++) {
          const pipe = pipes[i];
          if (
            birdX + birdSize > pipe.x &&
            birdX < pipe.x + pipeWidth &&
            (birdY < pipe.y || birdY + birdSize > pipe.y + gapHeight)
          ) {
            gameOver = true;
          }

// Update pipe position
          pipe.x -= 5;

// Remove pipes that are off the screen
          if (pipe.x + pipeWidth < 0) {
            pipes.splice(i, 1);
            i--;
          }

// Increase score when passing through a pipe
          if (pipe.x + pipeWidth === birdX) {
            score++;
          }
        }

// Generate new pipes
        if (pipes.length === 0 || pipes[pipes.length - 1].x < canvas.width - gapWidth) {
          const pipeY = Math.floor(Math.random() * (canvas.height - gapHeight));
          pipes.push({ x: canvas.width, y: pipeY });
        }
      }
    }

// Render game objects
    function draw() {
      // Clear canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw background
      context.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);

// Draw bird
      context.drawImage(birdImage, birdX, birdY, birdSize, birdSize);

// Draw pipes
      for (let pipe of pipes) {
        context.drawImage(pipeImage, pipe.x, pipe.y, pipeWidth, canvas.height);
      }

// Draw score
      context.font = "30px Arial";
      context.fillStyle = "white";
      context.fillText("Score: " + score, 20, 40);

// Game over message
      if (gameOver) {
        context.font = "50px Arial";
        context.fillStyle = "red";
        context.fillText("Game Over", canvas.width / 2 - 150, canvas.height / 2);
      }
    }

// Game loop
    function loop() {
      update();
      draw();

if (!gameOver) {
        requestAnimationFrame(loop);
      }
    }

// Array to store pipes
    const pipes = [];

// Start game loop
    loop();
  </script>
</body>

</html>