En estos días he estado trabajando en un simple framework para desarrollar juegos en javascript+html5.

Por ahora solo llevo un 20% pero ya tengo un par de cosas necesarias para crear juegos como por ejemplo escenas, colisiones, sprites y assets manager con preloading. También tiene clases de rectángulo, puntos 2d y map sorting.

Aun me falta trabajar en el rendering y el game loop ademas de agregar otras cosas como animaciones, tilemaps, camaras, websockets, etc.

Acá pueden ver un simple demo que muestra preloading, assets managing, cambios de escena y colisiones rectangulares con separación.

http://shin.cl/shinlib/

Acá esta el codigo de el demo, y mas o menos como se trabajaría con shinjs:

World.init(
function()
{
Assets.addImage("1","http://24.media.tumblr.com/tumblr_m2l87ml9X71r0ralmo1_500.gif");
Assets.addImage("2","http://25.media.tumblr.com/tumblr_lzz242aMJB1qje0eqo1_500.jpg");
Assets.addImage("3","http://24.media.tumblr.com/tumblr_m3q5mhSl4I1ruo5glo1_500.jpg");
Assets.addImage("4","http://24.media.tumblr.com/tumblr_m0ix4iEUVM1qjogmno1_500.jpg");
Assets.addImage("5","http://25.media.tumblr.com/tumblr_m39ojeujQE1rpg9v8o1_500.gif");
}
,640,480,60,true,true);

World.backgroundColor("#5a5a5a");

World.run = function()
{
var scene = new Scene();

scene.set(
function init()
{
//init.
trace("Init scene 1.")

this.r1 = new Rectangle(0,100,100,100);
this.r2 = new Rectangle(300,150,100,100);
this.speedx = 5;
this.speedy = 5;
this.count = 500;
},

function update()
{
//update.
this.r1.x+=this.speedx;
this.r1.y+=this.speedy;

if(this.r1.x>World.width-this.r1.width || this.r1.x<0 ) this.speedx*=-1;
if(this.r1.y>World.height-this.r1.height || this.r1.y<0) this.speedy*=-1;

if(this.r2.x>World.width || this.r2.x<-this.r2.width || this.r2.y>World.height || this.r2.y<-this.r2.height)
{
this.r2.x = 300;
this.r2.y = 150;
}

this.count--;

if(this.count<1) World.setScene(scene1);
},

function render()
{
//render.
World.canvas.drawImage(Assets.getImage("2"),0,0);

World.canvas.fillStyle = "#ff0000";
World.canvas.fillRect(this.r1.x,this.r1.y,this.r1.width,this.r1.height);

if(Collision.overlap(this.r1,this.r2))
{
World.canvas.fillStyle = "#ffff00";
Collision.separate(this.r1,this.r2);
}

World.canvas.fillRect(this.r2.x,this.r2.y,this.r2.width,this.r2.height);
}
)

World.setScene(scene);

var scene1 = new Scene();

scene1.set(
function init()
{
//init.
trace("Init scene 2.")
this.count = 500;
},

function update()
{
//update.
this.count--;
if(this.count<1)
{
World.setScene(scene);
}
},

function render()
{
//render.
World.canvas.drawImage(Assets.getImage("3"),0,0);
World.canvas.strokeStyle = "#ffffff";
World.canvas.font = "30px Verdana";
World.canvas.strokeText("Scene 2",100,100);
}
)
}

Saludos!

Nueva actualización, esta incluye viewports 2D ( camaras ) y render de sprites, estaré trabajado en implementar animaciones y tilemaps.
Acá esta el demo: http://shin.cl/shinlib

El código para eso es este:

Código: [Seleccionar]

World.init(
    function()
    {
        Assets.addImage("1","http://24.media.tumblr.com/tumblr_m2l87ml9X71r0ralmo1_500.gif");
        Assets.addImage("2","http://25.media.tumblr.com/tumblr_lzz242aMJB1qje0eqo1_500.jpg");
        Assets.addImage("3","http://24.media.tumblr.com/tumblr_m3q5mhSl4I1ruo5glo1_500.jpg");
        Assets.addImage("4","http://24.media.tumblr.com/tumblr_m0ix4iEUVM1qjogmno1_500.jpg");
        Assets.addImage("5","http://25.media.tumblr.com/tumblr_m39ojeujQE1rpg9v8o1_500.gif");
        Assets.addImage("s","sprite.png");
    }
,600,400,60,true,true);
 
World.backgroundColor("#5a5a5a");
 
World.run = function()
{
    var camera = new Camera(0,0,200,200,"#000000");
    var camera2 = new Camera(200,0,200,200,"#f00000");
    var camera3 = new Camera(400,0,200,200,"#ff0000");
    var camera4 = new Camera(0,200,200,200,"#fff040");
    var camera5 = new Camera(200,200,200,200,"#fff0t54");
    var camera6 = new Camera(400,200,200,200,"#543565");
 
    World.addCamera(camera);
    World.addCamera(camera2);
    World.addCamera(camera3);
    World.addCamera(camera4);
    World.addCamera(camera5);
    World.addCamera(camera6);
    var scene = new Scene();
 
    scene.set(
        function init()
        {
            //init.
            trace("Init scene 1.")
 
            this.r1 = new Rectangle(0,30,30,30);
            this.r2 = new Rectangle(50,50,25,25);
            this.speedx = 5;
            this.speedy = 5;
            this.count = 500;
            this.s = new Sprite("s",0,0);
            this.addChild(this.s);
        },
 
        function update()
        {
            //update.
 
            this.r1.x+=this.speedx;
            this.r1.y+=this.speedy;
 
            if(this.r1.x>200-this.r1.width || this.r1.x<0 ) this.speedx*=-1;
            if(this.r1.y>200-this.r1.height || this.r1.y<0) this.speedy*=-1;
 
            if(this.r2.x>200 || this.r2.x<-this.r2.width || this.r2.y>200 || this.r2.y<-this.r2.height)
            {
                this.r2.x = 50;
                this.r2.y = 50;
            }
 
            this.count--;
 
            if(this.count<1) World.setScene(scene1);
        },
 
        function render()
        {
            //render.
 
            World.canvas.fillStyle = "#ff0000";
            World.canvas.fillRect(this.r1.x,this.r1.y,this.r1.width,this.r1.height);
 
            if(Collision.overlap(this.r1,this.r2))
            {
                World.canvas.fillStyle = "#ffff00";
                Collision.separate(this.r1,this.r2);
            }
 
            World.canvas.fillRect(this.r2.x,this.r2.y,this.r2.width,this.r2.height);
        }
    )
 
    World.setScene(scene);
 
    var scene1 = new Scene();
 
    scene1.set(
        function init()
        {
            //init.
            trace("Init scene 2.")
            this.count = 500;
        },
 
        function update()
        {
            //update.
            this.count--;
            if(this.count<1)
            {
                World.setScene(scene);
            }
        },
 
        function render()
        {
            //render.
            World.canvas.strokeStyle = "#ffffff";
            World.canvas.font = "30px Verdana";
            World.canvas.strokeText("Scene 2",50,50);
        }
    )
}


Muy bueno , voy a ver si algún día (cuando ya termines ShinJS) lo utilizo.

Aunque se que HTML5 literalmente posee un futuro asegurado que Flash  por el momento no ve, en mi opinión (Referente a canvas), aun no considero que sea lo suficientemente optimizado para realizar juegos por el simple hecho de que tienes que ir re-dibujando todo para realizar un movimiento.

Es como en las películas antiguas que se van haciendo una serie de frames para luego reproducirlas rápidamente y hacer posible una obra.
Saludos.

Todos los motores de juegos deben dibujar cada frame, incluso flash dibuja cada frame. Sobre canvas, tienes razòn aun no esta suficientenmente optimizado, falta muchas cosas que hay que hacerlas a mano, sería bueno ver en un futuro un javascript similar a action script 3 o java y mas enfocado a oop.

Nueva actualización.

He decidido hacer un juego con ShinJS, el tipico que siempre hago que se llama Milk at a Cop que incluye cosas basicas como sprites, scenes, collision, input, local storage y animaciones.

Pueden encontrar el juego acá

También he publicado el código en github que incluye shinjs, hay que tener en cuenta que aun no lo termino. Faltan muchas cosas.

[ur=https://github.com/ilovepixel/MilkAtACopJSl]repo[/url]

El juego se divide en 5 partes:

game.js  Que inicia World y define propiedades de este.
World.getBestFPS = false;
World.init(
function()
{
include("game/menu.js");
include("game/play.js");
include("game/dead.js");
include("game/wall.js");
Assets.addImage("bg","assets/bg.png");
Assets.addImage("cop","assets/cop.png");
Assets.addImage("enemy","assets/enemy.png");
Assets.addImage("menu","assets/menu.png");
Assets.addImage("milkPart","assets/milkPart.png");
Assets.addImage("milkShot","assets/milkShot.png");
Assets.addImage("tit","assets/tit.png");


},
200,
300,
60,
false,
false
)

World.backgroundColor("#5a5a5a");

World.run = function()
{
var camera = new Camera(0,0,200,300);
World.addCamera(camera);

window.menu = new Menu();
window.play = new Play();
window.dead = new Dead();
window.wall = new Wall();
World.setScene(menu);
}

play.js Donde esta todo el juego.
function Play(){}
Play.inherit(Scene);
Play.prototype.set(
function init()
{
this.bg = new Sprite("bg",World.width*.5,World.height*.5);
this.addChild(this.bg);
window.enemys = new Array();
window.score = 0;
window.particles = new Array();
this.bullets = new Array();
this.count = 0;
window.partgroup = 0;
this.paused = false;



//make enemys
for(var j=0;j<8;j++)
{
var e = new Sprite("enemy",Math.random()*World.width,Math.random()*-World.height);
e.setAnim(26,30);
e.addAnimation("walk",[0,1,2,1,0,3,4,3]);
e.addAnimation("dead",[5]);
e.play("walk");
e.delay = 8;
e.set(
function init()
{
this.speed = 2;
this.dead = false;
}
,
function update()
{
if(this.dead)
{
this.play("dead");
this.alpha-=.02;
if(this.alpha<.02)
{
this.reset();
this.alpha = 1;
this.dead = false;
this.play("walk");
}
}
else
{
if(this.x<0 || this.x>World.width) this.reset();
if(Collision.overlap(this,window.player) || this.y>World.height)
{
World.setScene(window.dead);
}

for(var j=0;j<window.enemys.length;j++)
{
if(this.index!=window.enemys[j].index && Collision.overlap(this,window.enemys[j]) && !window.enemys[j].dead)
{
Collision.separate(this,window.enemys[j]);
}
}
this.y+=this.speed;
}
},
function reset()
{
this.y = Math.random()*-World.height;
this.x = Math.random()*World.width;
}

);

this.addChild(e);
window.enemys.push(e);
e = null;
}

//make bullets
for(var i=0;i<30;i++)
{
var b = new Sprite("milkShot",-100,-100);

b.set(
function init()
{
this.s = true;
this.speed = 7;
}
,
function update()
{
for(var i=0;i<window.enemys.length;i++)
{
var ene = window.enemys[i];
if(Collision.overlap(this,ene) && !ene.dead)
{
window.score++;
ene.dead = true;
for(var j=0;j<5;j++)
{
window.particles[j+window.partgroup].exp(this.x,this.y);
}
this.reset();
window.partgroup++;
if(window.partgroup<window.enemys.length-1) window.partgroup = 0;
}
var ene = null;
}
if(this.s ==true)
{
this.y-=this.speed;
if(this.y<-this.height)
{
this.reset();
}
}
}
,
function shoot(x,y)
{
this.s = true;
this.x = x+4;
this.y = y-15;
}
,
function reset()
{
this.s = false;
this.x = -100;
this.y = -100;
}


)

this.bullets.push(b);
this.addChild(b);
b=null;
}

//make particles

for(var n=0;n<window.enemys.length;n++)
{
for(var p=0;p<5;p++)
{
var part = new Sprite("milkPart",-100,100);
part.set(
function init()
{
this.speedx = random(-5,5);
this.speedy = random(1,2);
this.accx = 0;
this.scale(2,2);
this.a = Math.random()*.1;
this.ang = random(1,10);
this.sc = Math.random()*.1;
}
,
function update()
{
if(this.explode)
{
this.x+=this.speedx;
this.accx+=this.speedy;
this.y+=this.accx;
this.alpha-=this.a;
this.angle+=this.ang;
this.scaleX+=this.sc;
this.scaleY+=this.sc;
if(this.x<0 || this.x>World.width || this.y>World.height || this.alpha<this.a)
{
this.reset();
}
}
}
,
function exp(x,y)
{
this.x = x;
this.y = y;
this.explode = true;
}
,
function reset()
{
this.speedx = random(-5,5);
this.speedy = random(1,2);
this.explode = false;
this.x = -100;
this.y = -100;
this.accx = 0;
this.alpha = 1;
this.a = Math.random()*.1;
this.angle = 0;
this.ang = random(1,10);
this.scaleX = 2;
this.scaleY = 2;
this.sc = Math.random()*.1;
}
);


window.particles.push(part);
this.addChild(part);
}
}

//make player
window.player = new Sprite("tit",100,World.height-20);
window.player.setAnim(65,40);
window.player.addAnimation("normal",[0]);
window.player.addAnimation("shoot",[1]);
window.player.play("normal");
this.addChild(window.player);

}
,
function update()
{
if(Input.mouseDown(Input.M_LEFT) || Input.keyDown(Input.K_X)) window.player.play("shoot");
else window.player.play("normal");

if(Input.mouseClick(Input.M_LEFT) || Input.keyHit(Input.K_X))
{
this.bullets[this.count].shoot(window.player.x,window.player.y);
this.count++;
if(this.count==this.bullets.length) this.count = 0;
}


window.player.x = Input.mouseX();
World.setTitle("Milk at a Cop | Hits: "+window.score);
}
,
function destroy()
{
window.player = null;

window.particles = null;
this.bullets = null;
}
,
function render()
{
World.canvas.fillStyle = "#ffffff";
World.canvas.font = "9px Verdana";
World.canvas.textAlign = "right";
World.canvas.fillText(window.score+" hits",World.width-2,10);
if(this.paused)
{
World.canvas.globalAlpha = .5;
World.canvas.fillStyle = "#000000";
World.canvas.fillRect(0,0,World.width,World.height);
World.canvas.fillStyle = "#ffffff";
World.canvas.font = "20px Verdana";
World.canvas.textAlign = "center";
World.canvas.globalAlpha = 1;
World.canvas.fillText("Paused",World.width/2,World.height/2);
World.canvas.font = "10px Verdana";
World.canvas.fillText("Click to Continue",World.width/2,World.height/2+10);
}
}
,
function onfocus()
{
for(var i=0;i<this.pool.length;i++)
{
this.pool[i].active = true;
this.active = true;
this.paused = false;
}
}
,
function outfocus()
{
for(var i=0;i<this.pool.length;i++)
{
this.pool[i].active = false;
this.active = false;
this.paused = true;
}
}
)

dead.js Cuando mueres.
function Dead(){}
Dead.inherit(Scene);
Dead.prototype.set(
function init()
{
this.bg = new Sprite("bg",World.width*.5,World.height*.5);
this.addChild(this.bg);

this.cop = new Sprite("cop",World.width*.5,World.height*.5-20);
this.addChild(this.cop);

if(World.getLocalSave("maac_save1")!=undefined)World.localSave("maac_save1",World.getLocalSave("maac_save1")+","+window.score);
else World.localSave("maac_save1",window.score);
World.setTitle("Milk at a Cop | SHINJS");
},
function render()
{
World.canvas.textAlign = "center";
World.canvas.font = "15px Verdana";
World.canvas.fillStyle = "#ffffff";
World.canvas.fillText("You Milked "+window.score+" Cops",World.width*.5,World.height*.5+50);
World.canvas.font = "9px Verdana";
World.canvas.fillText("Press SPACE to continue.",World.width*.5,World.height*.5+70);
},
function update()
{
if(Input.keyHit(Input.K_SPACE))
{
World.setScene(window.menu);
}
}
,
function destroy()
{
window.enemys = null;
this.bg = null;
this.cop = null;
}
);

menu.js el Menú
function Menu(){}
Menu.inherit(Scene);
Menu.prototype.set(
function init()
{
this.bg = new Sprite("bg",World.width*.5,World.height*.5);
this.addChild(this.bg);
this.menuImg = new Sprite("menu",World.width*.5,World.height*.5);
this.addChild(this.menuImg);
},
function update()
{
if(Input.keyDown(Input.K_S))
{
World.setScene(window.wall);
}

if(Input.mouseClick(Input.M_LEFT) || Input.keyDown(Input.K_X))
{
World.setScene(window.play);
}

}
,
function destroy()
{
this.menuImg = null;
this.bg = null;
}
,
function render()
{
World.canvas.fillStyle = "#ffffff";
World.canvas.textAlign = "center";
World.canvas.font = "10px Verdana";
World.canvas.fillText("Press S for Local Scores",World.width*.5,World.height-15);
}
)


wall.js Muestra los mejores 25 scores locales.
function Wall(){}
Wall.inherit(Scene);
Wall.prototype.set(
function init()
{
this.bg = new Sprite("bg",World.width*.5,World.height*.5);
this.addChild(this.bg);
if(World.getLocalSave("maac_save1")!=undefined)
{

this.score = new Array();
this.score = World.getLocalSave("maac_save1").split(",");
this.score.sort(function(a,b){return b-a});
}
}
,
function render()
{
if(World.getLocalSave("maac_save1")!=undefined)
{
World.canvas.fillStyle = "#ffffff";
World.canvas.textAlign = "center";
World.canvas.font = "15px Verdana";
World.canvas.fillText("Local Scores",World.width*.5,20);
for(var i=0;i<25;i++)
{
if(this.score[i]!=undefined)
{
World.canvas.font = "9px Verdana";
World.canvas.fillText(i+1+"- "+this.score[i]+" hits",World.width*.5,10*i+40);
}


}
}
else
{
World.canvas.fillStyle = "#ffffff";
World.canvas.textAlign = "center";
World.canvas.font = "15px Verdana";
World.canvas.fillText("Local Scores",World.width*.5,20);
World.canvas.font = "9px Verdana";
World.canvas.fillText("No scores saved",World.width*.5,50);
}
},
function update()
{
if(Input.mouseClick(Input.M_LEFT)) World.setScene(window.menu);
}
,
function destroy()
{
this.bg = null;

if(World.getLocalSave("maac_save1")!=undefined) this.score = null;
}
);