如何用另一个CSS字符替换CSS字符，并使游戏正常工作

Question

Yoo我是编码新手，所以如果这个问题很奇怪，请耐心等待。我想做一个"Flappy Bird"游戏，所以我做到了。而且效果很好(不是你见过的最好的Flappy Bird，但我很满意(！我把我的角色设置成一个红圈，现在我想改变它。我看了一个教程，做了一只很酷的鸟。但我不知道如何替换名为"；字符"；和那只鸟在一起。我需要更改HTML、JS和CSS中的内容，但我不知道如何更改。我会给你看我的密码。我已经把我的小鸟的CSS和HTML代码放进去了，所以现在游戏正在运行，但一只随机的小鸟正在屏幕中间飞行。红色圆圈的工作原理是点击屏幕然后跳跃。有人知道如何用我的鸟代替红圈吗？感谢：(

var block = document.getElementById("block");
var hole = document.getElementById("hole");
var character = document.getElementById("character");
var jumping = 0; /*jumping er altid 0 med mindre funktionen kører*/
var counter = 1;
hole.addEventListener('animationiteration', () => { /* denne funktion vil køre hver gang animationen gør*/
var random = -((Math.random()*300)+150); /*returnerer et random, negativt tal mellem 150-450*/
hole.style.top = random + "px"; /*toppen eller hvad der var den røde del bliver nu random ( minus 150-450) */
counter++;
}); 
setInterval(function(){
var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
if(jumping==0 ){ /*gravity-funktionen kører kun når vi ikke jumper*/
character.style.top = (characterTop+2.5)+"px"; /*vi sætter hvad character.top var + tre så den får en tyngdekraft-effekt*/
}
var blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
var holeTop = parseInt(window.getComputedStyle(hole).getPropertyValue("top"));
var cTop = -(500-characterTop); 
if((characterTop>480)||((blockLeft<20)&&(blockLeft>-50)&&((cTop<holeTop)||(cTop>holeTop+130)))){ /*game over: hvis toppen af character er under bunden ||  ... ||  ...*/
alert("Game over. Score: "+(counter-1));
character.style.top = 100 + "px";
counter=0;
}
},10) /*kører hver 10 ms og opdaterer top-position af vores character (cirkel)*/

function jump(){
jumping = 1; /*hver gang jumping funktionen bliver brugt hopper character med 1*/
let jumpCount = 0; /*counter der tæller hvor mange gange intervallet er kørt, så vi ikke bliver ved med at hoppe forever*/
var jumpInterval = setInterval(function(){ 
var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
if((characterTop>6)&&(jumpCount<15)){ /*gør at character ikke kan hoppe ud af skærmen og at interval ikke kan blive højere end (til og med) 15*/
character.style.top = (characterTop-5)+"px"; /*hvor meget character hopper */
}
if(jumpCount>20){
clearInterval(jumpInterval);
jumping=0; //slutningen af vores funktion, sætter gravity igang igen
jumpCount=0;
}
jumpCount++;
},10);
}

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; /* makes everything out of the game div hidden*/
}
#block{
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear; /*gør det uendeligt*/
}
@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{
background-color: #262626;
height: 10px;
width:15px;
position:absolute;
top:100px;
left: 37%;
border-radius: 100px 100px 0px 0px;
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;
}

<!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>
<div id="character"></div>
<div id="score"></div>
<div 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>
</body>
<script src="script.js"></script>
</html>

Answer 1

删除<div id="character"></div>并将id="character"添加到<div class="bird">中，如<div class="bird" id="character">

你也不需要角色风格了，需要删除

#character {
width: 20px;
height: 20px;
position: absolute;
top: 100px;
border-radius: 50%; }

Answer 2

您需要在代码中引用您的鸟。要测试它，请尝试更改：

var character = document.getElementById("character");

至

var character = document.getElementById("bird");

和变化：

<div class="bird">

至

<div id="bird" class="bird">

Answer 3

只需将鸟放在字符div:中

<div id="character">
<div 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>

并将你的鸟和角色风格替换为：

.bird {
background-color: #262626;
height: 10px;
width:15px;
position:absolute;
left: 37%;
border-radius: 100px 100px 0px 0px;
animation: fly 2s infinite;
}
#character {
width: 20px;
height: 20px;
position: absolute;
top: 100px;
border-radius: 50%; 
}