当前位置：首页 > article >正文

js+jqeury纯前端实现像素鸟小游戏

article 2024/11/25 15:47:46

javascript，jquery不只能够写前端系统，也可以开发一些经典的小游戏。比如这个像素鸟小游戏，可以下载到本地直接双击index.html即可运行。

项目展示

进入游戏

开始游戏

游戏结束

游戏画面

代码展示

html文件

<!DOCTYPE html>
<html>
<head>
    <title>像素鸟游戏</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="game-container">
        <div id="start-screen">
            <h1>像素鸟</h1>
            <p>游戏说明：</p>
            <ul>
                <li>点击空格键或鼠标让小鸟跳跃</li>
                <li>避开所有的管道障碍物</li>
                <li>撞到管道或地面游戏结束</li>
            </ul>
            <button id="start-button">开始游戏</button>
        </div>
        
        <div id="game-screen" style="display: none;">
            <div id="bird"></div>
            <div class="score">得分：<span id="score">0</span></div>
        </div>
        
        <div class="overlay"></div>
        <div id="game-over" style="display: none;">
            <h2>游戏结束</h2>
            <p>最终得分：<span id="final-score">0</span></p>
            <button id="restart-button">重新开始</button>
        </div>
    </div>
    <script src="game.js"></script>
</body>
</html>

css文件

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.game-container {
    width: 100vw;
    height: 100vh;
    margin: 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(#70c5ce, #b3e0e5);
}

#bird {
    width: 50px;
    height: 50px;
    background: #f7ec3c;
    position: absolute;
    left: 15%;
    border-radius: 50%;
    z-index: 2;
}

.pipe {
    width: 100px;
    position: absolute;
    right: -100px;
    background: #73bf2e;
    border: 3px solid #2c5e1e;
    z-index: 1;
}

.score {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 48px;
    color: white;
    z-index: 10;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

#start-screen, #game-over {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    min-width: 300px;
    z-index: 100;
}

#start-screen h1 {
    font-size: 48px;
    margin-bottom: 20px;
    color: #333;
}

#start-screen ul {
    text-align: left;
    font-size: 20px;
    margin: 20px 0;
}

button {
    padding: 15px 30px;
    font-size: 24px;
    cursor: pointer;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 10px;
    transition: all 0.3s ease;
}

button:hover {
    background: #45a049;
    transform: scale(1.05);
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

js文件

$(document).ready(function() {
    let gameLoop;
    let birdPos = window.innerHeight / 2;
    let score = 0;
    let gravity = 4;
    let isJumping = false;
    let gameStarted = false;
    const jumpForce = 10;
    const gameSpeed = 3;
    const birdStartPosition = window.innerHeight / 2;

    // 开始游戏
    $('#start-button').click(startGame);
    $('#restart-button').click(startGame);

    function startGame() {
        resetGame();
        $('#start-screen').hide();
        $('#game-over').hide();
        $('.overlay').hide();
        $('#game-screen').show();
        gameStarted = true;
        gameLoop = setInterval(updateGame, 20);
        createPipe();
    }

    function resetGame() {
        birdPos = birdStartPosition;
        score = 0;
        $('#score').text(0);
        $('.pipe').remove();
        $('#bird').css('top', birdPos);
    }

    // 跳跃控制
    $(document).on('keydown mousedown', function(e) {
        if ((e.keyCode === 32 || e.type === 'mousedown') && gameStarted) {
            isJumping = true;
            setTimeout(() => isJumping = false, 150);
        }
    });

    // 添加管道间距控制
    let lastPipeTime = 0;
    const minPipeInterval = 1800; // 最小管道生成间隔(ms)
    
    function createPipe() {
        if (!gameStarted) return;

        const currentTime = Date.now();
        if (currentTime - lastPipeTime < minPipeInterval) {
            setTimeout(createPipe, 100);
            return;
        }

        const gapSize = 200; // 垂直通道大小
        const minTop = 100; // 最小顶部距离
        const maxTop = window.innerHeight - gapSize - 100; // 最大顶部距离
        
        // 确保通道位置在合理范围内
        let gapTop = Math.floor(Math.random() * (maxTop - minTop)) + minTop;
        
        // 创建上方管道
        $('<div>')
            .addClass('pipe')
            .css({
                height: gapTop,
                top: 0
            })
            .appendTo('.game-container');

        // 创建下方管道
        $('<div>')
            .addClass('pipe')
            .css({
                height: window.innerHeight - gapTop - gapSize,
                bottom: 0
            })
            .appendTo('.game-container');

        lastPipeTime = currentTime;
        
        // 递归创建下一组管道
        setTimeout(createPipe, minPipeInterval);
    }

    function updateGame() {
        // 更新小鸟位置
        if (isJumping) {
            birdPos -= jumpForce;
        } else {
            birdPos += gravity;
        }
        $('#bird').css('top', birdPos);

        // 检测碰撞
        if (checkCollision()) {
            gameOver();
        }

        // 更新管道位置
        $('.pipe').each(function() {
            let pipePos = $(this).position().left;
            $(this).css('left', pipePos - gameSpeed);

            // 计分逻辑优化：只在通过上方管道时计分
            if (pipePos <= window.innerWidth * 0.15 && 
                !$(this).hasClass('scored') && 
                $(this).css('top') === '0px') {
                score++;
                $('#score').text(score);
                $(this).addClass('scored');
                $(this).next('.pipe').addClass('scored'); // 标记配对的下方管道
            }

            // 删除超出屏幕的管道
            if (pipePos < -100) {
                $(this).remove();
            }
        });
    }

    // 优化碰撞检测
    function checkCollision() {
        if (birdPos <= 0 || birdPos >= window.innerHeight - 50) return true;

        let collision = false;
        $('.pipe').each(function() {
            let pipe = $(this);
            let pipePos = pipe.position();
            
            // 增加一点碰撞容差，使游戏体验更好
            const collisionTolerance = 5;
            const birdLeft = window.innerWidth * 0.15 + collisionTolerance;
            const birdRight = window.innerWidth * 0.15 + 50 - collisionTolerance;
            const birdTop = birdPos + collisionTolerance;
            const birdBottom = birdPos + 50 - collisionTolerance;

            if (
                birdRight > pipePos.left &&
                birdLeft < pipePos.left + 100 &&
                birdBottom > pipePos.top &&
                birdTop < pipePos.top + pipe.height()
            ) {
                collision = true;
                return false;
            }
        });

        return collision;
    }

    function gameOver() {
        clearInterval(gameLoop);
        gameStarted = false;
        $('#final-score').text(score);
        $('#game-screen').hide();
        $('.overlay').fadeIn(300); // 显示遮罩层
        $('#game-over').fadeIn(300); // 使用淡入效果显示游戏结束界面
    }

    // 添加窗口大小改变的处理
    $(window).resize(function() {
        if (!gameStarted) {
            birdPos = window.innerHeight / 2;
            $('#bird').css('top', birdPos);
        }
    });
});