HTML5 / Javascript游戏延迟

Question

I am working on a basic space shooter, currently the player is just a circle. 我正在研究基本的太空射击游戏，目前该玩家只是一个圆圈。

When playing in both Opera, Firefox, and IE9 my game is lagging. 当同时在Opera，Firefox和IE9中玩游戏时，我的游戏比较落后。

I have tried researching the issue but I am not sure what is wrong. 我已尝试研究此问题，但不确定是什么问题。

Did I do something wrong? 我做错什么了吗？

Any ideas? 有任何想法吗？

Here's the code: 这是代码：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Space Game Demo</title>
    </head>
    <body>
        <section>
            <div>
                <canvas id="canvas" width="640" height="480">
                    Your browser does not support HTML5.
                </canvas>
            </div>
            <script type="text/javascript">
//Start of script
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var x = 200;
var y = 200;
var thrust = 0.25;
var decay = 0.99;
var maxSpeed = 2;
var turnSpeed = 2;
var tempSpeed = 0;
var direction = 0;
var xSpeed = 0;
var ySpeed = 0;

function move() {
if (38 in keysDown) { // Player holding up
    xSpeed += thrust * Math.sin(direction * (Math.PI / 180));
    ySpeed += thrust * Math.cos(direction * (Math.PI / 180));
}
else {
    xSpeed *= decay;
    ySpeed *= decay;
}
if (37 in keysDown) { // Player holding left
    direction += turnSpeed;
}
if (39 in keysDown) { // Player holding right
    direction -= turnSpeed;
}
if (40 in keysDown) { // Player holding down
}

tempSpeed = Math.sqrt((xSpeed * xSpeed) + (ySpeed * ySpeed));
if(tempSpeed > maxSpeed) {
    xSpeed *= maxSpeed / tempSpeed;
    ySpeed *= maxSpeed / tempSpeed;
}

x += xSpeed;
y += ySpeed;
}

function degtorad(angle) {
return angle * (Math.PI/180);
}

function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "grey";
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.stroke();

move();
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.arc(x,y,10,0,2*Math.PI);
ctx.stroke();
}

setInterval(loop, 2);
var keysDown = {};

addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
    delete keysDown[e.keyCode];
}, false);

            </script>
        </section>
    </body>
</html>

Answer 1

Use window.requestAnimationFrame , It's what it's meant for. 使用window.requestAnimationFrame ，这就是它的意思。 Right now you're trying to run the game at 1 step per two milliseconds - that's ~ 500 FPS. 现在，您尝试每两毫秒以1步的速度运行游戏-约为500 FPS。

// target the user's browser.
(function() {
  var requestAnimationFrame = window.requestAnimationFrame || 
                              window.mozRequestAnimationFrame || 
                              window.webkitRequestAnimationFrame ||
                              window.msRequestAnimationFrame;

  window.requestAnimationFrame = requestAnimationFrame;
})();

function loop() {
    // game loop logic here...
}

requestAnimationFrame(loop);

Answer 2

delete keysDown[e.keyCode];

Is also not good. 也不好。 Constantly creating and deleting an element of an array is much slower than just setting it's value to true/false. 不断创建和删除数组元素要比仅将其值设置为true / false慢得多。

keysDown[e.keyCode] = false;    //  faster & better

FPS should be the same as monitor refresh rate. FPS应该与显示器刷新率相同。 High FPS means nothing to you if you can not see it. 如果您看不到FPS，则对您而言毫无意义。 Except to say that CPU will work much harder to calculate frames that could not be rendered on screen. 除非说CPU将更加努力地计算无法在屏幕上呈现的帧。 Not even in theory. 甚至在理论上也没有。

HTML5 / Javascript游戏延迟

问题描述

2 个解决方案

解决方案1
1 2013-01-24 02:34:13

解决方案2
0 2013-01-24 02:49:16

HTML5 / Javascript游戏延迟

问题描述

2 个解决方案

解决方案1 1 2013-01-24 02:34:13

解决方案2 0 2013-01-24 02:49:16

解决方案1
1 2013-01-24 02:34:13

解决方案2
0 2013-01-24 02:49:16