Make flappy bird in html,css and javascript's game

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

No:31014

←

Prev Next

→

Make flappy bird in html,css and javascript
Developer User14996｜Date and time 23/12/24 20:35:25
Build time 18.58 sec｜Game capacity 3.622KB｜

Script

Sure, here's an example of a simple Flappy Bird game implemented using HTML, CSS, and JavaScript:

Score: 0

To use this code, save it as a `.html` file, then open it in a web browser. The game will start and you can play it by clicking on the screen to make the bird jump. The goal is to navigate the bird through the gaps between the green pipes. The score will increase each time the bird passes through a pipe. If the bird collides with a pipe or touches the top/bottom of the screen, the game will end.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Sure, here's an example of a simple Flappy Bird game implemented using HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

body {
            background-color: skyblue;
        }

#bird {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 200px;
            top: 50%;
            transform: translateY(-50%);
            background-image: url('bird.png');
            background-size: cover;
        }

#pipe {
            width: 70px;
            position: absolute;
            bottom: 0;
            background-color: green;
        }

#score {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: Arial, sans-serif;
            font-size: 24px;
            font-weight: bold;
            color: white;
        }
    </style>
</head>
<body>
    <div id="bird"></div>
    <div id="pipe"></div>
    <div id="score">Score: 0</div>

var birdTop = parseInt(window.getComputedStyle(bird).getPropertyValue('top'));
            var pipeLeft = parseInt(window.getComputedStyle(pipe).getPropertyValue('left'));
            var pipeHeight = parseInt(window.getComputedStyle(pipe).getPropertyValue('height'));
            var gameSpeed = 10;
            var scoreCounter = 0;
            var isGameOver = false;

document.addEventListener('click', jump);

var gameTimer = setInterval(function () {
                if (!isGameOver) {
                    pipeLeft -= gameSpeed;
                    pipe.style.left = pipeLeft + 'px';

if (pipeLeft === -70) {
                        pipeLeft = 700;
                        pipeHeight = Math.floor(Math.random() * 300) + 100;
                        pipe.style.height = pipeHeight + 'px';
                        scoreCounter++;
                    }

if (pipeLeft > 200 && pipeLeft < 280 && birdTop < pipeHeight - 120 || birdTop > pipeHeight) {
                        gameOver();
                    }

if (birdTop < 0 || birdTop > 480) {
                        gameOver();
                    }

birdTop += 2;
                    bird.style.top = birdTop + 'px';

score.innerText = 'Score: ' + scoreCounter;
                }
            }, 20);

function gameOver() {
                clearInterval(gameTimer);
                isGameOver = true;
                document.removeEventListener('click', jump);
            }
        };
    </script>
</body>
</html>
```