About me

I work at

SONATA

• http://www.rpgmakerweb.com/
  
• http://www.yoyogames.com/studio
  

That might help
http://html5gameengine.com/
https://gist.github.com/bebraw/768272

 <canvas id="canvas_layer" ></canvas>

  var canvas = document.getElementById('canvas_layer');
  canvas.width = window.innerWidth; //Or wathever
  canvas.height = window.innerHeight; //Or wathever

 var ctx = canvas.getContext('2d'); //We will draw here

 function mainGameLoop(){
  //Updating your entities goes here
  requestAnimationFrame(mainGameLoop);
 }

 mainGameLoop();

• Updating the sprite frame
• Updating the position
• Making responses to events
• Removing enemies
• Adding enemies
• Adding bullets
• Checking if bullets collide with enemies
• Updating backgrounds positions
• Etc...

 var then = Date.now(); //Previously defined at game start
 var animFramePID; //If you want to cancelAnimationFrame later on

 function mainGameLoop(){
   //Calculate time difference
   var now = Date.now();
   var dt = now - then;
   then = now;

   updateEntities(dt);
   checkCollissions();
   render();
  
   animFramePID = requestAnimationFrame(mainGameLoop);
 }

 function updatePoints(dt){
   points = hu.compact(
     points
     .map(updateTimeCounter(dt))
     .map(moveUp(dt))
     .map(removeIfTimeCounterGreaterThan(1))
    );
 }

function updateTimeCounter(dt){
  return function(entity){
    entity.timeAlive = entity.timeAlive ? entity.timeAlive + dt : dt;
    return entity;
  }
}

function removeIfOutsideScreen(entity){
  if(!isOutsideScreen(entity.pos, entity.getSize())){
    return entity;
  }
}

  function updateEntities(dt) {
    updatePlayer(dt);
    updateBosses(dt);
    updateBullets(dt);
    updateEnemies(dt);
    updateSpecials(dt);
    updateExplosions(dt);
    updatePointsToRender(dt);
    updateDialogs(dt);
    updateMiscelanea_front(dt);
    updateMiscelanea_back(dt);
    updateBonuses(dt);
    updateBonusWeapons(dt);   
    updateEnemyBullets(dt);
    updateNeutralBullets(dt);
  }

 function Entity(options){
   this.name = options.name;
   /* ... */
 }

 Entity.prototype.getDimensions = function(){
  //calculate things here
 }

function shouldAddBoss(){
   return isFinalStage() && !bossIsOut() && introHasEnded();}

 scene.renderEntity(myPlayer);

 entity.render(getContext());

RenderableEntity.prototype.render = function(ctx){
  this.getEnabledAnimation().render(ctx, this.rotateSprite);
}

 localStorage.setItem('myApplicationInfo', JSON.stringify(data));

 localStorage.getItem('myApplicationInfo');

 var data = {
  lifes: 5,
  maxPower: 1000,
  timeSpent: 100.50,
  maxPoints: 4050
  /* ... */
 }

var song = new Howl({
  urls: ['sounds/songs/wendy_sulca_servesa.mp3'],
  volume: 0.5
});
//It allows Play/Stop/Pause/Fade, events...

• Run a server
• Livereload changes
• SASS / Jade compilation
• JsHint / JsLint your files
• Run automated test on hook pre-commit

• JavaScript minification
• Uglify
• CSS minification
• Concat all things!
• Run automated tests
  
• Image-min if needed

• Use FastClick.js
• LocalStorage is your friend
• Use device emulators
• Profile your app on devtools
• Minify everything