http://blog.greweb.fr/?p=727

game_game.html

<section id="game">
  <div class="turnleft"></div>
  <div class="turnright"></div>
  <div class="gameStatus">
    <a class="i18n-back back" href="#!/">Back</a>
    <span class="timeline">
      <span class="remainingSeconds"><span class="remainingSecondsTime"></span> s</span>
    </span>
  </div>
  <div id="gameContainer">
    <canvas class="highlight" width="400" height="300"></canvas>
    <canvas class="main" width="400" height="300"></canvas>
  </div>
</section>

game_instance.js

// Colors.get(nb) : pick nb random colors 
var Colors = function() {
  var clrs = [ new Color('#D34040'), new Color('#82D340'), new Color('#40C2D3'), new Color('#8B40D3'), new Color('#D3C840') ];
  return {
      get: function(nb) {
      return clrs
      .sort(function(){ return Math.random() - 0.5; })
      .slice(0, nb);
    }
  }
}();

/** Game instanciation **/

var gridSizeByDifficulty = [ // Size of grid for each difficulty
  {w:8, h:8},
  {w:12, h: 12},
  {w: 16, h: 16}
];
var colorNumberByDifficulty = [3, 4, 5]; // Nb of colors for each difficulty

var difficulty; // can be 0 (easy), 1 (normal) or 2 (hard)
currentGame = new game.Game({
  gridSize: gridSizeByDifficulty[difficulty],
  colors: colors=Colors.get(colorNumberByDifficulty[difficulty]),
  container: '#game', // container selector
  rendererClass: 'GameCanvasRenderer', // The class to use for rendering the game
  difficulty: difficulty,
  drawHover: true,
  globalTimer: new Timer().pause(),
  keepSquare: true // Keep a square ratio
});

game_widget.html

<script type="text/javascript" src="http://same.greweb.fr/public/javascripts/same.scores.js"></script>
<script type="text/javascript">
  new same.Scores({
    width: '250px',
    height: '400px',
    items: 3,
    period: 'all',
    platform: ['web', 'mobile', 'tablet'],
    type: ['hs_hard', 'hs_normal', 'hs_easy'],
    title: 'Best highscores ever',
    theme: {
      bg: 'rgb(218, 236, 244)',
      color: '#000',
      scores_bg: 'rgba(255, 255, 255, 0.5)',
      scores_color: 'rgba(0, 0, 0, 0.8)',
      link: '#1F98C7'
    }
  }).init().fetch();
</script>

transitions.css

/* Pre conditions :
 * With Javascript: 
   - A class "current" is setted for the current section view. 
   - All section after "current" must take a "after" class. 
 */
#main.enabletransition > section { /* #main must take "enabletransition" after the DOM load to avoid a first transition */
  transition-duration: 1s, 0s;  /* transform takes 1s duration, opacity doesn't have transition */
}
#main > section {
  z-index: -1;
  opacity: 0;
  transition-delay: 0s, 1s; /* opacity go to 0 in 1s */
  transition-property: transform, opacity;
  transform: translateY(-100%); /* go above the page */
}
#main > section.current {
  z-index: 0;
  opacity: 1;
  transition-delay: 0s, 0s;
  transition-transform: translateY(0%); /* go to the bottom */
}
#main > section.after { /* same as "#main > section.current ~ section" but without bugs */
  opacity: 0;
  transition-delay: 0s, 1s;
  transform: translateY(100%); /* go below the page */
}

/* Note that this is a part of the css code 
 * (you need to add -webkit-, -moz-, ... in some properties)
 */