Please help me to get this computer game code to work correctly

sterianosjohn · August 6, 2022, 8:45am

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

rpg_digital · August 6, 2022, 11:06am

You have a few syntax errors @sterianosjohn .

It is useful to use a linter like eslint. Personally I use standardJS

On pasting your code into vscode, standardJS immediately picked up on your if ((birdTop > 450 ... line and non-matching parentheses.

It is a difficult line to read, am I right in saying it should be

if (
  ( birdTop > 450 || (
      ( blockLeft < 50 && blockLeft > -50 ) && ( birdTop < hTop || birdTop > hTop + 100 )
    )
  )
)

I think the code could be readable.


var withinRangeX = blockLeft < 50 && blockLeft > -50;
var withinRangeY = birdTop < hTop || birdTop > hTop + 100; // should this be && or ||
var withinRangeXY = withinRangeX && withinRangeY;

if ( birdTop > 450 || withinRangeXY) {
    result.style.display = "block";
    text.innerText = 'Your final score is :${score}';
    game.style.display = "none";
    score = 0;
}

You also have a piece of code that needs to be edited at the end of your function. See PaulOB’s post below

};10)

I don’t know if this fixes your hopping bird, but it should be a start.

edit: @sterianosjohn, if you want to check for syntax errors you can paste your code into an online linter.

PaulOB · August 6, 2022, 4:05pm

Shouldn’t it be }, 10); as it’s the end of the setInterval function?

You’ve typed Sytle instead of ‘Style’.
(bird) doesn’t seem to be defined anywhere either. Should there be something like this at the start of the js?

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

You’ve made the same ‘Sytle’ typo here also (getComputedSytle(hole))

I threw the updated code into a codepen to make it easier for the js gurus to debug.

rpg_digital · August 6, 2022, 5:17pm

Well spotted

sterianosjohn · August 7, 2022, 9:05am

Rpg_digital Thank You so much for your help! Really appreciated! Best regards, John

sterianosjohn · August 7, 2022, 9:06am

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

rpg_digital · August 7, 2022, 12:18pm

@sterianosjohn

I have looked at the codepen Paul provided, and dug a bit deeper.

Here is an amended version of the JS.

var hole = document.getElementById("hole");
var game = document.getElementById("game");
var result = document.getElementById("result");
var text = document.getElementById("text");
var bird = document.getElementById("bird");

var score = 0;
var jumping = 0;

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

// e.g. getPosition(bird, "top")
// returns a number
function getPosition(elem, prop) {
  return parseInt(
    window.getComputedStyle(elem).getPropertyValue(prop)
  );
}

hole.addEventListener("animationiteration", randomHole);

// Just for testing with a random hole position at the start
randomHole();

var fall = setInterval(function () {
  var birdTop = getPosition(bird, "top");
  var blockLeft = getPosition(block, "left");
  var holeTop = getPosition(hole, "top") + 500;

  if (jumping === 0) {
    bird.style.top = birdTop + 2 + "px";
  }

  var birdAtBottom = birdTop > 450;
  var blockReachedEnd = blockLeft < 50 && blockLeft > -50;
  var birdCollided = birdTop < holeTop || birdTop > holeTop + 150;

  if (birdAtBottom || (blockReachedEnd && birdCollided)) {
    result.style.display = "block";
    text.innerText = `Your final score is :${score}`;
    game.style.display = "none";
    score = 0;
  }
}, 100); // <- change back to 10

I appreciate it’s a good idea to stick closely to the tutorial, but I couldn’t resist (let’s be honest ) making a few changes.

getPosition

I have made a function called getPosition.

function getPosition(elem, prop) {
  return parseInt(
    window.getComputedStyle(elem).getPropertyValue(prop)
  );
}

Having to type out the following repeatedly I think is longwinded.

var elementTop = parseInt(window.getComputedStyle(element).getPropertyValue("top"))

It is best to keep lines short and with the function you can type this instead

var elementTop = getPosition(element, "top")

holeTop

These two lines are unnecessary and I think hTop is confusing. It took me a minute to figure out what it was.

var holeTop = parseInt(window.getComputedStyle(hole).getPropertyValue("top"));
var hTop =(500+holeTop);

I opted to stick to just holeTop

var holeTop = getPosition(hole, "top") + 500;

or, ands and ors

I made the point about this being a bit difficult to reason with yesterday

if (
  birdTop > 450 ||
    (blockLeft < 50 && blockLeft > -50) &&
    (birdTop < holeTop || birdTop > holeTop + 150)
) {

The beauty of languages like javascript is you can use descriptive names. Having had a better look, I went for this instead.

  var birdAtBottom = birdTop > 450;
  var blockReachedEnd = blockLeft < 50 && blockLeft > -50;
  var birdCollided = birdTop < holeTop || birdTop > holeTop + 150;

  // reads more like English now
  if (birdAtBottom || (blockReachedEnd && birdCollided)) {
    ... collision code here
  }

Here is a codepen

sterianosjohn · August 7, 2022, 1:20pm

Thank You Rpg_digital for your help! Much appreciated!

system · November 6, 2022, 8:21pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.