html - Set interval function in JavaScript game is not being run every 10 seconds

Question

Welcome To Ask or Share your Answers For Others

html - Set interval function in JavaScript game is not being run every 10 seconds

posted Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

html - Set interval function in JavaScript game is not being run every 10 seconds

I attempting to add some gravity to a round circle in a HTML, CSS and JavaScript game. The JavaScript section of the relevant code is below:

repl.it https://repl.it/join/wukcvzow-iamapersonthing

Following this tutorial and the relevant part is at: 06.44 minutes.

https://youtu.be/3SsYZDJdeXk

JavaScript:

var block = document.getElementById("block");
var hole = document.getElementById("hole");
//add this for the setInterval function
var character=document.getElementById("character");

hole.addEventListener('animationiteration',() => {
  var random = Math.random()*3;
  var top = (random*100)+150;
  hole.style.top=-(top) + "px";
});

//interval function runs every 10 milliseconds

setInterval(function(){
  var characterTop = 
  //this is the gravity function
  parseInt(window.getComputedStyle(character).getPropertyValue("top"));
  character.style.top=(characterTop+3)+"px";
  
  },10);

I am assuming the issue lies in this last bit:

},10);

but as the code is not showing any syntax or other errors, I cannot troubleshoot further. I have also played around with the CSS but cannot seem to find the source of the problem.

The tutorial followed suggested that the "10" was the refresh rate, but I think it is not. That 10 somehow makes the ball move slower or faster in a downward motion. What i want is for the whole animation (ball moving down) to keep refreshing every 10 seconds.

In short, I wish for the pink ball (character element) to continually drop down every 10 seconds. At the moment it drops down ONCE, and then falls off the screen. It only then drops down again, when "RUN" is pressed.

The HTML for this project is:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>FlappyBird</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

    <div class="sky">
    <div class="ground">


    <div id="game">
      
     
      <div id="block"></div>
      <div id="hole"></div>
      <div id="character">
        
      </div>
</div>
    <script src="script.js"></script>
  </body>
</html>

And the CSS

*{
  padding:0;
  margin:0;
  
}

#game{
  width:400px;
  height:500px;
  border: 1px solid greenyellow;
  margin:auto;
  overflow:hidden;
}


#character{
width:50px;
height:50px;
background-color:rgb(255, 0, 149);
position: absolute;
top:250px;
border-radius:50%;

}

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

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

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

}

/*

.sky{
  background-color:aqua;
  width:400px;
  height:500px;
  position: relative;
}

.ground{
  background-color:brown;
  width:400px;
  height:100px;
  position: relative;
  top:500px;
}
*/

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2022-01-31T07:21:34+0000

I appreciate you explaining your question to me in greater detail! I believe I can properly answer the question now. I appreciate your patience.

So, what you seem to be referring to when you say "refresh" is that, in the video, a small GIF appears in the upper right of the screen and a ball can be seen moving downward and then suddenly snapping back into its starting position and repeating the fall. If this is what you're looking to replicate, then this answer should help.

Your code is exactly as it should be. The small demo you see play in the tutorial is, in fact, your exact code. It functions exactly as yours currently does. The reason you see the ball "refresh" in the video is because the creator of the tutorial edited it to repeat, so when the small preview ended, it reset. This made it appear as if the ball was resetting, when really it was just the video. (You can see that the browser window in the preview that the refresh button changes in appearance without being clicked, and the guy's cursor teleports as well. This is what lead me to believe the video was cut.)

I really hope this helps...

Below you can find my previous answer before OP explained exactly what she needed. (There was a misunderstanding on both of our parts.)

Okay I think I have a few things to say here:

The setInterval() function takes two parameters. A function, and an "interval timer" which is in milliseconds. Now, whatever code is inside the function passed will be run every time x amount of milliseconds passed. Take this example:

setInterval(() => {console.log("something")},15);

"something" will be logged to the console every 15 milliseconds.

Okay, now that we have that out of the way, I see you say in one of your comments above that "The tutorial followed suggested that the "10" was the refresh rate, but I think it is not. That 10 somehow makes the ball move slower or faster in a downward motion." 10 is the refresh rate. 10 is the amount of milliseconds that are allowed to pass between calls to the function that "moves the player in a downward motion", and the lower the number 10 is, the faster the player will move down since the code that makes the player move down is being executed more frequently... So this makes perfect sense.

Now, the second thing I want to say is this: Why make a game using HTML elements manipulated by CSS through JavaScript instead of just making a game using the HTML <canvas> element? Manipulating the CSS of DOM elements tends to be unreliable in the game development realm, and it's also slower (since the engine has to continually re-calculate the "flow" of the page) and more complex... There's no benefit to it at all. (It uses more code, it runs more inefficiently, it's less readable, it's less reliable, etc) So why don't you simply use the <canvas> tag and manipulate it using the 2D context or using a library like p5.js or something similar? Is there any particular reason you're doing it the way you're doing it?

Categories

html - Set interval function in JavaScript game is not being run every 10 seconds

html - Set interval function in JavaScript game is not being run every 10 seconds

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags