AI game creator

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

No:9334

115

←

Prev Next

→

Flappy bird
Developer User4338｜Date and time 23/7/23 19:21:51
Build time 15.994 sec｜Game capacity 2.677KB｜

Script

←

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;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// 定义鸟的相关信息
        var bird = new Image();
        bird.src = "path/to/bird-image.png";
        var birdX = 50;
        var birdY = canvas.height / 2 - 25;
        var birdVelocity = 0;
        var gravity = 0.5;

// 定义管道的相关信息
        var pipeTop = new Image();
        pipeTop.src = "path/to/pipe-top.png";
        var pipeBottom = new Image();
        pipeBottom.src = "path/to/pipe-bottom.png";
        var pipeGap = 80;
        var pipes = [];
        pipes[0] = {
            x: canvas.width,
            y: 0
        };

// 监听点击事件，使鸟上升
        document.addEventListener("click", function () {
            birdVelocity = -8;
        });

function draw() {
            // 绘制背景
            context.fillStyle = "#70c5ce";
            context.fillRect(0, 0, canvas.width, canvas.height);

// 绘制鸟
            context.drawImage(bird, birdX, birdY);

// 绘制管道
            for (var i = 0; i < pipes.length; i++) {
                var constant = pipeTop.height + pipeGap;
                context.drawImage(pipeTop, pipes[i].x, pipes[i].y);
                context.drawImage(pipeBottom, pipes[i].x, pipes[i].y + constant);
                
                // 更新管道位置
                pipes[i].x--;

// 检测碰撞
                if (birdX + bird.width >= pipes[i].x && birdX <= pipes[i].x + pipeTop.width &&
                    (birdY <= pipes[i].y + pipeTop.height || birdY + bird.height >= pipes[i].y + constant) ||
                     birdY + bird.height >= canvas.height) {
                    // 游戏结束
                    location.reload();
                }

// 添加新管道
                if (pipes[i].x == canvas.width - 100) {
                    pipes.push({
                        x: canvas.width,
                        y: Math.floor(Math.random() * pipeTop.height) - pipeTop.height
                    });
                }
            }

// 鸟下落
            birdVelocity += gravity;
            birdY += birdVelocity;

// 循环调用绘制函数
            requestAnimationFrame(draw);
        }

// 开始游戏
        draw();
    </script>
</body>
</html>