AI game creator

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

No:31565

←

Prev Next

→

Flappy bird
Developer User15178｜Date and time 23/12/27 14:04:06
Build time 33.722 sec｜Game capacity 5.483KB｜

Script

Sure! Here's a simple implementation of the classic game Flappy Bird using JavaScript and HTML:

This implementation of Flappy Bird is designed to be played on a smartphone. It uses pictogram images for the bird and the pipes. The game will start as soon as the player presses the spacebar or taps the screen. The objective of the game is to control the bird and avoid the pipes by making it jump at the right time. The score increases as the bird passes each set of pipes, and the game ends if the bird collides with a pipe or goes out of bounds. To restart the game after game over, the player can simply click/tap anywhere on the screen.

←

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 classic game Flappy Bird using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid black;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
        // Get the canvas element and its context
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");
        
        // Game variables
        var birdX = 100;
        var birdY = canvas.height / 2;
        var birdDY = 0;
        var gravity = 0.5;
        var jumpForce = -8;
        var obstacles = [];
        var gameStarted = false;
        var score = 0;
        var gameOver = false;
        
        // Pictogram images
        var birdImage = new Image();
        birdImage.src = "bird.png";
        
        var pipeTopImage = new Image();
        pipeTopImage.src = "pipe_top.png";
        
        var pipeBottomImage = new Image();
        pipeBottomImage.src = "pipe_bottom.png";
        
        // Game loop
        function gameLoop() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Move the bird
            birdY += birdDY;
            birdDY += gravity;
            
            // Draw the bird
            ctx.drawImage(birdImage, birdX, birdY, 50, 50);
            
            // Draw the obstacles
            for (var i = 0; i < obstacles.length; i++) {
                var pipeX = obstacles[i].x;
                var pipeY = obstacles[i].y;
                var pipeHeight = obstacles[i].height;
                
                // Draw top pipe
                ctx.drawImage(pipeTopImage, pipeX, pipeY, 60, pipeHeight);
                
                // Draw bottom pipe
                ctx.drawImage(pipeBottomImage, pipeX, pipeY + pipeHeight + 100, 60, canvas.height - pipeY - pipeHeight);
                
                // Move the obstacles to the left
                obstacles[i].x -= 5;
                
                // Check collision with bird
                if (birdX + 50 > pipeX && birdX < pipeX + 60) {
                    if (birdY < pipeY + pipeHeight || birdY + 50 > pipeY + pipeHeight + 100) {
                        // Game over
                        gameOver = true;
                    }
                }
                
                // Increase score if bird passes the obstacles
                if (birdX > pipeX + 60) {
                    score++;
                }
            }
            
            // Display the score
            ctx.fillStyle = "black";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 10, 30);
            
            // Check if bird is out of bounds
            if (birdY + 50 > canvas.height || birdY < 0) {
                // Game over
                gameOver = true;
            }
            
            // If game is not over, continue the game loop
            if (!gameOver) {
                requestAnimationFrame(gameLoop);
            } else {
                // Game over: display score and restart prompt
                ctx.fillText("Game Over! Score: " + score, 100, 150);
                ctx.fillText("Click to restart", 130, 180);
                
                // Add event listener for restarting the game
                canvas.addEventListener("click", restartGame);
            }
        }
        
        // Function to restart the game
        function restartGame() {
            // Reset game variables
            birdY = canvas.height / 2;
            birdDY = 0;
            obstacles = [];
            score = 0;
            gameOver = false;
            
            // Remove event listener and start game loop
            canvas.removeEventListener("click", restartGame);
            requestAnimationFrame(gameLoop);
        }
        
        // Function to handle key and touch events
        function handleInput(event) {
            if (event.type === "keydown" && event.code === "Space") {
                // Space key pressed: make the bird jump
                birdDY = jumpForce;
            } else if (event.type === "touchstart") {
                // Touch detected: make the bird jump
                birdDY = jumpForce;
            }
            
            // If game hasn't started yet, start it
            if (!gameStarted) {
                gameStarted = true;
                requestAnimationFrame(gameLoop);
            }
        }
        
        // Add event listeners for key and touch events
        document.addEventListener("keydown", handleInput);
        canvas.addEventListener("touchstart", handleInput);
        
        // Start the game loop
        requestAnimationFrame(gameLoop);
    </script>
</body>
</html>
```