Make a game that when you like the screen the bird flaps and you have to not hit pipes's game

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

No:44862

←

Prev Next

→

Make a game that when you like the screen the bird..ALL
Developer User19491｜Date and time 24/2/19 12:16:47
Build time 6.313 sec｜Game capacity 1.521KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flappy Bird Game</title>
<style>
    #game-container {
        width: 100vw;
        height: 100vh;
        background-color: lightblue;
        position: relative;
    }
    #bird {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50px;
        transform: translateY(-50%);
        background-image: url('bird.png');
        background-size: contain;
        background-repeat: no-repeat;
    }
    .pipe {
        width: 70px;
        height: 200px;
        position: absolute;
        top: 0;
        background-color: green;
    }
</style>
</head>
<body>
<div id="game-container">
    <div id="bird"></div>
</div>
<script>
    let bird = document.getElementById('bird');
    let gameContainer = document.getElementById('game-container');
    let gravity = 0.5;
    let birdVelocity = 0;
    let birdPosition = 0;

gameContainer.addEventListener('click', () => {
        birdVelocity = -10;
    });

const gameLoop = () => {
        birdVelocity += gravity;
        birdPosition += birdVelocity;
        bird.style.top = birdPosition + 'px';

if (birdPosition < 0 || birdPosition > gameContainer.clientHeight) {
            alert('Game Over! You hit the ground or ceiling.');
            location.reload();
        }

requestAnimationFrame(gameLoop);
    }

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