AI game creator

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

No:25509

←

Prev Next

→

Flappy bird
Developer User12487｜Date and time 23/11/22 7:57:41
Build time 86.199 sec｜Game capacity 4.694KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<script>
    // Initialize canvas
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    document.body.appendChild(canvas);
    
    // Game variables
    var bird,
        obstacles,
        score,
        gameover,
        gravity,
        jump,
        intervalId;

// Load game assets
    function loadAssets() {
        bird = {
            x: 50,
            y: canvas.height / 2,
            width: 40,
            height: 30,
            speedY: 0,
            gravity: 0.5,
            jump: -8,
        };

obstacles = [];

score = 0;

gameover = false;

gravity = bird.gravity;
        jump = bird.jump;

intervalId = null;

// Add event listener for jump
        document.addEventListener("keydown", jumpBird);
    }

// Game loop
    function gameLoop() {
        // Clear canvas
        context.clearRect(0, 0, canvas.width, canvas.height);
        
        // Draw bird
        context.fillStyle = "yellow";
        context.fillRect(bird.x, bird.y, bird.width, bird.height);
        
        // Draw obstacles
        context.fillStyle = "green";
        for (var i = 0; i < obstacles.length; i++) {
            context.fillRect(obstacles[i].x, obstacles[i].y, obstacles[i].width, obstacles[i].height);
            
            // Check collision with bird
            if (detectCollision(bird, obstacles[i])) {
                gameover = true;
                clearInterval(intervalId);
                showGameOver();
                return;
            }
            
            // Increase score when bird passes the obstacle
            if (bird.x > obstacles[i].x + obstacles[i].width && !obstacles[i].scored) {
                score++;
                obstacles[i].scored = true;
            }
            
            // Move obstacles to the left
            obstacles[i].x -= 2;
            
            // Remove off-screen obstacles
            if (obstacles[i].x + obstacles[i].width < 0) {
                obstacles.splice(i, 1);
            }
        }
        
        // Update bird position
        bird.speedY += gravity;
        bird.y += bird.speedY;
        
        // Update score
        context.fillStyle = "black";
        context.font = "20px Arial";
        context.fillText("Score: " + score, 10, 40);
        
        // Check collision with top and bottom boundaries
        if (bird.y < 0 || bird.y + bird.height > canvas.height) {
            gameover = true;
            clearInterval(intervalId);
            showGameOver();
            return;
        }
        
        // Request next animation frame
        requestAnimationFrame(gameLoop);
    }

// Start game
    function startGame() {
        loadAssets();
        gameLoop();
        
        // Generate new obstacles every second
        intervalId = setInterval(generateObstacle, 1000);
    }

// Generate new obstacle
    function generateObstacle() {
        var minHeight = 50;
        var maxHeight = canvas.height - 200;
        var height = Math.floor(Math.random() * (maxHeight - minHeight + 1)) + minHeight;
        var minWidth = 30;
        var maxWidth = 60;
        var width = Math.floor(Math.random() * (maxWidth - minWidth + 1)) + minWidth;
        
        obstacles.push({
            x: canvas.width,
            y: 0,
            width: width,
            height: height,
            scored: false,
        });
        
        obstacles.push({
            x: canvas.width,
            y: height + 100,
            width: width,
            height: canvas.height - height - 100,
            scored: false,
        });
    }

// Handle jump
    function jumpBird(event) {
        if (event.keyCode === 32) {
            bird.speedY = jump;
        }
    }

// Detect collision between two objects
    function detectCollision(object1, object2) {
        if (object1.x < object2.x + object2.width &&
          object1.x + object1.width > object2.x &&
          object1.y < object2.y + object2.height &&
          object1.y + object1.height > object2.y) {
            return true;
        }
        return false;
    }

// Show game over message
    function showGameOver() {
        context.fillStyle = "red";
        context.font = "50px Arial";
        context.fillText("Game Over", canvas.width / 2 - 150, canvas.height / 2);
    }

// Start the game
    startGame();

</script>
</body>
</html>