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遊戲滯後

回答

相關問題