AI game creator

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

No:34468

←

Prev Next

→

Flappy bird
Developer User16252｜Date and time 24/1/10 15:18:31
Build time 17.436 sec｜Game capacity 4.515KB｜

Script

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

This code implements a basic version of Flappy Bird using HTML5 canvas and JavaScript. It includes the bird and pipe classes, gravity, jumping mechanics, collision detection, score tracking, and game over functionality. You can control the bird's jump using the spacebar or up arrow key on a smartphone. The game will show your score and end when the bird collides with a pipe or hits the ground.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

// Bird class
        class Bird {
            constructor() {
                this.x = 100;
                this.y = 300;
                this.velocity = 0;
                this.width = 40;
                this.height = 30;
            }

update() {
                this.velocity += gravity;
                this.velocity *= 0.9;
                this.y += this.velocity;

if (this.y >= canvas.height - this.height) {
                    this.y = canvas.height - this.height;
                    if (!isGameOver) {
                        endGame();
                    }
                }

if (this.y <= 0) {
                    this.y = 0;
                }
            }

jump() {
                this.velocity -= jumpForce;
            }
        }

// Pipe class
        class Pipe {
            constructor() {
                this.x = canvas.width;
                this.y = Math.random() * (canvas.height - 200) + 100;
                this.width = 80;
                this.height = 400;
            }

update() {
                this.x -= gameSpeed;

if (this.x + this.width <= 0) {
                    this.respawn();
                    score++;
                }

// Check for collision
                if (
                    bird.x < this.x + this.width &&
                    bird.x + bird.width > this.x &&
                    (bird.y < this.y || bird.y + bird.height > this.y + this.height)
                ) {
                    if (!isGameOver) {
                        endGame();
                    }
                }
            }

respawn() {
                this.x = canvas.width;
                this.y = Math.random() * (canvas.height - 200) + 100;
            }
        }

// Game initialization
        function startGame() {
            canvas = document.getElementById('gameCanvas');
            context = canvas.getContext('2d');

bird = new Bird();

pipes = [];
            for (let i = 0; i < 3; i++) {
                pipes.push(new Pipe());
            }

score = 0;
            isGameOver = false;

document.addEventListener('keydown', function(event) {
                if (event.keyCode === 32 || event.keyCode === 38) {
                    bird.jump();
                }
            });

setInterval(update, 1000 / 60); // Update at 60 fps
        }

// Game update
        function update() {
            context.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < pipes.length; i++) {
                pipes[i].update();
                context.fillStyle = '#00AAFF';
                context.fillRect(pipes[i].x, 0, pipes[i].width, pipes[i].height);
                context.fillRect(pipes[i].x, pipes[i].y + pipes[i].height, pipes[i].width, canvas.height - pipes[i].y - pipes[i].height);
            }

bird.update();
            context.fillStyle = '#FF0000';
            context.fillRect(bird.x, bird.y, bird.width, bird.height);

context.fillStyle = '#000000';
            context.font = '24px Arial';
            context.fillText('Score: ' + score, 10, 30);
        }

// Game over
        function endGame() {
            isGameOver = true;
            alert('Game Over! Your score: ' + score);
            location.reload();
        }

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