AI game creator

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

No:12586

←

Prev Next

→

Flappy Bird
Developer User4714｜Date and time 23/8/20 6:14:25
Build time 13.741 sec｜Game capacity 4.983KB｜

Script

Sure! Here's a simple implementation of the game Flappy Bird using JavaScript within a single HTML file. It is designed to work on smartphones and uses pictogram-like images to represent the game elements:

To play the game, open the HTML file on your smartphone or emulator. The player controls the flappy bird by tapping/clicking on the screen, causing it to jump and avoid hitting the pipes. The score increases as the bird successfully passes through the gaps between the pipes. The game will show a game over message with the final score and provide an option to play again.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

// Bird properties
            var bird = {
                x: 100,
                y: canvas.height / 2,
                radius: 20,
                velocity: 0,
                gravity: 0.6,
                jumpPower: 15
            };

// Pipe properties
            var pipes = [];
            var pipeGap = 200;
            var pipeWidth = 80;
            var pipeHeight = 400;
            var pipeVelocity = 5;

// Score
            var score = 0;

// Jump when screen is tapped/clicked
            canvas.addEventListener('mousedown', jump);
            canvas.addEventListener('touchstart', jump);

// Game loop
            function gameLoop() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw bird
                ctx.fillStyle = '#ffcc00';
                ctx.beginPath();
                ctx.arc(bird.x, bird.y, bird.radius, 0, Math.PI * 2);
                ctx.closePath();
                ctx.fill();

// Gravity
                bird.velocity += bird.gravity;
                bird.y += bird.velocity;

// Generate pipes
                if (frames % 120 === 0) {
                    var pipeY = 0;
                    var pipeX = canvas.width;
                    var topPipeHeight = Math.random() * (canvas.height / 3 - 60) + 60;

pipes.push({
                        x: pipeX,
                        y: pipeY,
                        width: pipeWidth,
                        height: topPipeHeight
                    });

pipes.push({
                        x: pipeX,
                        y: pipeY + topPipeHeight + pipeGap,
                        width: pipeWidth,
                        height: canvas.height - topPipeHeight - pipeGap
                    });
                }

// Move pipes
                for (var i = 0; i < pipes.length; i++) {
                    var p = pipes[i];
                    p.x -= pipeVelocity;

// Check collision
                    if (bird.x + bird.radius > p.x &&
                        bird.x - bird.radius < p.x + p.width &&
                        bird.y + bird.radius > p.y &&
                        bird.y - bird.radius < p.y + p.height) {
                        var playAgain = confirm('Game Over! Your score: ' + score + '\nDo you want to play again?');
                        if (playAgain) {
                            location.reload();
                        } else {
                            return;
                        }
                    }

// Remove pipes off screen
                    if (p.x + p.width < 0) {
                        pipes.splice(i, 1);
                        i--;
                    }
                }

// Increase score when successfully passing a pipe
                if (pipes[0] && pipes[0].x + pipes[0].width < bird.x) {
                    score++;
                    pipes.shift();
                }

// Display score
                ctx.font = '30px Arial';
                ctx.fillStyle = '#000';
                ctx.fillText('Score: ' + score, 10, 50);

// Game over if bird hits the ground
                if (bird.y + bird.radius > canvas.height) {
                    var playAgain = confirm('Game Over! Your score: ' + score + '\nDo you want to play again?');
                    if (playAgain) {
                        location.reload();
                    } else {
                        return;
                    }
                }

requestAnimationFrame(gameLoop);
            }

// Jump function
            function jump() {
                bird.velocity = -bird.jumpPower;
            }

var frames = 0;
            gameLoop();
        })();
    </script>
</body>
</html>
```