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

Question

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

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

按照本教程进行操作，相关部分位于：06.44 分钟。

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秒不断掉落。目前它掉落一次，然后从屏幕上掉下来。只有当按下“运行”时，它才会再次下降。

这个项目的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;
}
*/

Answer 1

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

你能尝试记录这个并看看你得到了什么吗？

Answer 2

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

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

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

我真的希望这对您有所帮助...

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

好吧，我想我有几点要说：

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

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

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

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

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

Answer 3

好的，我想我明白你的问题了。

工作：

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

解决方案：

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

JS

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

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

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

html

javascript

css

setinterval

工作：

解决方案：

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

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

html

javascript

css

setinterval

工作：

解决方案：

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