Canvas en HTML5 (Brickbreaker Game)

Hola a todos, en esta entrada les traigo un ejemplo de Canvas, pero primero tenemos saber que es canvas?.


Canvas, su traducción al español seria lienzo, y permite la generación de gráficos dinamicamente  tanto como estáticos y dinámicos.

Este gran objeto de dibujos fue el culpable de una de las caídas mas grandes del Internet, del famoso FLASH, antes se necesitaba de flash para poder producir gráficos en el explorador, ya no, el objeto canvas ya se encuentra en los browser o cliente, y se pueden hacer cosas muy interesantes con el.

Hoy les traigo como ejemplo un juego de brickbreaker hecho totalmente en canvas, a nivel de gráficas no es nada del otro mundo, pero es un juego que no necesita de ningún tipo de pluggin para correr, solo con el tag <canvas></canvas>, ya se crea un cuadro canvas, primero aparece totalmente blanco luego lo que tenemos que hacer es dibujar sobre el.


El objeto canvas se agarra con una variable en javascript:
var can = document.getElementById("MyCanvas"); 

y se le accede al contexto por ejemplo:

var contexto = can.getContext("2d");

por ahora solo explicare el contexto en 2d, luego de eso ya se puede empezar a dibujar sobre el, si hacemos algo como

ctx.beginPath();
ctx.font = "10px Arial";
ctx.fillText("Hola mundo",10,10);
ctx.closePath();

la primera linea indica al canvas que se prepare para dibujar, la segunda linea elige el tipo y tamaño de letra con la que se quiere escribir y fillText es la función para escribir que primero agarra un string luego sus posiciones en x,y respectivamente. Luego siempre se tiene que cerrar el proceso de dibujo, y con eso podemos escribir ya algo en el canvas.

En el juego que les traigo en esta entrada es un poco mas profundo pero no es nada del otro mundo, los juegos son como las películas, son millones de frames(imágenes) corriendo rápidamente y eso hace una secuencia de acción.

por eso encontraran  una función se llama setInterval(function(),time) esta función repite la función que recibe como parámetro, cada tiempo que recibe como parámetro en MILI SEGUNDOS.

Con esa función, repito la función dibujar(), y el tiempo es variante con la cantidad de brick que se van destruyendo, esa función dibuja los brick y los va re dibujando depende de como se esta jugando, y así sucesivamente todo el juego se va construyendo.

Les dejo este juego para que se diviertan y exploren un rato, saludos para todos

Pueden descargar el juego como siempre por aquí

Y pueden jugar el juego sin descargar por aquí (Como siempre les pido disculpa por las publicidades)

Pueden seguirme en twitter por @AnteroOfficial


Saludos a todos.

PD: El juego se juega con las teclas derecha e izquierda de tu teclado. Suerte!