AI game creator

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

No:38240

←

Prev Next

→

Flappy bird
Developer User17295｜Date and time 24/1/23 17:21:46
Build time 20.619 sec｜Game capacity 5.29KB｜

Script

Sure! Here's a simple implementation of the Flappy Bird game using JavaScript and HTML:

To play the game: 1. Copy the above code into a new HTML file (e.g., `flappy-bird.html`). 2. Save the file. 3. Open the HTML file using a web browser, preferably on a smartphone. 4. Use the space bar or tap the screen to make the bird jump. 5. Try to navigate through the pipes and avoid collision to earn points. 6. If the bird collides with a pipe or the game ends, an alert will appear displaying the final score. 7. To restart the game, simply close the alert and refresh the page. Please note that this implementation is a simplified version of Flappy Bird and might not include all the features of the original game. It's mainly intended to demonstrate the basic mechanics and structure of the game.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Sure! Here's a simple implementation of the Flappy Bird game using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas {
        border: 1px solid #000;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

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

bird = {
          x: 50,
          y: canvas.height / 2,
          width: 34,
          height: 24,
          speedY: 0,
          gravity: 0.5,
          jumpForce: -10,
          draw: function() {
            // Draw the bird
            canvasContext.fillStyle = "#f00";
            canvasContext.fillRect(this.x, this.y, this.width, this.height);
          },
          update: function() {
            // Update bird's position
            this.speedY += this.gravity;
            this.y += this.speedY;
          },
          jump: function() {
            // Apply jump force to the bird
            this.speedY = this.jumpForce;
          },
          isColliding: function(pipe) {
            // Check for collision with a pipe
            var birdTop = this.y;
            var birdBottom = this.y + this.height;
            var birdLeft = this.x;
            var birdRight = this.x + this.width;

var pipeTop = pipe.y;
            var pipeBottom = pipe.y + pipe.height;
            var pipeLeft = pipe.x;
            var pipeRight = pipe.x + pipe.width;

return (
              birdRight > pipeLeft &&
              birdLeft < pipeRight &&
              birdBottom > pipeTop &&
              birdTop < pipeBottom
            );
          }
        };

function Pipe(x, y) {
          this.x = x;
          this.y = y;
          this.width = 50;
          this.height = Math.floor(Math.random() * 200) + 100;
          this.speedX = -2;

this.draw = function() {
            // Draw the pipe
            canvasContext.fillStyle = "#0f0";
            canvasContext.fillRect(this.x, this.y, this.width, this.height);
          };

this.update = function() {
            // Update the pipe's position
            this.x += this.speedX;

// Remove the pipe from the array when it's off the screen
            if (this.x + this.width < 0) {
              pipes.shift();
            }

// Check for collision with the bird
            if (bird.isColliding(this)) {
              gameOver();
            }
          };
        }

// Game main loop
        function gameLoop() {
          update();
          render();
        }

function update() {
          bird.update();

// Generate new pipe every second
          if (frames % 60 === 0) {
            var pipeY = Math.floor(Math.random() * -200) - 100;
            pipes.push(new Pipe(canvas.width, pipeY));
          }

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

// Check for points
          if (bird.x > pipes[0].x + pipes[0].width && !pipes[0].scored) {
            score++; // Add a point
            pipes[0].scored = true;
          }
        }

function render() {
          // Clear the canvas
          canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// Draw bird
          bird.draw();

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

// Draw score
          canvasContext.fillStyle = "#000";
          canvasContext.font = "20px Arial";
          canvasContext.fillText("Score: " + score, 10, 30);
        }

// Game over
        function gameOver() {
          alert("Game Over. Score: " + score);
          location.reload(); // Restart the game
        }

// Handling user input
        document.addEventListener("keydown", function(event) {
          if (event.keyCode === 32) {
            bird.jump();
          }
        });

// Start the game loop
        setInterval(gameLoop, 1000 / 60);
      };
    </script>
  </body>
</html>
```

Please note that this implementation is a simplified version of Flappy Bird and might not include all the features of the original game. It's mainly intended to demonstrate the basic mechanics and structure of the game.