Html5/Javascript game lag

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.

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. Right now you're trying to run the game at 1 step per two milliseconds - that's ~ 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.

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

FPS should be the same as monitor refresh rate. High FPS means nothing to you if you can not see it. Except to say that CPU will work much harder to calculate frames that could not be rendered on screen. Not even in theory.

Html5/Javascript game lag

Question

2 answers

solution1
1 2013-01-24 02:34:13

solution2
0 2013-01-24 02:49:16

Html5/Javascript game lag

Question

2 answers

solution1 1 2013-01-24 02:34:13

solution2 0 2013-01-24 02:49:16

solution1
1 2013-01-24 02:34:13

solution2
0 2013-01-24 02:49:16