Please help me to get this computer game code to work properly?

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

You have a few issues:

Something is off in the ( and ). You may have some in the wrong location and/or too many of one or the other.

There is no such method named getComputedSytle.

RandellDawson, Thank You so much for your help! Much appreciated! Best regards, John