AI game creator

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

No:13970

←

Prev Next

→

Flappy bird
Developer User6052｜Date and time 23/8/30 19:37:14
Build time 28.511 sec｜Game capacity 4.304KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Flappy Bird</title>
  <style>
    #game-area {
      position: relative;
      width: 320px;
      height: 480px;
      margin: 0 auto;
      background-color: skyblue;
      border: 1px solid black;
      overflow: hidden;
    }
    #bird {
      position: absolute;
      width: 50px;
      height: 50px;
      top: 50%;
      left: 50px;
      transform: translateY(-50%);
      background-image: url('bird.png'); /* Replace with your bird image */
      background-size: cover;
    }
    .pipe {
      position: absolute;
      width: 80px;
      height: 400px;
      background-image: url('pipe.png'); /* Replace with your pipe image */
      background-size: cover;
    }
    #score {
      text-align: center;
      font-size: 30px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div id="game-area">
    <div id="bird"></div>
    <div id="score">Score: 0</div>
  </div>

// Function to start the game
    function startGame() {
      gameArea.addEventListener("mousedown", flap);
      gameArea.addEventListener("touchstart", flap);
      setInterval(updateGameArea, 20);
      createPipe();
    }

// Function to make the bird flap
    function flap() {
      birdVelocity = -6;
    }

// Function to create pipes
    function createPipe() {
      var pipeGap = 100;
      var pipeWidth = 80;
      var minHeight = 50;
      var maxHeight = gameArea.offsetHeight - pipeGap - 50;
      var randomHeight = Math.floor(Math.random() * (maxHeight - minHeight + 1) + minHeight);

var topPipe = document.createElement("div");
      topPipe.classList.add("pipe");
      topPipe.style.height = randomHeight + "px";
      topPipe.style.left = gameArea.offsetWidth + "px";
      topPipe.style.top = "0px";
      gameArea.appendChild(topPipe);
      pipes.push(topPipe);

var bottomPipe = document.createElement("div");
      bottomPipe.classList.add("pipe");
      bottomPipe.style.height = (gameArea.offsetHeight - randomHeight - pipeGap) + "px";
      bottomPipe.style.left = gameArea.offsetWidth + "px";
      bottomPipe.style.bottom = "0px";
      gameArea.appendChild(bottomPipe);
      pipes.push(bottomPipe);
    }

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

// Function to check collision
    function checkCollision() {
      var birdTop = bird.offsetTop;
      var birdBottom = bird.offsetTop + bird.offsetHeight;
      var birdLeft = bird.offsetLeft;
      var birdRight = bird.offsetLeft + bird.offsetWidth;

for (var i = 0; i < pipes.length; i++) {
        var pipeTop = pipes[i].offsetTop + pipes[i].offsetHeight;
        var pipeBottom = pipes[i].offsetTop + pipes[i].offsetHeight + 100;
        var pipeLeft = pipes[i].offsetLeft;
        var pipeRight = pipes[i].offsetLeft + pipes[i].offsetWidth;

if (
          (birdBottom > pipeTop && birdTop < pipeBottom && birdRight > pipeLeft && birdLeft < pipeRight) ||
          birdTop <= 0 ||
          birdBottom >= gameArea.offsetHeight
        ) {
          gameOver();
        }

if (pipes[i].offsetLeft === -80) {
          score++;
          scoreText.innerText = "Score: " + score;
        }
      }
    }

// Function to stop the game
    function gameOver() {
      clearInterval(gameArea.interval);
      gameArea.removeEventListener("mousedown", flap);
      gameArea.removeEventListener("touchstart", flap);
      alert("Game Over! Your score is " + score);
    }

// Function to update the game area
    function updateGameArea() {
      birdVelocity += gravity;
      bird.style.top = bird.offsetTop + birdVelocity + "px";
      movePipes();
      checkCollision();
      if (bird.offsetTop < 0 || bird.offsetTop > gameArea.offsetHeight - bird.offsetHeight) {
        gameOver();
      }
    }

// Start the game
    startGame();
  </script>
</body>
</html>