AI game creator

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

No:41700

←

Prev Next

→

Flappy Cat
Developer User18699｜Date and time 24/2/9 12:23:00
Build time 13.803 sec｜Game capacity 4.104KB｜

Script

Score: 0

Game Over

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Flappy Cat</title>
  <style>
    #game-board {
      position: relative;
      width: 100%;
      height: 500px;
      background-color: #f8f8f8;
      border: 2px solid black;
    }

#bird {
      position: absolute;
      left: 50px;
      top: 200px;
      width: 50px;
      height: 50px;
      background-color: #ffcc00;
      border-radius: 50%;
    }

#score {
      font-size: 24px;
      font-weight: bold;
      margin-top: 10px;
    }

.pipe {
      position: absolute;
      width: 80px;
      background-color: #00cc00;
      border-radius: 10px;
    }

#top-pipe {
      height: 200px;
      top: 0;
    }

#bottom-pipe {
      height: 200px;
      bottom: 0;
    }

#game-over {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 36px;
      font-weight: bold;
      display: none;
    }
  </style>
</head>
<body>
  <div id="game-board">
    <div id="bird"></div>
    <div id="top-pipe" class="pipe"></div>
    <div id="bottom-pipe" class="pipe"></div>
  </div>

<div id="score">Score: 0</div>
  <div id="game-over">Game Over</div>

function startGame() {
      bird = {
        element: document.getElementById('bird'),
        x: 50,
        y: 200,
        width: 50,
        height: 50,
        speed: 0,
        gravity: 0.2,
        jumpHeight: -5
      };

pipes = [
        { top: 0, height: 200, element: document.getElementById('top-pipe') },
        { top: 300, height: 200, element: document.getElementById('bottom-pipe') }
      ];

score = 0;
      gameStarted = false;

document.addEventListener('keydown', jump);

gameInterval = setInterval(updateGame, 20);
    }

function stopGame() {
      clearInterval(gameInterval);
      gameStarted = false;
      document.removeEventListener('keydown', jump);
    }

function updateGame() {
      if (gameStarted) {
        moveBird();
        movePipes();

if (checkCollision()) {
          gameOver();
        }

if (bird.x > pipes[0].element.offsetLeft + pipes[0].element.offsetWidth) {
          score++;
          pipes.shift();
          generatePipe();
        }
      
        document.getElementById('score').textContent = 'Score: ' + score;
      }
    }

function moveBird() {
      bird.speed += bird.gravity;
      bird.y += bird.speed;
      bird.element.style.top = bird.y + 'px';
    }

function movePipes() {
      for (var i = 0; i < pipes.length; i++) {
        pipes[i].element.style.left = pipes[i].element.offsetLeft - 2 + 'px';
      }
    }

function checkCollision() {
      if (bird.y < 0 || bird.y > 450) {
        return true;
      }

var birdRect = bird.element.getBoundingClientRect();

for (var i = 0; i < pipes.length; i++) {
        var pipeRect = pipes[i].element.getBoundingClientRect();

if (
          birdRect.left < pipeRect.right &&
          birdRect.right > pipeRect.left &&
          (birdRect.top < pipeRect.top || birdRect.bottom > pipeRect.bottom)
        ) {
          return true;
        }
      }

return false;
    }

function jump(event) {
      if (event.keyCode === 32) { // Spacebar
        bird.speed = bird.jumpHeight;
        gameStarted = true;
      }
    }

function gameOver() {
      stopGame();
      document.getElementById('game-over').style.display = 'block';
    }

function generatePipe() {
      var height = Math.floor(Math.random() * 300 + 50);
      var pipe = {
        top: -(500 - height),
        height: height,
        element: document.createElement('div')
      };

pipe.element.classList.add('pipe');
      pipe.element.style.top = pipe.top + 'px';
      pipe.element.style.left = '100%';
      pipe.element.style.height = pipe.height + 'px';
      document.getElementById('game-board').appendChild(pipe.element);
      pipes.push(pipe);
    }

startGame();
  </script>
</body>
</html>