AI game creator

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

No:22247

191

←

Prev Next

→

A flappy bird game
Developer anonymous｜Date and time 23/10/21 20:53:07
Build time 4648 sec｜Game capacity 4.648KB｜

Script

Sure! Here's an example of a simple Flappy Bird game implemented as a single HTML file using JavaScript. Note that the game mechanics can be adjusted and improved as per your requirements.

You can save this code in a file with an `.html` extension, and open it in a web browser to play the game. Simply tap/click on the screen to make the bird flap and try to avoid the pipes. The score increases every time the bird successfully passes through a pair of pipes.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple Flappy Bird game implemented as a single HTML file using JavaScript. Note that the game mechanics can be adjusted and improved as per your requirements.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird Game</title>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="600"></canvas>

// 1. Initialize the canvas and context
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');

// 2. Set up variables for game objects
        const bird = {
            x: 50,
            y: canvas.height / 2,
            width: 50,
            height: 40,
            gravity: 1,
            velocity: 0,
            flapPower: 15
        };
        let pipes = [];
        let score = 0;

// 3. Add keyboard event listener to control bird's movement
        document.addEventListener('keydown', flap);

function flap() {
            bird.velocity -= bird.flapPower;
        }

// 4. Define game loop function
        function gameLoop() {
            // 4.1 Clear the canvas on each frame
            context.clearRect(0, 0, canvas.width, canvas.height);

// 4.2 Update bird's position and velocity
            bird.velocity += bird.gravity;
            bird.y += bird.velocity;

// 4.3 Draw the bird
            context.fillStyle = 'yellow';
            context.fillRect(bird.x, bird.y, bird.width, bird.height);

// 4.4 Move and draw pipes
            for (let i = 0; i < pipes.length; i++) {
                const pipe = pipes[i];

pipe.x -= 5;
                context.fillStyle = 'green';
                context.fillRect(pipe.x, 0, pipe.width, pipe.topHeight);
                context.fillRect(pipe.x, pipe.bottomY, pipe.width, pipe.bottomHeight);

// 4.4.1 Check for collision with bird
                if (bird.x + bird.width > pipe.x && bird.x < pipe.x + pipe.width && (bird.y < pipe.topHeight || bird.y + bird.height > pipe.bottomY)) {
                    endGame();
                }

// 4.4.2 Award point once bird passes through a pipe
                if (bird.x > pipe.x + pipe.width && !pipe.pointAwarded) {
                    score++;
                    pipe.pointAwarded = true;
                }

// 4.4.3 Remove pipes when they go off-screen
                if (pipe.x + pipe.width < 0) {
                    pipes.splice(i, 1);
                    i--;
                }
            }

// 4.5 Draw score
            context.fillStyle = 'black';
            context.font = '24px Arial';
            context.fillText(`Score: ${score}`, 10, 30);

// 4.6 Check if bird hits the ground or goes above the canvas
            if (bird.y + bird.height > canvas.height || bird.y < 0) {
                endGame();
            }

// 4.7 Add new pipe every 100 frames
            if (frameCount % 100 === 0) {
                const pipeGap = 200;
                const pipeWidth = 80;
                const minPipeHeight = 50;
                const maxPipeHeight = canvas.height - minPipeHeight - pipeGap;

const randomHeight = Math.floor(Math.random() * (maxPipeHeight - minPipeHeight + 1) + minPipeHeight);
                const newPipe = {
                    x: canvas.width,
                    topHeight: randomHeight,
                    bottomY: randomHeight + pipeGap,
                    bottomHeight: canvas.height - randomHeight - pipeGap,
                    width: pipeWidth,
                    pointAwarded: false
                };
                pipes.push(newPipe);
            }

// 4.8 Increment frame count
            frameCount++;

// 4.9 Call gameLoop function again
            requestAnimationFrame(gameLoop);
        }

// 5. Function to end the game
        function endGame() {
            alert(`Game Over! Your score: ${score}`);
            location.reload(); // Refresh the page to restart the game
        }

// 6. Start the game
        let frameCount = 0;
        gameLoop();
    </script>
</body>
</html>
```