AI game creator

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

No:9832

149

←

Prev Next

→

Sparrow Game
Developer User4437｜Date and time 23/7/28 4:20:33
Build time 33.805 sec｜Game capacity 5.377KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sparrow Game</title>
    <style>
        body {
            text-align: center;
            font-size: 24px;
            margin-top: 100px;
        }
        #playground {
            display: inline-block;
            position: relative;
            width: 300px;
            height: 300px;
            border: 2px solid black;
        }
        #bird {
            position: absolute;
            top: 100px;
            left: 130px;
        }
        .pipe {
            position: absolute;
            width: 60px;
            background-color: green;
            bottom: 0;
        }
    </style>
</head>
<body>
    <span id="score">0</span>
    <div id="playground">
        <img id="bird" src="bird.png" width="40" height="40">
    </div>

// Bird's initial position and velocity
        var birdY = 100;
        var birdVelocity = 0;

// Arrays to store the pipes
        var pipes = [];
        var pipeWidth = 60;
        var pipeHeight = 300;
        var gapHeight = 120;
        var pipeGap = 200;
        var pipeSpeed = 2;

// Game variables
        var isGameOver = false;
        var score = 0;

// Function to create new pipes
        function createPipes() {
            var topPipeHeight = Math.floor(Math.random() * (pipeHeight - gapHeight));

var bottomPipe = document.createElement("div");
            bottomPipe.className = "pipe";
            bottomPipe.style.height = (pipeHeight - topPipeHeight) + "px";
            bottomPipe.style.left = playground.offsetWidth + "px";

var topPipe = document.createElement("div");
            topPipe.className = "pipe";
            topPipe.style.height = topPipeHeight + "px";
            topPipe.style.left = playground.offsetWidth + "px";
            topPipe.style.bottom = (pipeHeight + gapHeight) + "px";

playground.appendChild(bottomPipe);
            playground.appendChild(topPipe);

pipes.push({ topPipe: topPipe, bottomPipe: bottomPipe });
        }

// Function to move the bird
        function flap() {
            birdVelocity = -8;
        }

// Function to check collision
        function checkCollision(pipe) {
            var birdRect = bird.getBoundingClientRect();
            var topPipeRect = pipe.topPipe.getBoundingClientRect();
            var bottomPipeRect = pipe.bottomPipe.getBoundingClientRect();

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

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

return false;
        }

// Function to update game state
        function update() {
            // Move the bird
            birdVelocity += 0.5;
            birdY += birdVelocity;
            bird.style.top = birdY + "px";

if (birdY < 0 || birdY > playground.offsetHeight) {
                endGame();
            }

// Move and check collisions with the pipes
            for (var i = 0; i < pipes.length; i++) {
                var pipe = pipes[i];

pipe.topPipe.style.left = (pipe.topPipe.offsetLeft - pipeSpeed) + "px";
                pipe.bottomPipe.style.left = (pipe.bottomPipe.offsetLeft - pipeSpeed) + "px";

if (pipe.topPipe.offsetLeft < -pipeWidth) {
                    playground.removeChild(pipe.topPipe);
                    playground.removeChild(pipe.bottomPipe);
                    pipes.splice(i, 1);
                    i--;
                    continue;
                }

if (checkCollision(pipe)) {
                    endGame();
                }

if (pipe.topPipe.offsetLeft + pipeWidth < bird.offsetLeft && !pipe.isScored) {
                    pipe.isScored = true;
                    score++;
                    scoreSpan.textContent = score;
                }
            }

// Create new pipes
            if (pipes.length === 0 || playground.offsetWidth - pipes[pipes.length - 1].topPipe.offsetLeft > pipeGap) {
                createPipes();
            }

if (!isGameOver) {
                requestAnimationFrame(update);
            }
        }

// Function to end the game
        function endGame() {
            isGameOver = true;
            alert("Game Over! Final score: " + score);
            location.reload();
        }

// Event listener for key press
        document.addEventListener("keydown", function(event) {
            if (event.keyCode === 32) {
                flap();
            }
        });

// Start the game
        createPipes();
        update();
    </script>
</body>
</html>