AI game creator

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

No:42891

←

Prev Next

→

Flappy bird
Developer User18998｜Date and time 24/2/13 7:01:44
Build time 20.87 sec｜Game capacity 5.131KB｜

Script

Sure! Here's a simple implementation of the Flappy Bird game in a single HTML file using JavaScript. To keep it simple, we'll use text-based representation instead of pictograms.

Score: 0

Game Over

This HTML file contains the complete implementation of the Flappy Bird game using JavaScript. When you open it in a browser, the game will start automatically, and you can make the bird jump by tapping on the screen or clicking the mouse. The game board is represented by a yellow square (bird) and green vertical pipes. The score is displayed at the top-right corner of the game board. If the bird hits a pipe or goes outside the game board, the game will end, and a "Game Over" message will appear.

←

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 in a single HTML file using JavaScript. To keep it simple, we'll use text-based representation instead of pictograms.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    #game-board {
      position: relative;
      width: 320px;
      height: 480px;
      border: 1px solid black;
    }

#bird {
      position: absolute;
      left: 50px;
      top: 200px;
      width: 40px;
      height: 40px;
      background-color: yellow;
    }

.pipe {
      position: absolute;
      width: 80px;
      height: 350px;
      background-color: green;
    }

#score {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 24px;
      font-weight: bold;
    }

.game-over {
      position: absolute;
      width: 200px;
      height: 100px;
      top: 190px;
      left: 60px;
      text-align: center;
      background-color: rgba(255, 0, 0, 0.7);
      font-size: 24px;
      font-weight: bold;
      line-height: 100px;
      color: white;
      display: none;
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div id="bird"></div>
    <div id="score">Score: 0</div>
    <div class="game-over">Game Over</div>
  </div>
  <script>
    // Function to jump the bird when the screen is touched
    function jump() {
      birdY -= 40;
    }

// Function to update the game state
    function update() {
      birdY += gravity;
      bird.style.top = birdY + "px";

for (var i = 0; i < pipes.length; i++) {
        pipes[i].style.left = pipes[i].offsetLeft - pipeSpeed + "px";

// Check collision between bird and pipes
        if (
          bird.offsetLeft + bird.offsetWidth > pipes[i].offsetLeft &&
          bird.offsetLeft < pipes[i].offsetLeft + pipes[i].offsetWidth &&
          bird.offsetTop + bird.offsetHeight > pipes[i].offsetTop &&
          bird.offsetTop < pipes[i].offsetTop + pipes[i].offsetHeight
        ) {
          endGame();
        }

// Remove pipes that have moved out of the game board
        if (pipes[i].offsetLeft + pipes[i].offsetWidth < 0) {
          pipes[i].parentNode.removeChild(pipes[i]);
          pipes.splice(i, 1);
          i--;
          score += 1;
          updateScore();
        }
      }

// End game if the bird hits the ground or goes above the game board
      if (birdY + bird.offsetHeight > gameBoard.offsetHeight || birdY < 0) {
        endGame();
      }
    }

// Function to start the game
    function startGame() {
      gameInterval = setInterval(update, 20);

// Add event listener for touch events
      document.addEventListener("touchstart", jump);
      document.addEventListener("mousedown", jump);

// Hide the game over message
      gameOverMessage.style.display = "none";
    }

// Function to end the game
    function endGame() {
      clearInterval(gameInterval);
      gameInterval = null;

// Remove event listener for touch events
      document.removeEventListener("touchstart", jump);
      document.removeEventListener("mousedown", jump);

// Show the game over message
      gameOverMessage.style.display = "block";
    }

// Function to update the score on the game board
    function updateScore() {
      scoreDisplay.textContent = "Score: " + score;
    }

// Initialize game variables
    var gravity = 2;
    var pipeSpeed = 5;
    var score = 0;
    var birdY = 200;
    var pipes = [];
    var gameInterval;

// Get required DOM elements
    var bird = document.getElementById("bird");
    var gameBoard = document.getElementById("game-board");
    var scoreDisplay = document.getElementById("score");
    var gameOverMessage = document.querySelector(".game-over");

// Start the game on page load
    window.onload = startGame;

// Function to create new pipe
    function createPipe() {
      var pipeHeight = Math.random() * 250 + 50;

var pipeTop = document.createElement("div");
      pipeTop.className = "pipe";
      pipeTop.style.left = "400px";
      pipeTop.style.height = pipeHeight + "px";
      gameBoard.appendChild(pipeTop);
      pipes.push(pipeTop);

var pipeBottom = document.createElement("div");
      pipeBottom.className = "pipe";
      pipeBottom.style.left = "400px";
      pipeBottom.style.height = gameBoard.offsetHeight - pipeHeight - 100 + "px";
      pipeBottom.style.top = pipeHeight + 100 + "px";
      gameBoard.appendChild(pipeBottom);
      pipes.push(pipeBottom);
    }

// Create new pipes every 2 seconds
    setInterval(createPipe, 2000);
  </script>
</body>
</html>
```