Flappy Bird game that you can move around in's game

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

No:22872

←

Prev Next

→

Flappy Bird game that you can move around in
Developer User10392｜Date and time 23/10/26 6:47:03
Build time 64.26 sec｜Game capacity 6.988KB｜

Script

Sure! Here's an implementation of a Flappy Bird game that you can play and move around on a smartphone. The game uses pictograms for a better visual experience. Note that this implementation is simplified and may not include all the features of the original Flappy Bird game.

To use this implementation, save the HTML code in a file with a .html extension. You'll also need to have the corresponding image files (bird.png, pipe_top.png, pipe_bottom.png) in the same directory as the HTML file. This should give you a playable Flappy Bird game where you can move around on a smartphone.

←

Prev　Next

→ 　

Back　

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

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

```
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird Game</title>
  <style>
    canvas {
      background-color: #70c5ce;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>

// Pictograms
    var birdImage = new Image();
    birdImage.src = "bird.png";
    var pipeTopImage = new Image();
    pipeTopImage.src = "pipe_top.png";
    var pipeBottomImage = new Image();
    pipeBottomImage.src = "pipe_bottom.png";

// Bird class
    function Bird(x, y) {
      this.x = x;
      this.y = y;
      this.velocity = 0;
      this.width = 64;
      this.height = 64;
    }

Bird.prototype.draw = function() {
      context.drawImage(birdImage, this.x, this.y, this.width, this.height);
    };

Bird.prototype.update = function() {
      this.velocity += gravity;
      this.y += this.velocity;
    };

Bird.prototype.jump = function() {
      this.velocity -= jumpForce;
    };

// Pipe class
    function Pipe(x) {
      this.x = x;
      this.y = 0;
      this.width = 80;
      this.height = Math.floor(Math.random() * 200) + 100;
    }

Pipe.prototype.draw = function() {
      context.drawImage(pipeTopImage, this.x, this.y, this.width, this.height);
      context.drawImage(pipeBottomImage, this.x, this.height + 150, this.width, canvas.height - this.height - 150);
    };

Pipe.prototype.update = function() {
      this.x -= gameSpeed;
    };

// Initialize the game
    function startGame() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");

bird = new Bird(50, canvas.height / 2);

// Event listener for jumping
      canvas.addEventListener('click', function() {
        bird.jump();
      });

requestAnimationFrame(update);
    }

// Update game frames
    function update() {
      context.clearRect(0, 0, canvas.width, canvas.height);

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

if (frames % 100 === 0) {
        pipes.push(new Pipe(canvas.width));
      }

for (var i = 0; i < pipes.length; i++) {
        var p = pipes[i];

if (bird.x < p.x + p.width && bird.x + bird.width > p.x && (bird.y < p.height || bird.y + bird.height > p.height + 150)) {
          // Collision detected, game over
          return gameOver();
        }

if (p.x + p.width === 0) {
          // Pipe passed, increase score or perform other actions
        }

p.update();
        p.draw();
      }

requestAnimationFrame(update);
    }

// Game over handler
    function gameOver() {
      // Handle game over logic here
      alert("Game over!");
      location.reload();
    }

startGame();
  </script>
</body>
</html>
```html
<!DOCTYPE html>
<html>
  <head>
    <title>Flappy Bird</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// Initialize the game
      window.onload = function() {
        canvas = document.getElementById("gameCanvas");
        canvasContext = canvas.getContext("2d");

// Add event listener for mouse/touch input
        canvas.addEventListener("mousedown", flapBird);
        canvas.addEventListener("touchstart", flapBird);

// Start the game loop
        setInterval(updateGame, 16);
      };

// Update game logic
      function updateGame() {
        moveBird();
        moveObstacle();
        detectCollision();
        drawGame();
      }

// Move the bird
      function moveBird() {
        birdY += birdVelocityY;
        birdVelocityY += gravity;
      }

// Move the obstacle
      function moveObstacle() {
        obstacleX -= 2; // Adjust the obstacle speed here

if (obstacleX + obstacleWidth < 0) {
          // Respawn the obstacle when it goes off-screen
          obstacleX = 480;
          score++;
        }
      }

// Detect collision between the bird and obstacle
      function detectCollision() {
        if (
          birdY < 0 ||
          birdY + 20 > canvas.height ||
          (birdX + 20 > obstacleX &&
            birdX < obstacleX + obstacleWidth &&
            (birdY < gapHeight || birdY + 20 > gapHeight + gapWidth))
        ) {
          // Game over, reset the bird and obstacle positions
          birdX = 50;
          birdY = 150;
          birdVelocityY = 0;
          obstacleX = 480;
          score = 0;

// Show an alert indicating game over (can be replaced with custom game over screen)
          alert("Game Over!");
        }
      }

// Draw the game
      function drawGame() {
        // Clear canvas
        canvasContext.fillStyle = "#87CEEB"; // Set background color
        canvasContext.fillRect(0, 0, canvas.width, canvas.height);

// Draw bird
        canvasContext.fillStyle = "yellow"; // Set bird color
        canvasContext.fillRect(birdX, birdY, 20, 20);

// Draw obstacle
        canvasContext.fillStyle = "#8B4513"; // Set obstacle color
        canvasContext.fillRect(
          obstacleX,
          0,
          obstacleWidth,
          gapHeight
        );
        canvasContext.fillRect(
          obstacleX,
          gapHeight + gapWidth,
          obstacleWidth,
          canvas.height - gapHeight - gapWidth
        );

// Display score
        canvasContext.fillStyle = "black"; // Set text color
        canvasContext.fillText("Score: " + score, 10, 20);
      }

// Flap the bird
      function flapBird() {
        birdVelocityY = -8; // Adjust flap strength here
      }
    </script>
  </body>
</html>
```