Haz un juego flappy bird,y para reintentar tienes que tocar la pantalla, también un contador de puntos y de las veces que perdiste.'s game

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

No:41569

←

Prev Next

→

Haz un juego flappy bird,y para reintentar tienes ..ALL
Developer User18058｜Date and time 24/2/8 12:56:30
Build time 13.825 sec｜Game capacity 5.785KB｜

Script

Score: 0 Attempts: 0

←

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 #000;
            background: #f0f0f0;
            display: block;
            margin: 20px auto;
        }
        #score {
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
            max-width: 200px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="score">
        <span>Score: 0</span>
        <span>Attempts: 0</span>
    </div>
    <canvas id="game"></canvas>

// Defining game variables
            var bird;
            var pipes;
            var gameStarted;
            var score;
            var attempts;

function Bird() {
                // Bird properties
                this.width = 30;
                this.height = 30;
                this.x = 100;
                this.y = canvas.height / 2 - this.height / 2;
                this.gravity = 0.5;
                this.velocity = 0;

// Bird methods
                this.update = function() {
                    this.velocity += this.gravity;
                    this.y += this.velocity;
                };

this.draw = function() {
                    ctx.fillStyle = "#ffbc44";
                    ctx.fillRect(this.x, this.y, this.width, this.height);
                };

this.isCrashed = function() {
                    if (this.y + this.height > canvas.height || this.y < 0) {
                        return true;
                    }
                    for (var i = 0; i < pipes.length; i++) {
                        if (
                            this.x < pipes[i].x + pipes[i].width &&
                            this.x + this.width > pipes[i].x &&
                            (this.y < pipes[i].topHeight ||
                                this.y + this.height > pipes[i].topHeight + pipes[i].gap)
                        ) {
                            return true;
                        }
                    }
                    return false;
                };

this.jump = function() {
                    this.velocity = -10;
                };
            }

function Pipe() {
                // Pipe properties
                this.width = 50;
                this.gap = 150;
                this.topHeight = Math.random() * (canvas.height - this.gap - 100) + 50;
                this.x = canvas.width;

// Pipe methods
                this.update = function() {
                    this.x -= 2;
                };

this.draw = function() {
                    ctx.fillStyle = "#147c26";
                    ctx.fillRect(this.x, 0, this.width, this.topHeight);
                    ctx.fillRect(this.x, this.topHeight + this.gap, this.width, canvas.height - this.topHeight - this.gap);
                };
            }

function startGame() {
                // Initialize game variables
                bird = new Bird();
                pipes = [];
                gameStarted = false;
                score = 0;
                attempts = 0;

canvas.addEventListener("click", function() {
                    if (!gameStarted) {
                        gameStarted = true;
                    }
                    bird.jump();
                });

var interval = setInterval(function() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);

if (gameStarted) {
                        // Update bird position
                        bird.update();
                        // Draw bird
                        bird.draw();

// Update pipe positions
                        for (var i = 0; i < pipes.length; i++) {
                            pipes[i].update();
                            pipes[i].draw();

// Check collision with pipes
                            if (bird.isCrashed()) {
                                clearInterval(interval);
                                attempts++;
                                document.getElementById("score").children[1].innerHTML = "Attempts: " + attempts;
                                setTimeout(function() {
                                    startGame();
                                }, 1000);
                            }

// Check if bird passed a pipe
                            if (pipes[i].x === bird.x - pipes[i].width) {
                                score++;
                                document.getElementById("score").children[0].innerHTML = "Score: " + score;
                            }

// Remove pipes that are out of the canvas
                            if (pipes[i].x + pipes[i].width < 0) {
                                pipes.splice(i, 1);
                            }
                        }

// Add new pipe every 100 frames
                        if (frames % 100 === 0) {
                            pipes.push(new Pipe());
                        }
                    } else {
                        // Draw initial screen
                        ctx.fillStyle = "#000";
                        ctx.font = "30px Arial";
                        ctx.fillText("Click to Start", canvas.width / 2 - 100, canvas.height / 2);
                    }
                }, 1000 / 60);

var frames = 0;
            }

startGame();
        };
    </script>

</body>
</html>