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
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