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

No:31723

A game very similar to flappy bird. Well, you pres..ALL
Developer User15232｜Date and time 23/12/28 8:13:03
Build time 29.324 sec｜Game capacity 3.77KB｜

Script

Sure! Here's an example implementation of a game similar to Flappy Bird using HTML, CSS, and JavaScript:

Flappy Bird Game

Score: 0

This is a simple implementation of the game using HTML, CSS, and JavaScript. The game starts automatically when the page loads. The bird can be controlled by clicking on the game container. The goal is to navigate the bird through the gaps in the pipes without touching them or the floor. The score increases for every successfully passed pipe. The game ends when the bird collides with a pipe or the floor. The current score is displayed at the top of the game container.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

Sure! Here's an example implementation of a game similar to Flappy Bird using HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird Game</title>
  <style>
    #game-container {
      position: relative;
      width: 100%;
      height: 400px;
      border: 1px solid #000;
      background-color: #eee;
    }
    #bird {
      position: absolute;
      top: 200px;
      left: 50px;
      width: 40px;
      height: 40px;
      background-color: #f00;
      transition: top 0.2s;
    }
    .pipe {
      position: absolute;
      width: 100px;
      height: 350px;
      background-color: #3e9;
    }
    #score {
      text-align: center;
      font-size: 24px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>Flappy Bird Game</h1>
  <div id="game-container">
    <div id="bird"></div>
  </div>
  <p id="score">Score: 0</p>

// Function to move the bird up
    function flap() {
      bird.style.top = (bird.offsetTop - jumpHeight) + "px";
    }

// Function to move the bird down
    function applyGravity() {
      bird.style.top = (bird.offsetTop + gravity) + "px";
    }

// Function to create new pipes
    function createPipe() {
      var pipe = document.createElement("div");
      pipe.classList.add("pipe");
      pipe.style.left = gameContainer.offsetWidth + "px";
      pipe.style.top = Math.floor(Math.random() * (gameContainer.offsetHeight - 200)) + "px";
      gameContainer.appendChild(pipe);
      pipes.push(pipe);
    }

// Function to move the pipes
    function movePipes() {
      for (var i = 0; i < pipes.length; i++) {
        var pipe = pipes[i];
        pipe.style.left = (pipe.offsetLeft - 2) + "px";

// Check for collision with bird
        if (
          bird.offsetTop < pipe.offsetTop + pipe.offsetHeight &&
          bird.offsetTop + bird.offsetHeight > pipe.offsetTop &&
          bird.offsetLeft + bird.offsetWidth > pipe.offsetLeft &&
          bird.offsetLeft < pipe.offsetLeft + pipe.offsetWidth
        ) {
          endGame();
        }

// Remove pipe when it goes out of the screen
        if (pipe.offsetLeft + pipe.offsetWidth < 0) {
          scoreValue += 1;
          score.innerText = "Score: " + scoreValue;
          gameContainer.removeChild(pipe);
          pipes.splice(i, 1);
          i -= 1;
        }
      }
    }

// Function to end the game
    function endGame() {
      isGameOver = true;
      score.innerText = "Game Over! Score: " + scoreValue;
    }

// Event listener to make the bird flap on click
    gameContainer.addEventListener("click", function() {
      if (!isGameOver) {
        flap();
      }
    });

// Game loop
    setInterval(function() {
      if (!isGameOver) {
        applyGravity();
        movePipes();
      }
    }, 10);

// Create new pipes every 2 seconds
    setInterval(function() {
      if (!isGameOver) {
        createPipe();
      }
    }, 2000);
  </script>
</body>
</html>
```