I have tested it with Chrome 15.0.874.x, Firefox 8.0, and IE 9.0.8.x and no issues so far (except with my lame collision detection). I also tried it with my Droid phone, and although the FPS is pretty low, it still works ok.
This is a 'frame rate independent' game loop for HTML5 Canvas.
// earlier in code: setInterval(GameLoop, 1)
var FPS = 60; // fps
var PS = 1/FPS; // physics step
var last = Date.now()/1000;
var accrued = 0.0; // accrued time (betwen physics steps)
var GameLoop=function(){
if(false == _this.paused){
var now = Date.now()/1000;
var dt = ((now-last) > .2) ? .2 : now-last; // time between frames
last = now;
accrued += dt; // add dt to accrued
if(dt > PS){ // if dt is more than a physics step
Update(dt-(accrued-PS)); // bring positions up to 1 full physics step
CheckCollisions(); // check collisions
accrued -= PS; // deduct 1 physics step from time
while(accrued >= PS){ // if accrued still greater tha a physics step
Update(PS); // move positions ahead 1 step
CheckCollisions(); // check collisions
accrued -= PS; // deduct 1 physics step from accrued
}
dt = accrued;
}
else{ // if dt is less than a physics step
if(accrued >= PS){ // if accrued time is more than a physics step
Update(dt-(accrued-PS)); // bring positions up to one full physics step
CheckCollisions(); // check collisions
accrued -= PS; // deduct the physics step from accrued
dt = accrued;
}
}
}
else{
last = Date.now()/1000; // for paused game
}
if(dt > 0.0){
Update(dt);
}
Render(); // render images
}
You can see it in action on my ... 'game_1' demo: http://www.html5.bun...me_1/game1.html
FYI, I disabled the right mouse click, just for future game ideas. I'll be putting in sounds and animated images / particles and emitters soon...
Please let me know what you think...
