Html5/Javascript游戏滞后

我正在研究一个基本的太空射击游戏，目前玩家只是一个圈子。Html5/Javascript游戏滞后

在Opera，Firefox和IE9中玩时，我的游戏都比较滞后。

我已经尝试过研究这个问题，但我不知道什么是错的。

我做错了什么？

任何想法？

下面的代码：

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

来源

2013-01-24 user2005990

使用window.requestAnimationFrame，这就是它的意思了。现在你试图以每2毫秒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);

来源

2013-01-24 02:34:13

歌剧还支持其他东西吗？ – user2005990

没关系。我将“set_interval”设置为15或大约30 fps。谢谢你的帮助。 – user2005990

* [Here's]（http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating）*为歌剧的解决方案。 –

delete keysDown[e.keyCode];

也并不好。不断创建和删除数组的元素比将其值设置为true/false要慢得多。

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

FPS应该与显示器刷新率相同。如果你看不到它，高FPS对你来说毫无意义。除了说CPU将难以计算无法在屏幕上呈现的帧。甚至没有在理论上。

来源

2013-01-24 02:49:16 CoR

Html5/Javascript游戏滞后

回答

相关问题