JavaScript游戏中的设置间隔函数不是每10秒运行一次_Javascript_Html_Css_Setinterval

JavaScript游戏中的设置间隔函数不是每10秒运行一次

javascript html css

JavaScript游戏中的设置间隔函数不是每10秒运行一次,javascript,html,css,setinterval,Javascript,Html,Css,Setinterval,我试图在一个HTML、CSS和JavaScript游戏中给一个圆增加一些重力。相关代码的JavaScript部分如下所示：答复完成本教程和相关部分的学习时间为：06.44分钟 JavaScript: 我认为问题在于最后一点： },10); 但是由于代码没有显示任何语法或其他错误，我无法进一步排除故障。我也玩过CSS，但似乎找不到问题的根源接下来的教程建议10是刷新率，但我认为不是。这10会使球向下移动的速度变慢或变快。我想要的是整个动画球向下移动，每10秒刷新一次简而言之，我希望粉红

我试图在一个HTML、CSS和JavaScript游戏中给一个圆增加一些重力。相关代码的JavaScript部分如下所示：

答复

完成本教程和相关部分的学习时间为：06.44分钟

JavaScript:

我认为问题在于最后一点：

},10);

但是由于代码没有显示任何语法或其他错误，我无法进一步排除故障。我也玩过CSS，但似乎找不到问题的根源

接下来的教程建议10是刷新率，但我认为不是。这10会使球向下移动的速度变慢或变快。我想要的是整个动画球向下移动，每10秒刷新一次

简而言之，我希望粉红球角色元素每10秒持续下降一次。此时它会下降一次，然后从屏幕上掉下来。只有在按下RUN时，它才会再次下降

此项目的HTML为：

Repl不工作

setInterval(function(){
  const previewTop = window.getComputedStyle(character).getPropertyValue("top");
  const oldTop = parseInt(previewTop);

  console.log({ previewTop, oldTop })

  character.style.top = `${previewTop + 3}px`;  
},10);

你能试着把这个记录下来，看看你得到了什么吗？

我很感激你能更详细地向我解释你的问题！我相信我现在能正确地回答这个问题。我感谢你的耐心

所以，当你说“刷新”时，你似乎指的是，在视频中，屏幕右上角出现了一个小GIF，可以看到一个球向下移动，然后突然弹回到起始位置并重复下落。如果这就是您希望复制的内容，那么这个答案应该会有所帮助

您的代码完全符合它的要求。实际上，您在教程中看到的小演示就是您的代码。它的功能与您当前的功能完全相同。在视频中看到球刷新的原因是教程的创建者将其编辑为重复，因此当小预览结束时，它会重置。这使它看起来好像球是重置，而实际上它只是视频。您可以在预览中看到浏览器窗口中的“刷新”按钮的外观在未单击的情况下发生了更改，并且该家伙的光标也进行了远程传输。这让我相信视频是被剪辑的

我真的希望这有帮助

在OP解释她到底需要什么之前，你可以在下面找到我以前的答案。我们双方都有误解

好吧，我想我有几件事要说：

setInterval函数采用两个参数。函数和以毫秒为单位的间隔计时器。现在，传递的函数中的任何代码都将在每次传递x毫秒时运行。举个例子：控制台每隔15毫秒会记录一些信息

好的，现在我们已经讲到了这一点，我看到你在上面的评论中说，接下来的教程建议10是刷新率，但我认为不是。这10会使球向下移动的速度变慢或变快。 10是刷新率。10是向下移动播放器的函数调用之间允许传递的毫秒数，数字10越小，播放器向下移动的速度越快，因为使播放器向下移动的代码执行得越频繁。。。所以这很有道理

现在，我想说的第二件事是：为什么要使用CSS通过JavaScript操纵的HTML元素制作游戏，而不仅仅是使用HTML元素制作游戏？在游戏开发领域中，操纵DOM元素的CSS往往是不可靠的，而且速度也较慢，因为引擎必须不断地重新计算页面的流量和更复杂的。。。这一点好处都没有。它使用更多的代码，运行效率更低，可读性更低，可靠性更低，等等

那么，为什么不简单地使用标签，并使用2D上下文或像p5.js这样的库或类似的东西来操作它呢？你这样做有什么特别的原因吗？

好吧，我想我明白你的意思了

工作：首先，使用setIntervalfunction，使用时间每10毫秒渲染一次球，使球每10毫秒向下移动3点。就像你说的，它看起来会影响速度，但实际上它会影响渲染速度，从而加快渲染速度

解决方案：现在您可以做的是，当球移动到屏幕外时，可以等待第n次渲染，也就是说，您可以将球的位置重置为character.style.top='250px'到它第一次开始的位置

绿色酒吧怎么样？它应该继续以同样的方式滑过吗？这是一个试图复制飞禽的模型。早期阶段。因此，绿色条正在移动，孔在绿色条中产生间隙。绿色条应该滑过去，球应该每10秒持续下落。gravityNo，球不应该是dr

每10秒一次。它应该下降得更频繁。我相信你真正想要的是它每10毫秒下降一次，这是1000倍的频率。如果你想复制游戏，为什么不直接用这家伙的代码来指导呢？@Compoot我相信问题是这里没有人知道问题出在哪里。到目前为止，你指出的唯一有用的东西是建议去阅读教程。。。你不是在告诉我们你需要什么或者你想要什么，你只是在说这不是一个解决所有问题的方法，不是你已经拥有的同一个教程的链接？

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

*{
  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;
}
*/

setInterval(function(){
  const previewTop = window.getComputedStyle(character).getPropertyValue("top");
  const oldTop = parseInt(previewTop);

  console.log({ previewTop, oldTop })

  character.style.top = `${previewTop + 3}px`;  
},10);

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

setInterval(function(){
  var characterTop = 
  parseInt(window.getComputedStyle(character).getPropertyValue("top"));
  character.style.top=(characterTop+3)+"px";
  if(character.offsetTop > game.offsetHeight){
    // Game over
    setTimeout(() => {
      // Reset the ball after 1s
      character.style.top= "250px";
    },1000)
  }else{
    
  }
  },10);```