AI game creator

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

No:26185

←

Prev Next

→

Flappy bird
Developer User12909｜Date and time 23/11/27 20:07:26
Build time 64.244 sec｜Game capacity 3.132KB｜

Script

Sure, here's a simple implementation of the Flappy Bird game using JavaScript and HTML:

In this implementation, we use the `<div>` elements to represent the bird and the pipe. The bird is moved based on user input and gravity, while the pipe moves from right to left. The score is displayed on the top right corner of the screen, and collisions between the bird and the pipe are checked. If a collision occurs, the game is over and the score is displayed. You can use pictograms for the background images like `emozi_all/bird.png` for the bird and adjust the styling as desired.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simple implementation of the Flappy Bird game using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #bird {
            position: absolute;
            top: 50%;
            left: 50px;
            height: 50px;
            width: 50px;
            background-image: url('bird.png');
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        #pipe {
            position: absolute;
            top: 0;
            height: 200px;
            width: 50px;
            background-color: green;
        }
        
        #score {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="bird"></div>
    <div id="pipe"></div>
    <div id="score">0</div>

function flap() {
            velocity -= 10;
        }

function updateBird() {
            velocity += gravity;
            bird.style.top = (bird.offsetTop + velocity) + "px";
        }

function updatePipe() {
            pipePosition -= gameSpeed;
            pipe.style.left = pipePosition + "px";

if (pipePosition < -50) {
                pipePosition = 500;
                score++;
                scoreLabel.innerHTML = score;
            }

if (isColliding(pipe, bird) ||
                bird.offsetTop < -10 || bird.offsetTop > window.innerHeight - 40) {
                gameOver();
            }
        }

function isColliding(element1, element2) {
            var rect1 = element1.getBoundingClientRect();
            var rect2 = element2.getBoundingClientRect();
            return !(
                rect1.top > rect2.bottom ||
                rect1.bottom < rect2.top ||
                rect1.right < rect2.left ||
                rect1.left > rect2.right
            );
        }

function gameOver() {
            alert("Game Over! Your score: " + score);
            location.reload(); // Restart the game
        }

setInterval(function() {
            updateBird();
            updatePipe();
        }, 20);

document.addEventListener("keydown", flap);
        bird.addEventListener("click", flap);
    </script>
</body>
</html>
```

In this implementation, we use the `<div>` elements to represent the bird and the pipe. The bird is moved based on user input and gravity, while the pipe moves from right to left. The score is displayed on the top right corner of the screen, and collisions between the bird and the pipe are checked. If a collision occurs, the game is over and the score is displayed. You can use pictograms for the background images like `bird.png` for the bird and adjust the styling as desired.