如何替换Flappy Bird游戏中的CSS角色并保证游戏正常运行

核心思路 #

将自定义Bird的外层容器设为原角色的id="character"，移除原红色圆形样式，调整Bird的定位适配游戏逻辑，修正碰撞检测数值匹配Bird实际尺寸，确保跳跃、碰撞功能正常运行。

1. HTML 修改 #

把原红色圆形的<div id="character"></div>替换为自定义Bird结构，并将Bird外层div设置为id="character"，确保Bird处于游戏容器内部：

<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
    <meta charset="UTF-8">
    <title>Flappy Bird</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="game">
        <div id="block"></div>
        <div id="hole"></div>
        <!-- 替换原红色圆形为自定义Bird，设置id为character -->
        <div id="character" class="bird">
            <div class="body"></div>
            <div class="feather1"></div>
            <div class="eye">
                <div class="eyeball"></div>
            </div>
            <div class="beak"></div>
            <div class="feather2">
                <div class="inner"></div>
            </div>
        </div>
        <div id="score"></div>
    </div>
</body>
<script src="script.js"></script>
</html>

2. CSS 修改 #

• 移除原红色圆形的#character样式
• 调整Bird的定位（删除left:37%，保留初始top:100px），移除干扰的fly动画（避免无规则移动）
• 给#game添加position:relative，确保Bird的绝对定位以游戏容器为参照

body{
    background-color: #cceeff; /* 补充缺失的#号 */
    margin:0px;
    padding: 0px;
}

*{
    padding: 0;
    margin: 0;
}
#game{
    background-color: #cceeff;
    width: 400px;
    height: 500px;
    border: 1px solid black;
    margin: auto;
    overflow: hidden;
    position: relative; /* 新增，确保内部绝对定位元素以game为参照 */
}
#block{
    width: 50px;
    height: 500px;
    background-color: black;
    position: relative;
    left: 400px;
    animation: block 2s infinite linear;
}
@keyframes block{
    0%{left:400px}
    100%{left:-50px}
}
#hole{
    width: 50px;
    height: 150px;
    background-color:  #cceeff;
    position: relative;
    left: 400px;
    top: -500px;
    animation: block 2s infinite linear; 
}
/* 移除原红色圆形样式 */
/* #character{
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
    top: 100px;
    border-radius: 50%; 
} */
#counter{
    width: 60px;
    text-align: center;
    vertical-align: middle;
    line-height: 25px; 
    height: 25px;
    position: absolute;
    top: 10px;
    right: 450px;
    z-index: 100;
    border-radius: 10%;
    background: linear-gradient(to right, #80c6e9, #05ff6d); 
    border: 1.5px solid green;
}

/* 修改Bird样式适配角色逻辑 */
#character.bird{
    background-color: #262626;
    height: 10px;
    width:15px;
    position:absolute;
    top:100px;
    /* 移除left:37%，由JS控制位置 */
    border-radius: 100px 100px 0px 0px;
    /* 移除fly动画，避免无规则移动 */
    /* animation: fly 2s infinite; */
}
/* @keyframes fly{
    50%{transform: translateY(20px);}
} */

.body{
    background-color: #ff6347;
    height: 20px;
    width: 30px;
    position: relative;
    top: 10px;
    right: 15px;
    border-radius: 0px 0px 30px 30px;
}

.feather1{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 15px solid #b3b3ff;
    position: relative;
    right: 25px;
    bottom: 22px;
    transform: rotate(-45deg)
}

.eye{
    background-color: white;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    position: relative;
    bottom: 32px;
    left: 8px;
}

.eyeball{
    background-color: black;
    height: 2px;
    width: 2px;
    border-radius: 50%;
    position: relative;
    top: 1.5px;
    left: 2.5px;

}

.beak{ /*næb*/
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 8px solid #ffdb4d;
    position: relative;
    bottom: 35px;
    left: 15px;
}

.feather2{
    background-color: #262626;
    height: 16px;
    width: 30px;
    border-radius: 0px 0px 30px 30px;
    position: relative;
    bottom: 37px;
    right: 20px;
    animation: flap 1s infinite;
    transform-origin: right;
}
@keyframes flap{
    50%{
        transform: rotate(20deg);
    }
}
.inner{
    background-color: #666666;
    height: 14px;
    width: 26px;
    border-radius: 0px 0px 30px 30px;
    position: relative;
    left: 2px;
}

3. JavaScript 修改 #

调整碰撞检测数值，匹配Bird的实际尺寸（总高度约30px、总宽度约30px），同时修正跳跃上限避免角色跳出屏幕顶部：

var block = document.getElementById("block");
var hole = document.getElementById("hole");
var character = document.getElementById("character");
var jumping = 0;
var counter = 1;

hole.addEventListener('animationiteration', () => {
    var random = -((Math.random()*300)+150);
    hole.style.top = random + "px";
    counter++;
}); 
setInterval(function(){
    var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
    if(jumping==0 ){
        character.style.top = (characterTop+2.5)+"px";
    }
    var blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
    var holeTop = parseInt(window.getComputedStyle(hole).getPropertyValue("top"));
    var cTop = -(500-characterTop);
    // 适配Bird尺寸调整碰撞检测：高度30px，所以characterTop>470；宽度30px，所以blockLeft<30
    if((characterTop>470)||((blockLeft<30)&&(blockLeft>-50)&&((cTop<holeTop)||(cTop>holeTop+130)))){
        alert("Game over. Score: "+(counter-1));
        character.style.top = 100 + "px";
        counter=0;
    }
},10)

function jump(){
    jumping = 1;
    let jumpCount = 0;
    var jumpInterval = setInterval(function(){ 
        var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
        // 调整跳跃上限：Bird高度30px，所以characterTop>10避免跳出顶部
        if((characterTop>10)&&(jumpCount<15)){
            character.style.top = (characterTop-5)+"px";
        }
        if(jumpCount>20){
            clearInterval(jumpInterval);
            jumping=0;
            jumpCount=0;
        }
        jumpCount++;
    },10);
}

内容的提问来源于stack exchange，提问作者betheengineer