How to replace CSS-character with another and still make the game work-CodePudding

Yoo I'm new to coding, so if this question is quite weird then bear with me. I wanted to make a Flappy Bird game and so I did. And it works fine (not the best Flappy Bird you've ever seen but I'm satisfied)! I set my character to be a red circle, and I now want to change it. I watched a tutorial and made a cool bird. But I have no idea how to replace the red circle named "character" with the bird. I need to change things in the HTML, JS, and CSS I assume but don't know how. I'll show you my code. I have put my css and HTMl code of my bird in, so right now the game is working but a random bird is just flying in the middle of the screen. The red circle works by clicking on the screen and then jumping. Anybody knows how to replace red circle with my bird? Appreciate it :)

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

CodePudding user response：

Remove <div id="character"></div> and add id="character" to<div > like this <div id="character">

you also dont need the character style anymore and needs to be deleted

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

CodePudding user response：

You need to reference your bird in the code. To test it try changing:

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

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

And change:

<div >

<div id="bird" >

CodePudding user response：

Just put bird in character div:

<div id="character">
    <div >
        <div ></div>
        <div ></div>
        <div >
            <div ></div>
        </div>
        <div ></div>
        <div >
            <div ></div>
        </div>
    </div>
</div>

And replace your bird and character styles with this:

.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%; 
}