JavaScript 游戏中的设置间隔函数不是每 10 秒运行一次 [英] Set interval function in JavaScript game is not being run every 10 seconds
问题描述
我试图在 HTML、CSS 和 JavaScript 游戏中为圆形添加一些重力.相关代码的 JavaScript 部分如下:
repl.ithttps://repl.it/join/wukcvzow-iamapersonthing
遵循本教程和相关部分位于:06.44 分钟.
JavaScript:
var block = document.getElementById(block");varhole = document.getElementById(hole");//为setInterval函数添加这个var character=document.getElementById("character");hole.addEventListener('animationiteration',() => {var random = Math.random()*3;var top = (random*100)+150;hole.style.top=-(top) + "px";});//间隔函数每10毫秒运行一次设置间隔(函数(){var characterTop =//这是重力函数parseInt(window.getComputedStyle(character).getPropertyValue("top"));character.style.top=(characterTop+3)+px"；},10);我假设问题出在最后一点:
},10);但由于代码没有显示任何语法或其他错误，我无法进一步排除故障.我也玩过 CSS，但似乎无法找到问题的根源.
接下来的教程建议10"是刷新率，但我认为不是.那个 10 不知何故使球在向下运动中移动得更慢或更快.我想要的是整个动画(球向下移动)每 10 秒保持刷新一次.
简而言之，我希望粉球(角色元素)每 10 秒不断下降.此刻它下降了一次，然后从屏幕上掉了下来.只有当RUN"出现时它才会再次下降.被按下.
这个项目的 HTML 是:
<头><元字符集=utf-8"><元名称=视口"内容=宽度=设备宽度"><title>FlappyBird</title><link href="style.css";rel=样式表"类型=文本/css"；/><身体><div class="天空"><div class="ground"><div id="游戏"><div id=块"></div><div id=洞"></div><div id="字符"><script src="script.js"></script></html>
和 CSS
<代码>*{填充:0;保证金:0;}#游戏{宽度:400px；高度:500px；边框:1px纯绿黄色；保证金:自动；溢出:隐藏；}#特点{宽度:50px；高度:50px；背景色:rgb(255, 0, 149);位置:绝对；顶部:250px；边界半径:50%；}#堵塞{宽度:50px；高度:500px；背景颜色:绿黄色；位置:相对；左:400像素；动画:block 2s 无限线性；}@关键帧块{0%{left:400px}100%{left:-50px}}#洞{宽度:50px；高度:150px；背景颜色:白色；位置:相对；左:400像素；顶部:-500px；动画:block 2s 无限线性；}/*.天空{背景颜色:浅绿色；宽度:400px；高度:500px；位置:相对；}.地面{背景颜色:棕色；宽度:400px；高度:100px；位置:相对；顶部:500px；}*/感谢您更详细地向我解释您的问题！我相信我现在可以正确回答这个问题了.感谢您的耐心等待.
那么，当您说刷新"时，您似乎指的是什么?就是，在视频中，屏幕右上方出现一个小 GIF，可以看到一个球向下移动，然后突然弹回起始位置并重复下落.如果这是您要复制的内容，那么此答案应该会有所帮助.
您的代码完全正确.您在教程中看到的小演示实际上就是您的确切代码.它的功能与您目前的功能完全一样.你看到球刷新"的原因视频中是因为教程的制作者编辑了重复，所以小预览结束后就重置了.这使它看起来好像球正在重置，而实际上它只是视频.(你可以看到预览中的浏览器窗口，刷新按钮在没有被点击的情况下改变了外观，并且那个家伙的光标也在传送.这让我相信视频被剪切了.)
我真的希望这会有所帮助...
在 OP 准确解释她需要什么之前，您可以在下面找到我之前的答案.(我们双方都存在误解.)
好吧，我想我有几件事要说:
setInterval()函数接受两个参数.一个函数和一个间隔定时器"以毫秒为单位.现在，每次传递 x 毫秒数时，传递的函数内部的任何代码都将运行.举个例子:
setInterval(() => {console.log("something")},15);某物"将每 15 毫秒记录到控制台.
好的，既然我们已经解决了这个问题，我看到你在上面的一条评论中说接下来的教程建议10"是刷新率，但我认为不是.那个 10 不知何故使球在向下运动中移动得更慢或更快."10 是 刷新率.10 是允许在调用向下移动玩家"的函数之间传递的毫秒量，数字 10 越小，玩家向下移动的速度越快，因为使玩家移动的代码向下移动被更频繁地执行......所以这是完全有道理的.
现在，我想说的第二件事是:为什么要使用由 CSS 通过 JavaScript 操作的 HTML 元素制作游戏，而不是仅使用 HTML 元素制作游戏?在游戏开发领域，操纵 DOM 元素的 CSS 往往不可靠，而且速度也较慢(因为引擎必须不断重新计算页面的流程")并且更加复杂......没有任何好处根本.(它使用更多代码，运行效率更低，可读性更低，可靠性更低等)那么为什么不简单地使用 <canvas> 标签并使用 2D 上下文或使用像 p5.js 这样的库或类似的东西来操作它呢?你这样做有什么特别的原因吗?
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.
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;
}
*/
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?
这篇关于JavaScript 游戏中的设置间隔函数不是每 10 秒运行一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
