Hi All,
Why won't this JavaScript code work? When I run it in Visual Studio the bird doesn't not move up and down
and there no game over box which restarts the came.
Please see in the link below at 8 hours and 52 minutes.
Best regards,
John
var hole = document.getElementById("hole");
JavaScript
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";
}
var blockLeft =parseInt(window.getComputedStyle(block).getPropertyValue("left"));
var holeTop = parseInt(window.getComputedSytle(hole).getPropertyValue("top"));
var hTop =(500+holeTop);
if((birdTop >450||((blockLeft<50)&&(blockLeft>-50)&&((birdTop<hTop)||(birdTop>hTop+100)))
{
result.style.display="block";
text.innerText='Your final score is :${score}';
game.style.display="none";
score = 0;
}
};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>
<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;
}
Why won't this JavaScript code work? When I run it in Visual Studio the bird doesn't not move up and down
and there no game over box which restarts the came.
Please see in the link below at 8 hours and 52 minutes.
Best regards,
John
var hole = document.getElementById("hole");
JavaScript
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";
}
var blockLeft =parseInt(window.getComputedStyle(block).getPropertyValue("left"));
var holeTop = parseInt(window.getComputedSytle(hole).getPropertyValue("top"));
var hTop =(500+holeTop);
if((birdTop >450||((blockLeft<50)&&(blockLeft>-50)&&((birdTop<hTop)||(birdTop>hTop+100)))
{
result.style.display="block";
text.innerText='Your final score is :${score}';
game.style.display="none";
score = 0;
}
};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>
<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;
}