AI game creator

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

No:34075

←

Prev Next

→

Flappy bird
Developer User16032｜Date and time 24/1/8 4:26:18
Build time 33.119 sec｜Game capacity 3.322KB｜

Script

Aquí está el código para el juego Flappy Bird en un solo archivo HTML:

Este es el código completo del juego Flappy Bird implementado en un solo archivo HTML. Para jugar, abre el archivo HTML en cualquier navegador (preferiblemente en un smartphone) y toca cualquier tecla para hacer que el pajaro salte. El objetivo es evitar los tubos verdes y acumular la mayor puntuación posible pasando por los espacios entre los tubos. Espero que esto te sea útil para disfrutar del juego Flappy Bird. ¡Diviértete jugando!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Aquí está el código para el juego Flappy Bird en un solo archivo HTML:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="500"></canvas>
  <script>
    // Variables del juego
    var canvas, context;
    var bird;
    var pipes = [];
    var score = 0;
  
    // Objeto Bird
    function Bird() {
      this.x = 50;
      this.y = canvas.height/2;
      this.velocity = 0;
      this.gravity = 0.5;
  
      this.draw = function() {
        context.fillStyle = "yellow";
        context.fillRect(this.x, this.y, 40, 30);
      }
  
      this.update = function() {
        this.velocity += this.gravity;
        this.y += this.velocity;
  
        if (this.y > canvas.height) {
          this.y = canvas.height;
          this.velocity = 0;
        }
  
        if (this.y < 0) {
          this.y = 0;
          this.velocity = 0;
        }
      }
  
      this.flap = function() {
        this.velocity = -9;
      }
    }
  
    // Objeto Pipe
    function Pipe() {
      this.x = canvas.width;
      this.y = Math.random() * (canvas.height - 200) + 100;
      this.width = 80;
      this.height = canvas.height - this.y;
  
      this.draw = function() {
        context.fillStyle = "green";
        context.fillRect(this.x, 0, this.width, this.y);
        context.fillRect(this.x, this.y + 200, this.width, this.height);
      }
  
      this.update = function() {
        this.x -= 2;
  
        if (this.x + this.width < 0) {
          score++;
          pipes.shift();
        }
  
        // Colisiones
        if (bird.x < this.x + this.width &&
            bird.x + 40 > this.x &&
            (bird.y < this.y || bird.y + 30 > this.y + 200 + this.height)) {
          gameOver();
        }
      }
    }
  
    function startGame() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");
  
      bird = new Bird();
  
      document.addEventListener("keydown", function(e) {
        if (e.keyCode === 32) {
          bird.flap();
        }
      });
  
      setInterval(gameLoop, 16);
      setInterval(spawnPipe, 2000);
    }
  
    function gameLoop() {
      context.clearRect(0, 0, canvas.width, canvas.height);
  
      bird.draw();
      bird.update();
  
      for (var i = 0; i < pipes.length; i++) {
        pipes[i].draw();
        pipes[i].update();
      }
  
      context.font = "30px Arial";
      context.fillText("Score: " + score, 10, 40);
    }
  
    function spawnPipe() {
      pipes.push(new Pipe());
    }
  
    function gameOver() {
      alert("¡Juego terminado! Puntuación final: " + score);
      location.reload(); // Reinicia el juego
    }
  
    startGame();
  </script>
</body>
</html>
```

Espero que esto te sea útil para disfrutar del juego Flappy Bird. ¡Diviértete jugando!