Flappy bird with texture's game

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

No:36967

←

Prev Next

→

Flappy bird with texture
Developer User16885｜Date and time 24/1/19 16:56:35
Build time 15.312 sec｜Game capacity 3.72KB｜

Script

Sure, here is a basic implementation of Flappy Bird game using JavaScript and HTML5 canvas. Please note that this is a simplified version and there is still room for improvement.

To use this code, save it as a `.html` file and open it in a web browser. The game should start running, and you can control the bird's movement by tapping on the screen. Please note that you need to provide the image file "emozi_all/bird.png" in the same folder as the HTML file for the bird's texture. Additionally, this implementation may require additional improvements for better gameplay experience.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure, here is a basic implementation of Flappy Bird game using JavaScript and HTML5 canvas. Please note that this is a simplified version and there is still room for improvement.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Flappy Bird</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: #f8f8f8;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>

// Load bird image
    var birdImage = new Image();
    birdImage.src = "bird.png";

// Add event listener for touch/click
    canvas.addEventListener("touchstart", function() {
      bird.jump();
    });

// Bird object
    function Bird() {
      this.x = 50;
      this.y = canvas.height / 2;
      this.gravity = 0.2;
      this.velocity = 0;

this.draw = function() {
        context.drawImage(birdImage, this.x, this.y, 50, 50);
      };

this.update = function() {
        this.velocity += this.gravity;
        this.y += this.velocity;
        
        // Check collision with top/bottom of the canvas
        if (this.y + 50 > canvas.height) {
          this.y = canvas.height - 50;
        } else if (this.y < 0) {
          this.y = 0;
        }
      };

this.jump = function() {
        this.velocity = -5;
      };
    }

// Pipe object
    function Pipe() {
      this.x = canvas.width;
      this.y = Math.random() * (canvas.height - 200) + 100;
      this.width = 80;
      this.height = 280;

this.draw = function() {
        context.fillStyle = "#00FF00";
        context.fillRect(this.x, 0, this.width, this.y);
        context.fillRect(this.x, this.y + this.height, this.width, canvas.height - (this.y + this.height));
      };

this.update = function() {
        this.x -= gameSpeed;
        
        // Check collision with bird
        if (bird.x + 50 > this.x && bird.x < this.x + this.width && (bird.y < this.y || bird.y + 50 > this.y + this.height)) {
          gameOver();
        }

// Check if pipe moves off the screen
        if (this.x + this.width < 0) {
          score++;
          pipes.splice(0, 1);
        }
      };
    }

// Game over function
    function gameOver() {
      alert("Game Over! Score: " + score);
      pipes = [];
      bird = new Bird();
      score = 0;
      gameSpeed = 2;
    }

// Game loop
    function gameLoop() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      // Generate pipes
      if (pipes.length === 0 || pipes[pipes.length - 1].x + 200 < canvas.width) {
        pipes.push(new Pipe());
      }

// Update and draw pipes
      for (var i = 0; i < pipes.length; i++) {
        pipes[i].update();
        pipes[i].draw();
      }

// Update and draw bird
      bird.update();
      bird.draw();

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

requestAnimationFrame(gameLoop);
    }

// Start the game
    bird = new Bird();
    gameLoop();
  </script>
</body>
</html>
```

To use this code, save it as a `.html` file and open it in a web browser. The game should start running, and you can control the bird's movement by tapping on the screen.

Please note that you need to provide the image file "bird.png" in the same folder as the HTML file for the bird's texture. Additionally, this implementation may require additional improvements for better gameplay experience.