JavaScript 游戏中的设置间隔功能不是每 10 秒运行一次答案

【问题标题】：Set interval function in JavaScript game is not being run every 10 secondsJavaScript 游戏中的设置间隔功能不是每 10 秒运行一次
【发布时间】：2021-05-08 03:28:24
【问题描述】：

我试图在 HTML、CSS 和 JavaScript 游戏中为圆形添加一些重力。相关代码的JavaScript部分如下：

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

按照本教程和相关部分在：06.44 分钟。

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

我假设问题在于最后一点：

},10);

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

后面的教程建议“10”是刷新率，但我认为不是。那 10 不知何故使球在向下运动中移动得更慢或更快。我想要的是整个动画（球向下移动）保持每 10 秒刷新一次。

简而言之，我希望粉球（角色元素）每 10 秒不断落下。此刻它掉下来一次，然后从屏幕上掉下来。当按下“RUN”时，它才会再次下降。

这个项目的 HTML 是：

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

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

【问题讨论】：

绿条怎么样？它应该继续以同样的方式滑过吗？
这是飞鸟的复制品（已尝试）。早期阶段。所以绿条正在移动，“洞”在绿条中产生间隙。绿条应滑过，球应每 10 秒不断下降。（重力）
不，球不应该每 10 秒落一次。它应该比这更频繁地下降。我相信您真正想要的是它每 10 毫秒下降一次，这是频率的 1000 倍。
如果你想复制游戏，为什么不直接使用那家伙的代码作为指导？
@Compoot 我相信问题是这里没有人知道问题是什么是。到目前为止，您指出“有用”的唯一内容是阅读教程的建议......您并没有告诉我们您需要什么或想要什么，您只是说“这不是解决方案”所有不是指向您已经拥有的同一教程的链接的东西......？

标签： javascript html css setinterval

【解决方案1】：

感谢您更详细地向我解释您的问题！我相信我现在可以正确回答这个问题了。感谢您的耐心等待。

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

您的代码完全符合其应有的样子。您在教程中看到的小演示实际上就是您的确切代码。它的功能与您当前的功能完全相同。你在视频中看到小球“刷新”的原因是因为教程的创建者将它编辑为重复，所以当小预览结束时，它会重置。这使它看起来好像球正在重置，而实际上它只是视频。（你可以在预览中看到浏览器窗口，刷新按钮的外观在没有被点击的情况下发生了变化，并且那个家伙的光标也传送了。这让我相信视频被剪掉了。）

我真的希望这会有所帮助......

在 OP 准确解释她需要什么之前，您可以在下面找到我之前的答案。（我们双方都有误会。）

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

setInterval() 函数有两个参数。一个函数和一个以 毫秒为单位的“间隔计时器”。 现在，函数内部的任何代码都将在每次经过 x 毫秒后运行。举个例子：

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

“某事”将每 15 毫秒记录到控制台。

好的，既然我们已经解决了这个问题，我看到你在上面的一个 cmets 中说“后面的教程建议“10”是刷新率，但我认为不是。那个 10以某种方式使球在向下运动中移动得更慢或更快。” 10 是刷新率。 10 是调用“使玩家向下移动”的函数之间允许传递的毫秒数，数字 10 越小，玩家向下移动的速度越快，因为使玩家移动的代码down 执行得更频繁了......所以这很有意义。

现在，我要说的第二件事是：为什么要使用由 CSS 通过 JavaScript 操作的 HTML 元素制作游戏，而不是仅使用 HTML <canvas> 元素制作游戏？操作 DOM 元素的 CSS 在游戏开发领域往往是不可靠的，而且它也更慢（因为引擎必须不断地重新计算页面的“流量”）并且更复杂......在它没有任何好处全部。（它使用更多代码，运行效率更低，可读性更低，可靠性更低等）那么为什么不简单地使用<canvas> 标签并使用2D 上下文或使用像p5.js 之类的库或类似的东西来操作它呢？你这样做有什么特别的原因吗？

【讨论】：

【解决方案2】：

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

你能试着记录一下看看你得到了什么吗？

【讨论】：

【解决方案3】：

好的，我想我明白了你的要求。

工作：

首先，setInterval(function, time) 用于每 10 毫秒渲染一次球，这样每 10 毫秒球就会向下移动 3 分。所以正如你所说，它看起来会影响速度，但实际上它会影响渲染速度，从而加快速度。

解决办法：

现在您可以做的是，当球移动到屏幕外时，您可以等待第 n 次渲染，即您可以将球 character.style.top = '250px' 的位置重置为第一次开始的位置。

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);```

【讨论】：