当前位置：首页 > JavaScript

js实现flybird

2026-04-06 09:33:12JavaScript

使用JavaScript实现Flappy Bird游戏

游戏基本结构

创建一个HTML文件，包含canvas元素用于绘制游戏界面。引入JavaScript文件处理游戏逻辑。

<!DOCTYPE html>
<html>
<head>
    <title>Flappy Bird</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script src="game.js"></script>
</body>
</html>

游戏核心逻辑

在game.js中实现游戏的主要功能。定义小鸟、管道和游戏状态管理。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// 游戏参数
const gravity = 0.5;
const jumpForce = -10;
const pipeWidth = 60;
const pipeGap = 150;
const pipeInterval = 1500;

// 小鸟对象
const bird = {
    x: 50,
    y: canvas.height / 2,
    width: 30,
    height: 30,
    velocity: 0,
    draw() {
        ctx.fillStyle = 'yellow';
        ctx.fillRect(this.x, this.y, this.width, this.height);
    },
    update() {
        this.velocity += gravity;
        this.y += this.velocity;

        // 防止小鸟飞出画布顶部
        if (this.y < 0) {
            this.y = 0;
            this.velocity = 0;
        }
    },
    flap() {
        this.velocity = jumpForce;
    }
};

// 管道数组
let pipes = [];
let score = 0;
let gameOver = false;
let lastPipeTime = 0;

游戏循环和输入处理

设置游戏循环并处理用户输入，实现小鸟跳跃和碰撞检测。

js实现flybird

// 生成新管道
function generatePipe() {
    const minHeight = 50;
    const maxHeight = canvas.height - pipeGap - minHeight;
    const height = Math.floor(Math.random() * (maxHeight - minHeight + 1)) + minHeight;

    pipes.push({
        x: canvas.width,
        height,
        passed: false
    });
}

// 绘制管道
function drawPipes() {
    ctx.fillStyle = 'green';
    pipes.forEach(pipe => {
        // 上管道
        ctx.fillRect(pipe.x, 0, pipeWidth, pipe.height);
        // 下管道
        ctx.fillRect(pipe.x, pipe.height + pipeGap, pipeWidth, canvas.height - pipe.height - pipeGap);
    });
}

// 更新管道位置
function updatePipes() {
    const currentTime = Date.now();
    if (currentTime - lastPipeTime > pipeInterval) {
        generatePipe();
        lastPipeTime = currentTime;
    }

    pipes.forEach(pipe => {
        pipe.x -= 2;

        // 计分逻辑
        if (!pipe.passed && pipe.x + pipeWidth < bird.x) {
            pipe.passed = true;
            score++;
        }
    });

    // 移除屏幕外的管道
    pipes = pipes.filter(pipe => pipe.x + pipeWidth > 0);
}

// 碰撞检测
function checkCollision() {
    // 地面碰撞
    if (bird.y + bird.height > canvas.height) {
        gameOver = true;
    }

    // 管道碰撞
    for (const pipe of pipes) {
        if (bird.x + bird.width > pipe.x && bird.x < pipe.x + pipeWidth) {
            if (bird.y < pipe.height || bird.y + bird.height > pipe.height + pipeGap) {
                gameOver = true;
            }
        }
    }
}

// 游戏循环
function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (!gameOver) {
        bird.update();
        updatePipes();
        checkCollision();
    }

    bird.draw();
    drawPipes();

    // 显示分数
    ctx.fillStyle = 'black';
    ctx.font = '24px Arial';
    ctx.fillText(`Score: ${score}`, 10, 30);

    if (gameOver) {
        ctx.fillStyle = 'red';
        ctx.font = '48px Arial';
        ctx.fillText('Game Over', canvas.width / 2 - 100, canvas.height / 2);
    }

    requestAnimationFrame(gameLoop);
}

// 键盘控制
document.addEventListener('keydown', (e) => {
    if (e.code === 'Space') {
        if (gameOver) {
            // 重置游戏
            bird.y = canvas.height / 2;
            bird.velocity = 0;
            pipes = [];
            score = 0;
            gameOver = false;
            lastPipeTime = Date.now();
        } else {
            bird.flap();
        }
    }
});

// 触摸控制
canvas.addEventListener('click', () => {
    if (gameOver) {
        // 重置游戏
        bird.y = canvas.height / 2;
        bird.velocity = 0;
        pipes = [];
        score = 0;
        gameOver = false;
        lastPipeTime = Date.now();
    } else {
        bird.flap();
    }
});

// 开始游戏
gameLoop();