Flappy bird but 3D and with 20 fps's game

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

No:42650

←

Prev Next

→

Flappy bird but 3D and with 20 fps
Developer User18853｜Date and time 24/2/12 12:33:23
Build time 13.224 sec｜Game capacity 4.68KB｜

Script

Você é um programador. Ele deve ser implementado como um único arquivo HTML. Ele deve conter JavaScript. Ele deve estar dentro das tags de script. Ele deve ser escrito como um programa real. O processamento deve ser iniciado. Eu posso jogar como um jogo acabado. Faça um jogo. Supondo operação em smartphones. Use pictogramas se possível. Resposta em Português.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird 3D</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

canvas {
            background-color: skyblue;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="500" height="500"></canvas>

var bird = {
                x: 100,
                y: canvas.height / 2,
                radius: 20,
                velocity: 0,
                gravity: 1,
                jump: -15,
                color: "yellow",
              
                draw: function () {
                    context.beginPath();
                    context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                    context.fillStyle = this.color;
                    context.fill();
                    context.closePath();
                },
              
                update: function () {
                    this.velocity += this.gravity;
                    this.y += this.velocity;
                    if (this.y >= canvas.height - this.radius) {
                        this.y = canvas.height - this.radius;
                        this.velocity = 0;
                    }

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

jump: function () {
                    this.velocity += this.jump;
                }
            };

var pipes = [];
            var pipeGap = 150;
            var pipeSpeed = 2;
            var lastPipeX = canvas.width;
            var pipeWidth = 80;
            var pipeColor = "green";

function createPipes() {
                var randomY = Math.floor(Math.random() * (canvas.height - 2 * pipeGap)) + pipeGap;
                pipes.push({
                    x: lastPipeX + canvas.width / 2,
                    y: randomY
                });
            }

function updatePipes() {
                for (var i = 0; i < pipes.length; i++) {
                    pipes[i].x -= pipeSpeed;

if (pipes[i].x <= -pipeWidth) {
                        pipes.splice(i, 1);
                        i--;
                    } else if (bird.x >= pipes[i].x &&
                        bird.x <= pipes[i].x + pipeWidth &&
                        (bird.y <= pipes[i].y ||
                            bird.y + bird.radius >= pipes[i].y + pipeGap)) {
                        gameOver();
                    }
                }
            }

function drawPipes() {
                for (var i = 0; i < pipes.length; i++) {
                    drawPipe(pipes[i]);
                }
            }

function drawPipe(pipe) {
                context.beginPath();
                context.rect(pipe.x, 0, pipeWidth, pipe.y);
                context.rect(pipe.x, pipe.y + pipeGap, pipeWidth, canvas.height - pipe.y - pipeGap);
                context.fillStyle = pipeColor;
                context.fill();
                context.closePath();
            }

function drawScore() {
                context.font = "16px Arial";
                context.fillStyle = "black";
                context.fillText("Score: " + score, 10, 20);
            }

function gameOver() {
                clearInterval(gameLoop);
                alert("Game Over!");
            }

function updateGame() {
                context.clearRect(0, 0, canvas.width, canvas.height);

bird.draw();
                bird.update();

if (pipes.length === 0 || lastPipeX - pipes[pipes.length - 1].x >= canvas.width / 2) {
                    createPipes();
                }

updatePipes();
                drawPipes();
                drawScore();
            }

var gameLoop = setInterval(updateGame, 1000 / 20);

document.addEventListener("click", function () {
                bird.jump();
            });
        };
    </script>
</body>
</html>