AI game creator

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

No:29372

←

Prev Next

→

Flappy bird
Developer User14495｜Date and time 23/12/17 6:37:25
Build time 35.043 sec｜Game capacity 3.941KB｜

Script

Sure! Here's an implementation of the Flappy Bird game as a single HTML file, enclosed in script tags and written in JavaScript:

This code will create a Flappy Bird game that can be played on a smartphone. The bird is represented as a red circle, and the pipes are represented as green rectangles. The game starts when the user taps the screen, and the bird will jump upwards with each tap. The goal is to navigate the bird through the gaps in the pipes without colliding with them. The score increases with each successfully passed pipe, and the game ends if the bird collides with a pipe. When the game ends, an alert message will display the player's score and the game can be restarted by tapping the screen again.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an implementation of the Flappy Bird game as a single HTML file, enclosed in script tags and written in JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #gameCanvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="320" height="480"></canvas>

// Game Variables
      var bird = {
        x: 50,
        y: canvas.height / 2,
        radius: 20,
        velocity: 0,
        gravity: 0.5
      };

var pipes = [];
      var score = 0;
      var gameSpeed = 3;

// Game Functions
      function drawBird() {
        context.beginPath();
        context.arc(bird.x, bird.y, bird.radius, 0, Math.PI * 2);
        context.fillStyle = "#FF0000";
        context.fill();
        context.closePath();
      }

function drawPipes() {
        for (var i = 0; i < pipes.length; i++) {
          context.beginPath();
          context.rect(pipes[i].x, pipes[i].y, pipes[i].width, pipes[i].height);
          context.fillStyle = "#008000";
          context.fill();
          context.closePath();
        }
      }

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

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

// Check collision with bird
          if (
            bird.x < pipes[i].x + pipes[i].width &&
            bird.x + bird.radius > pipes[i].x &&
            bird.y < pipes[i].y + pipes[i].height &&
            bird.y + bird.radius > pipes[i].y
          ) {
            gameOver();
            return;
          }

// Increase score if passed the pipe
          if (pipes[i].x + pipes[i].width < bird.x && !pipes[i].pointAdded) {
            pipes[i].pointAdded = true;
            score++;
          }

// Remove pipes if offscreen
          if (pipes[i].x + pipes[i].width < 0) {
            pipes.splice(i, 1);
            i--;
          }
        }
      }

function drawScore() {
        context.font = "30px Arial";
        context.fillText("Score: " + score, 10, 50);
      }

function gameOver() {
        alert("Game Over! Your score: " + score);
        resetGame();
      }

function resetGame() {
        bird.y = canvas.height / 2;
        bird.velocity = 0;
        pipes = [];
        score = 0;
      }

// Game Loop
      function gameLoop() {
        context.clearRect(0, 0, canvas.width, canvas.height);

if (Math.random() < 0.02) {
          var pipe = {
            x: canvas.width,
            y: Math.floor(Math.random() * (canvas.height - 200)) + 100,
            width: 80,
            height: 300,
            pointAdded: false
          };
          pipes.push(pipe);
        }

drawBird();
        drawPipes();
        updateBird();
        updatePipes();
        drawScore();

requestAnimationFrame(gameLoop);
      }

// Event Listeners
      document.addEventListener("mousedown", function(event) {
        bird.velocity = -10;
      });

// Start the game
      gameLoop();
    });
  </script>
</body>
</html>
```