AI game creator

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

No:23386

←

Prev Next

→

Flappy bird
Developer User10846｜Date and time 23/10/30 10:18:35
Build time 63.502 sec｜Game capacity 3.401KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<style>
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
<script>
    // Flappy Bird game

// Setup canvas
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 320;
    canvas.height = 480;
    document.body.appendChild(canvas);

// Game variables
    var score = 0;
    var backgroundImageReady = false;
    var birdImageReady = false;
    var pipeImageReady = false;

// Images
    var backgroundImage = new Image();
    backgroundImage.onload = function() {
        backgroundImageReady = true;
    };
    backgroundImage.src = "background.png";

var birdImage = new Image();
    birdImage.onload = function() {
        birdImageReady = true;
    };
    birdImage.src = "bird.png";

var pipeImage = new Image();
    pipeImage.onload = function() {
        pipeImageReady = true;
    };
    pipeImage.src = "pipe.png";

// Bird object
    var bird = {
        x: 10,
        y: canvas.height / 2,
        width: 50,
        height: 50,
        velocityY: 0,
        gravity: 0.5,
        jump: -10,
        update: function() {
            this.velocityY += this.gravity;
            this.y += this.velocityY;
        },
        jump: function() {
            this.velocityY = this.jump;
        },
        reset: function() {
            this.y = canvas.height / 2;
            this.velocityY = 0;
        }
    };

// Pipe object
    var pipe = {
        x: canvas.width,
        y: 0,
        width: 80,
        height: 320,
        velocity: 5,
        update: function() {
            this.x -= this.velocity;

if (this.x + this.width < 0) {
                this.reset();
            }
        },
        reset: function() {
            this.x = canvas.width;
            this.y = -Math.random() * 200; // Randomize pipe position
        }
    };

// Handle player input
    document.addEventListener("keydown", function(event) {
        if (event.keyCode === 32) { // Spacebar key
            bird.jump();
        }
    });

// Game loop
    function gameLoop() {
        // Update objects
        bird.update();
        pipe.update();

// Check for collision
        if (bird.y + bird.height > canvas.height || bird.y < 0) {
            gameover();
        }

if (bird.x + bird.width > pipe.x &&
            bird.x < pipe.x + pipe.width &&
            bird.y < pipe.y + pipe.height) {
            gameover();
        }

// Increase score
        if (bird.x > pipe.x + pipe.width) {
            score++;
        }

// Render objects
        if (backgroundImageReady) {
            ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
        }

if (birdImageReady) {
            ctx.drawImage(birdImage, bird.x, bird.y, bird.width, bird.height);
        }

if (pipeImageReady) {
            ctx.drawImage(pipeImage, pipe.x, pipe.y, pipe.width, pipe.height);
        }

// Render score
        ctx.fillStyle = "black";
        ctx.font = "20px Arial";
        ctx.fillText("Score: " + score, 10, 30);

// Repeat game loop
        requestAnimationFrame(gameLoop);
    }

// Game over function
    function gameover() {
        bird.reset();
        pipe.reset();
        score = 0;
    }

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