HTML 5 - Uma demonstração prática do novo ambiente - Criando um jogo

ja mostrei aqui alguns exemplos de como o HTML5 vai revolucionar a WEB mas nada com a tag canvas ja tem um tempo que não posto nada devido ao tempo reduzido que estou tendo esses últimos dias então vou somente disponibilizar o código aqui e semana que vem vou fazer um novo post comentando o código eu peguei o mesmo semi pronto o que eu implementei foi apenas algumas outras funcionalidades. segue o link de onde retirei o script original como montar um jogo em HTML5. veja o jogo aqui >>
para visualizar o código basta pedir para o browser exibir o código fonte porem o mesmo esta logo abaixo
Seu HTML

<div style="width:500px; height:20px; font-size:15px; padding:5px; overflow:hidden;" class="redondo gradienteL">
    <strong>Level: </strong><samp id="level">1</samp> 
    <strong>Barras restantes: </strong><samp id="barras">0</samp> 
    <strong>Pontos: </strong><samp id="pontos">0</samp>
       <samp id="pontos"><input style="float:right; font-size:15px; font:Verdana, Geneva, sans-serif; padding:0;" type="button" id="ST" value="PLAY" onClick="status(this)"></samp>
   </div>
   <div style=" width:500px; height:400px;">
    <canvas style="border:#CCC double;" id="canvas" width="500" height="400"></canvas> 
    <div id="result" style="position:relative;left:50%; top:-50%; margin-left:-100px; margin-top:-50px; height:100px; width:200px; border:#CCC double; text-align:center; display:none;"></div>
    <div id="XxX"></div>
    <div id="resultado2"></div>
   </div>
   <script src="jogo.js" type="application/x-javascript"></script>

Seu código javascript "jogo.js"

var x = 150;
var y = 280;
var dx = 3;
var dy = 5;
var IncrementoDx = dx;
var  NROWS = 5; // total de linhas
var  NCOLS = 3; // total de colunas
var xb = 150; // tamanho horizontal da barra
var yb = 10; // tamanho vertical da barra
var St = document.getElementById("ST");
var level = document.getElementById("level");
var result = document.getElementById("result");
var canvas = document.getElementById("canvas");
var pontos = document.getElementById("pontos");
var Pontos = 0;
var n = 0;
var barras;
var WIDTH;
var HEIGHT;
var ctx;
var paddlex;
var paddleh;
var paddlew;
rightDown = false;
leftDown = false;
var bricks;
var NROWS;
var NCOLS;
var BRICKWIDTH;
var BRICKHEIGHT;
var PADDING;
var intervalo;
function initbricks() {
  BRICKWIDTH = (WIDTH/NCOLS) - 1;
  BRICKHEIGHT = 15;
  PADDING = 1;

  bricks = new Array(NROWS);
  for (i=0; i < NROWS; i++) {
    bricks[i] = new Array(NCOLS);
    for (j=0; j < NCOLS; j++) {
      bricks[i][j] = 1;
    }
  }
}



function keyDown (evt) {
 key = evt;
  if (evt.keyCode == 13) status(St);
  else if (evt.keyCode == 39) rightDown = true;
  else if (evt.keyCode == 37) leftDown = true;
}

function keyUp(evt) {
 key = null;
  if (evt.keyCode == 39) rightDown = false;
  else if (evt.keyCode == 37) leftDown = false;
}

document.onkeydown=function(event){keyDown(event);}
document.onkeyup=function(event){keyUp(event);}



function init_paddle() {
 posX = (WIDTH/2)-(xb/2);
   paddlex = posX;
   paddleh = yb;
   paddlew = xb;
}


function circle(x,y,r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI*2, true);
  ctx.closePath();
  ctx.fill();
}

function rect(x,y,w,h) {
  ctx.beginPath();
  ctx.rect(x,y,w,h);
  ctx.closePath();
  ctx.fill();
}


function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
barras = NCOLS*NROWS // total é igaul a colunas x linhas
if (canvas.getContext) {
  ctx = canvas.getContext("2d");
  WIDTH = canvas.width;
  HEIGHT = canvas.height;
  init_paddle();
  initbricks();
  intervalo = setInterval(draw, 10);
}
}
function perdeu(){
 var canvas = null;
 clearInterval(intervalo)
 init();
}

function ganhou(){
 var canvas = null;
 clearInterval(intervalo)
 NROWS =  NROWS+1;
 NCOLS =  NCOLS+1;
 barras = NCOLS*NROWS
 init();
 levelAt = level.innerHTML;
 level.innerHTML = eval(levelAt)+eval(1);
}
function pontuacao(){
 Pontos = eval(Pontos)+(50*level.innerHTML)/3;
 pontos.innerHTML = Pontos.toFixed(0);
}
function draw() {
  clear();
  circle(x, y, 10);
  if (rightDown){
   if (paddlex < WIDTH-57)
   paddlex += 5;
  }
  else if (leftDown)
  {
   if (paddlex > -5)
   paddlex -= 5;
  }
  rect(paddlex, HEIGHT-paddleh, paddlew, paddleh);

  //draw bricks
  for (i=0; i < NROWS; i++) {
    for (j=0; j < NCOLS; j++) {
      if (bricks[i][j] == 1) {
        rect((j * (BRICKWIDTH + PADDING)) + PADDING, 
             (i * (BRICKHEIGHT + PADDING)) + PADDING,
             BRICKWIDTH, BRICKHEIGHT);
      }
    }
  }

  //have we hit a brick?
  rowheight = BRICKHEIGHT + PADDING;
  colwidth = BRICKWIDTH + PADDING;
  row = Math.floor(y/rowheight);
  col = Math.floor(x/colwidth);
  //if so, reverse the ball and mark the brick as broken
  if (y < NROWS * rowheight && row >= 0 && col >= 0 && bricks[row][col] == 1) {
    dy = -dy;
    bricks[row][col] = 0;
 pontuacao();
 barras -= 1
 if(barras == 0){
  St.value = "PLAY";
  i = 0
  j = 0
  x = 150;
  y = 280;
  result.innerHTML = "<h1>Você Ganhou</h1> Pressione <b>enter</b> para comtinuar";
  result.style.display = "block";
  ganhou();
 }
  }

  if (x + dx > WIDTH || x + dx < 0)
    dx = -dx;
  if (y + dy < 0)
    dy = -dy;
  else if (y + dy > HEIGHT-10) {
    if (x > paddlex-10 && x < paddlex + paddlew-10)
 {
  dy = -dy;
  if(key.keyCode == 37)
  {
   if(dx > 0 )dx = -dx;
  }
  else if(key.keyCode == 39){
   
   if(dx < 0 )dx = (dx*-1);
 
  }
 }
    else{
    var i = 0
    var j = 0
        for (i=0; i < NROWS; i++) {
      for (j=0; j < NCOLS; j++) {
          if (bricks[i][j] == 1) {
     bricks[i][j] = 0
    }
   }
  }
 St.value = "PLAY";
 i = 0
 j = 0
 x = 150;
 y = 280;
 result.innerHTML = "<h1>Você Perdeu</h1> Pressione <b>enter</b> reiniciar";
 result.style.display = "block";
 perdeu();
    clearInterval(intervalId);
 }
  }
  if(St.value == "STOP"){
   x += dx;
   y += dy;
  }
  document.getElementById("barras").innerHTML = barras;
}
function status(el){
 if(el.value == "PLAY")
 {
  result.style.display = "none";
  el.value = 'STOP'
  if(dx < 0) dx = dx*-1;
 }
 else el.value = 'PLAY'
}

Então até o próximo post onde vou comentar esse código abraço e obrigado!

OBs: ainda falta muitos detalhes para ficar perfeito mas isso é apenas uma demonstração sinta se a vontade apara usar o código e melhora-lo