AI game creator

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

No:16651

←

Prev Next

→

Flappy bird
Developer User7410｜Date and time 23/9/19 23:38:17
Build time 37.063 sec｜Game capacity 3.999KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flappy Bird</title>
    <style>
        #container {
            position: relative;
            width: 400px;
            height: 450px;
            border: 1px solid black;
            margin: 0 auto;
            overflow: hidden;
        }
        
        #bird {
            position: absolute;
            width: 40px;
            height: 40px;
            background-image: url('bird.png');
            background-size: cover;
            top: 50%;
            left: 50px;
            transform: translate(0%, -50%);
        }
        
        .pipe {
            position: absolute;
            width: 70px;
            height: 400px;
            background-color: green;
        }
        
        .toppipe {
            top: -100px;
        }
        
        .bottompipe {
            bottom: -100px;
        }
        
        .score {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 24px;
            font-weight: bold;
            color: white;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="bird"></div>
        <div id="score">Score: 0</div>
    </div>
    
    <script>
        var bird = document.getElementById("bird");
        var container = document.getElementById("container");
        var scoreDisplay = document.getElementById("score");
        
        var birdLeft = 50;
        var birdTop = 200;
        var gravity = 2;
        var score = 0;
        
        function jump() {
            birdTop -= 50;
        }
        
        function gameLoop() {
            birdTop += gravity;
            
            bird.style.top = birdTop + "px";
            
            // Check collision with pipes
            var pipes = document.getElementsByClassName("pipe");
            
            for (var i = 0; i < pipes.length; i++) {
                var pipe = pipes[i];
                
                if (isColliding(pipe)) {
                    gameOver();
                    return;
                }
                
                if (pipe.classList.contains("toppipe") && !pipe.scored && pipe.offsetLeft + pipe.offsetWidth < birdLeft) {
                    score++;
                    pipe.scored = true;
                    scoreDisplay.innerHTML = "Score: " + score;
                }
                
                pipe.style.left = pipe.offsetLeft - 2 + "px";
                
                if (pipe.offsetLeft + pipe.offsetWidth < 0) {
                    pipe.remove();
                }
            }
            
            // Generate new pipe
            if (Math.random() < 0.01) {
                var pipeHeight = Math.round(Math.random() * 200) + 100;
                var topPipe = document.createElement("div");
                var bottomPipe = document.createElement("div");
                
                topPipe.classList.add("pipe", "toppipe");
                bottomPipe.classList.add("pipe", "bottompipe");
                
                topPipe.style.height = pipeHeight + "px";
                bottomPipe.style.height = (container.offsetHeight - pipeHeight - 150) + "px";
                
                container.appendChild(topPipe);
                container.appendChild(bottomPipe);
            }
        }
        
        function isColliding(pipe) {
            var birdRect = bird.getBoundingClientRect();
            var pipeRect = pipe.getBoundingClientRect();
            
            return birdRect.left < pipeRect.right && birdRect.right > pipeRect.left && birdRect.top < pipeRect.bottom && birdRect.bottom > pipeRect.top;
        }
        
        function gameOver() {
            clearInterval(gameInterval);
            alert("Game Over! Your score: " + score);
            location.reload();
        }
        
        document.addEventListener("keydown", jump);
        
        var gameInterval = setInterval(gameLoop, 20);
    </script>
</body>
</html>