Html5/Javascript game lag

저는 현재 기본적인 우주 사수를 연구 중입니다. 현재 플레이어는 단지 원입니다.Html5/Javascript game lag

오페라, 파이어 폭스 및 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 단계로 게임을 실행하려고합니다. 이는 약 500FPS입니다.

// 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 또는 30fps로 설정했습니다. 당신의 도움을 주셔서 감사합니다. – user2005990

* [여기에있다] (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 game lag

답변

관련 문제