Question

We’re developing arcade (a lot of action and speed) browser 2d-game using canvas.

Sometimes our testing players report us that there is a delay: player still moving 5-10 pixels away after keyup.

I’ve digged this issue, you can see yourself delay http://jsfiddle.net/C4ev3/7/ (try keydown/up any key as fast as you can). My results is from 70 to 120ms. And i think that’s a lot. (FYI, our network latency is 10-20ms).

Any ideas how to reduce this delay?

upd i’ve noticed that on good hardware this delay is under 30-40ms. But i’m testing on core2duo, winxp, chrome 19 – it’s not a P4 with IE6 🙂

Answer 1

Hi one thing you could do is instead of using an anonymous function try using defined functions,

http://jsfiddle.net/C4ev3/10/ – for me this reported at 50-100 MS

However i would not recommend jQuery for Canvas Applications it’s very big for the very little you using, you should try using native Javascript

http://jsfiddle.net/C4ev3/11/ – for me this reported 30-70 MS

Javascript Threading
One thing i noticed in the comments Javascript is not Multi-Threaded Well Urm-Arr,
it sort of is setInterval is Async not Sync, however affecting the window is a single thread E.G if you have a Class that has some number is it using a setInteval will use another thread and not have a problem altering the math however in the Task then requires a Draw on the page it will enter the bottom of the JS handle Que,

Certain parts of Javascript are on a different thread how ever any thing changing the page has to run on the Main Thread same as any Windows application if your thread want to change the Form your have to invoke the main thread to do it for you

however it is not multi-threaded like any thing else you cant just handle or abort at a given Wim like windows,

Other ASync Tasks include AJAX has the option to be both Async and Sync

Updated to show my comment about FPS limiting:

Please bear with me. This is linking to a project that is allready built to show the example:
so my Game is Completely OOP

var elem = document.getElementById('myCanvas');
var context = elem.getContext("2d");
context.fillStyle   = '#888';
context.lineWidth   = 4;
// Draw some rectangles.
context.fillRect(0,   0, 800, 600);
context.fillStyle = '#f00';

var ball = new Ball();
var leftPadel = new Padel(10, 60, 40, 120);
var rightPadel = new Padel(750, 520, 40, 120);

pong = new Pong();
pong.draw();

setTimeout("ball.move()", pong.redrawTime());

Inside my pong class is where all the main workings of the game goes but here are the FPS bit you need to see

this.fps = 30;
this.maxFPS = 60;

this.redrawTime = function(){
    return (1000 / this.fps)
}

this.lastDraw = (new Date)*1 - 1;

Then as you can see my Interval is on ball.move this calls the main pong class again on redraw at the End of the redraw i have the FPS checking and limiting code

this.fps = ((now=new Date) - this.lastDraw);
if(this.fps > this.maxFPS){
    this.fps = this.maxFPS;
}
this.lastDraw = (new Date)*1 - 1;
if(this.reporting = true){
    console.clear();
    console.log("FPS: "+this.fps.toFixed(1))
}
setTimeout("ball.move()", pong.redrawTime());

This then forces you to get the Best Possible FPS without queuing the Main Thread