有没有一种简单的方法可以在 JavaScript 中制作游戏循环？就像是...
onTimerTick() {
// update game state
}
问问题
38164 次
7 回答
33
根据您的应用程序，有多种方法可以使用 JavaScript 实现此目的。setInterval() 甚至带有 while() 语句都可以解决问题。这不适用于游戏循环。JavaScript 由浏览器解释，因此很容易出现中断。中断会让你的游戏回放感到紧张。
CSS3 的 webkitRequestAnimationFrame 属性旨在通过管理渲染循环本身来纠正这个问题。但是，这仍然不是执行此操作的最有效方法，并且如果您要更新大量对象，则很容易出现抖动。
这是一个很好的入门网站：
http://nokarma.org/2011/02/02/javascript-game-development-the-game-loop/index.html
这个网站有一些关于制作游戏循环的基础知识的很好的信息。它没有以任何方式触及任何类型的面向对象设计。实现精确计时的最准确方法是使用日期函数。
while ((new Date).getTime() > nextGameTick && loops < maxFrameSkip) {
Game.update();
nextGameTick += skipTicks;
loops++;
}
这没有考虑 setTimeout 在高频下如何漂移。这也将导致事情变得不同步并变得紧张不安。JavaScript 会以每秒 +/- 18 毫秒的速度漂移。
var start, tick = 0;
var f = function() {
if (!start) start = new Date().getTime();
var now = new Date().getTime();
if (now < start + tick*1000) {
setTimeout(f, 0);
} else {
tick++;
var diff = now - start;
var drift = diff % 1000;
$('<li>').text(drift + "ms").appendTo('#results');
setTimeout(f, 990);
}
};
setTimeout(f, 990);
现在让我们将所有这些放到一个工作示例中。我们想将我们的游戏循环注入到 WebKit 的托管渲染循环中。这将有助于平滑渲染的图形。我们还想拆分绘制和更新函数。这将在计算应该何时绘制下一帧之前更新渲染场景中的对象。如果更新时间过长，游戏循环也应该跳过画帧。
索引.html
<html>
<head>
<!--load scripts-->
</head>
<!--
render canvas into body, alternative you can use div, but disable
right click and hide cursor on parent div
-->
<body oncontextmenu="return false" style="overflow:hidden;cursor:none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;">
<script type="text/javascript" charset="utf-8">
Game.initialize();
window.onEachFrame(Game.run);
</script>
</body>
</html>
游戏.js
var Game = {};
Game.fps = 60;
Game.maxFrameSkip = 10;
Game.skipTicks = 1000 / Game.fps;
Game.initialize = function() {
this.entities = [];
this.viewport = document.body;
this.input = new Input();
this.debug = new Debug();
this.debug.initialize(this.viewport);
this.screen = new Screen();
this.screen.initialize(this.viewport);
this.screen.setWorld(new World());
};
Game.update = function(tick) {
Game.tick = tick;
this.input.update();
this.debug.update();
this.screen.update();
};
Game.draw = function() {
this.debug.draw();
this.screen.clear();
this.screen.draw();
};
Game.pause = function() {
this.paused = (this.paused) ? false : true;
};
/*
* Runs the actual loop inside browser
*/
Game.run = (function() {
var loops = 0;
var nextGameTick = (new Date).getTime();
var startTime = (new Date).getTime();
return function() {
loops = 0;
while (!Game.paused && (new Date).getTime() > nextGameTick && loops < Game.maxFrameSkip) {
Game.update(nextGameTick - startTime);
nextGameTick += Game.skipTicks;
loops++;
}
Game.draw();
};
})();
(function() {
var onEachFrame;
if (window.requestAnimationFrame) {
onEachFrame = function(cb) {
var _cb = function() {
cb();
requestAnimationFrame(_cb);
};
_cb();
};
} else if (window.webkitRequestAnimationFrame) {
onEachFrame = function(cb) {
var _cb = function() {
cb();
webkitRequestAnimationFrame(_cb);
};
_cb();
};
} else if (window.mozRequestAnimationFrame) {
onEachFrame = function(cb) {
var _cb = function() {
cb();
mozRequestAnimationFrame(_cb);
};
_cb();
};
} else {
onEachFrame = function(cb) {
setInterval(cb, Game.skipTicks);
};
}
window.onEachFrame = onEachFrame;
})();
更多信息
您可以在此处找到完整的工作示例以及所有代码。我已将此答案转换为可下载的 javascript 框架，您可以从中构建游戏。
于 2013-05-16T06:03:33.793 回答
25
setInterval(onTimerTick, 33); // 33 milliseconds = ~ 30 frames per sec
function onTimerTick() {
// Do stuff.
}
于 2009-12-23T22:34:44.643 回答
18
requestAnimationFrame 是现在大多数浏览器中可用的一个很好的替代方案。它可以完成您使用 setInterval 所做的事情，但是以一种烘焙方式。可能最好的一点是它只在您的标签集中时运行。如果您希望事情在后台运行，这可能是不使用它的原因，但通常（特别是对于仅在看到时才重要的渲染循环）在选项卡不活动时不使用资源是很好的。
用法很简单：
function gameLoop(){
window.requestAnimationFrame(gameLoop);
Game.update();
}
我讨厌在旧线程上发帖，但这是“javascript 游戏循环”的顶级谷歌搜索结果，因此它确实需要包含 requestAnimationFrame。
从 paulirish 复制的旧浏览器的Pollyfill：
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
关于creativeJS的更深入的解释和使用技巧
于 2015-05-28T19:58:44.093 回答
6
Many of these answers are outdated and suboptimal. The recommended way to do this now is using requestAnimationFrame.
For example:
let previousTime = 0.0;
const loop = time => {
// Compute the delta-time against the previous time
const dt = time - previousTime;
// Update the previous time
previousTime = time;
// Update your game
update(dt);
// Render your game
render();
// Repeat
window.requestAnimationFrame(loop);
};
// Launch
window.requestAnimationFrame(time => {
previousTime = time;
window.requestAnimationFrame(loop);
});
于 2019-06-08T13:56:48.317 回答
4
是的。你想要setInterval：
function myMainLoop () {
// do stuff...
}
setInterval(myMainLoop, 30);
于 2009-12-23T22:35:37.953 回答
4
这行吗？
setInterval(updateGameState, 1000 / 25);
其中 25 是您想要的 FPS。您还可以在此处输入帧之间的毫秒数，在 25 fps 下为 40 毫秒（1000 / 25 = 40）。
于 2009-12-23T22:35:54.783 回答
0
不确定这将如何工作，但这是一种使用 while 循环并使线程休眠的方法。这只是一个示例，您可以根据您在任何其他语言中的操作方式，将下面的游戏循环替换为更好的循环。您还可以在此处找到更好的 while 循环
let gameRunning = false;
async function runGameThread(){
if(!gameRunning){
gameRunning = true;
// this function allows the thread to sleep (found this a long time ago on an old stack overflow post)
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
// the game loop
while(gameRunning){
let start = new Date().getTime();
gameUpdate();
await sleep(start + 20 - new Date().getTime());
}
}
}
function stopGameThread(){
while(gameRunning){
try{
gameRunning = false;
}catch(e){}
}
}
function gameUpdate(){
// do stuff...
}
于 2020-01-19T21:38:49.333 回答