AI game creator

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

No:22007

←

Prev Next

→

Flappy bird
Developer User10164｜Date and time 23/10/19 22:34:48
Build time 81.366 sec｜Game capacity 3.145KB｜

Script

Note: This is a basic implementation of Flappy Bird using JavaScript within an HTML file. However, using pictograms is not possible within the given constraints of a single HTML file and enclosed in script tags.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flappy Bird</title>
    <style>
      canvas {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="600"></canvas>

// Pictograms
      var birdImage = new Image();
      birdImage.src = 'bird.png';
      var pipeImage = new Image();
      pipeImage.src = 'pipe.png';

// Game variables
      var bird = { x: 100, y: 200, width: 34, height: 24 };
      var gravity = 1;
      var velocity = 0;
      var pipes = [{ x: canvas.width, y: 0, width: 52, height: 320 }];

// Game functions
      function drawBird() {
        context.drawImage(birdImage, bird.x, bird.y, bird.width, bird.height);
      }

function drawPipes() {
        for (var i = 0; i < pipes.length; i++) {
          context.drawImage(pipeImage, pipes[i].x, pipes[i].y, pipes[i].width, pipes[i].height);
        }
      }

function updateBird() {
        velocity += gravity;
        bird.y += velocity;
      }

function updatePipes() {
        for (var i = 0; i < pipes.length; i++) {
          pipes[i].x -= 2;

if (pipes[i].x + pipes[i].width <= 0) {
            pipes.splice(i, 1);
          }
        }

if (pipes[pipes.length - 1].x + pipes[pipes.length - 1].width < canvas.width - 200) {
          var pipeGap = 100;
          var pipeY = Math.random() * (canvas.height - pipeGap * 2) + pipeGap;
          pipes.push({ x: canvas.width, y: pipeY, width: 52, height: 320 });
        }
      }

function collisionDetection() {
        for (var i = 0; i < pipes.length; i++) {
          if (bird.x + bird.width >= pipes[i].x &&
              bird.x <= pipes[i].x + pipes[i].width &&
              (bird.y <= pipes[i].y || bird.y + bird.height >= pipes[i].y + pipes[i].height)) {
            gameOver();
          }
        }

if (bird.y + bird.height >= canvas.height || bird.y <= 0) {
          gameOver();
        }
      }

function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawBird();
        drawPipes();
        collisionDetection();
        updateBird();
        updatePipes();
        requestAnimationFrame(draw);
      }

function gameOver() {
        // Display game over message or perform desired actions
        alert('Game Over');
        location.reload(); // Reload the page to restart the game
      }

// Event listeners
      document.addEventListener('keydown', function(e) {
        if (e.keyCode === 32 || e.keyCode === 38) { // Spacebar or Up arrow key
          velocity = -10;
        }
      });

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