Please Help?

Joined
Jul 15, 2022
Messages
2
Reaction score
0
Please help? Looking at the Html code, CSS code and JavaScript code below why doesn't Game Over show on the screen?
Html Code
<!DOCTYPE html>
<html lang="en">
<head>
<body>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flappy Bird</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="game">
<div id="block"></div>
<div id="hole"></div>
<div id="bird"><img src="Bird1.png" alt="Bird"></div>
<div id="result">
<h1>Game Over</h1>
<p id="text"></p>
<button id="btn" onclick="location.reload()">Restart</button>
</div>
<script src="script.js"></script>
</body>
</html>


CSS Code

*{
margin:0;
padding:0;
}

body{
background-color: cadetblue;
background-image: -webkit-repeating-linear-gradient(rgb(175,75,75),rgb(31,31,31),rgb(59,153,148));
min-height: 800px;
}

#game{
height: 500px;
width: 400px;
border: 1px solid black;
background:url(bg2.jpg) ;
background-size: cover;
margin: 1rem auto;
overflow: hidden;
}

#block{
width: 50px;
height: 500px;
background-color:blue;
position: relative;
left: 400px;
animation: block 2s linear infinite;
}

@keyframes block{
0%{
left: 400px;
}
100%{
left: -50px;
}
}

#hole{
height: 150px;
width: 50px;
background-color: yellow;
position: relative;
left: 400px;
top:-500px;
animation: block 2s linear infinite;
}

#bird{
position: fixed;
top: 100px;
height: 50px;
width: 50px
}

#bird img{
height: 50px;
width: 50px;
}

#result{
height:200px;
width: 500px;
background-color: brown;
margin: 5rem auto;
border: 2px solid white;
border-radius: 20px;
/*display: none;*/
text-align: center;
}

#btn{
padding:0.5rem 1rem;
border: none;
border-radius: 11px;
background-color: green;
color: white;
font-size: 1.5rem;
text-transform:uppercase;
margin-top: 1rem;
cursor: pointer;
}
#text{
margin-top: 1rem;
font-size: 2rem;
color: seashell;
}


JavaScript Code:

var hole = document.getElementById("hole");
var game = document.getElementById("game");
var result = document.getElementById("result");
var text = document.getElementById("text")
var score = 0;
var jumping = 0;
hole.addEventListener("animationiteration",RanHole)

function RanHole(){
var random =-((Math.random()*350)+150);
hole.style.top = random+"px";

}

var fall = setInterval(function(){}){
var birdTop = parseInt(window.getComputedSytle(bird).getPropertyValue("top"));
if(jumping==0){

bird.style.top=(birdTop+2)+"px";

}
},10;)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Staff online

Members online

Forum statistics

Threads
473,767
Messages
2,569,571
Members
45,045
Latest member
DRCM

Latest Threads

Top