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!

RegExp (Expresiones regulares en javascript)

Hola a todos,

hoy les traje una herramienta aun mas útil que las anteriores puesta, hoy les hablare de RegExp esta gran herramienta hace que podamos manejar expresiones regulares a nivel de cliente en la web.

Pero primero, ¿que son las expresiones regulares?.

Las expresiones regulares son un patrón que describe un conjunto de cadenas, bueno eso suena un poco complicado al principio, tampoco puedo ponerme a hablar de expresiones regulares, seria un post muy largo, hay muchos libros al respecto. Pero resumiendolo, podríamos decir que las expresiones regulares es una forma mas simple de reconocer un patrón, un ejemplo fácil seria:


Supongamos que le pidamos al cliente ingresar unos códigos de unos productos, los códigos tienen un patrón de 3 números, 1 letra y 2 números, es decir, algo así: 252T24, como  podríamos saber si el código que esta ingresando el usuario es un código valido, hay muchas formas de equivocarse escribiendo esos códigos, y asi si lo hacemos del lado del servidor haríamos un query innecesario a la base de datos, ya que a mi parecer, los querys que llegan a la base de datos tienen que ser querys 100% seguro que están bien.

Para eso tenemos el objeto de javascript RegExp que nos hace la facilidad de poder generar patrones para comparación, en el ejemplo pasado, la expresión regular seria algo así: "[1-4][0-7][0-7][A-Z][0-9][0-9]"(pueden leer un libro de expresiones regulares, o algo al respecto en libro referente a compiladores), en ese caso usamos el objeto RegExp asi:
var patt1 = new RegExp("[1-4][0-7][0-7][A-Z][0-9][0-9]");

y podemos usar el metodo .test(), para compararlo con otro string.

Les anexo un ejemplo que compara ese tipo de códigos con lo que el usuario ingresa en un editText, pueden descargarlo por aquí 

Y pueden ver el ejemplo sin descargar aquí


Bueno les recomiendo averiguar mas sobre expresiones regulares, así podemos certificar patrones y hacer mejor aun nuestros clientes.

Hasta luego!

PD: El ejemplo solo agarra letras mayúsculas

jsPDF (Herramienta para la creación de archivos PDF a nivel de cliente)

Hola a todos, el día de hoy les traigo una herramienta muy interesante, se llama jsPDF, esta herramienta facilita la creación de archivos .pdf en el cliente.

Se preguntaran que ventajas trae hacer archivos .pdf a nivel de cliente. Bueno como saben la idea de hoy en día es que el servidor haga menos tareas y que el cliente esta agarrando mucha fuerza, con esto podemos decir que si antes hacíamos archivos .pdf en el servidor, el servidor se tenia que tomar la molestia de crear un archivo por cada uno de los "request" que reciba del mismo, supongamos que tenemos unos 3000 "request", son 3000 archivos .pdf que tiene que crear el servidor, no cualquier servidor aguanta esto. Ahora si tenemos la facilidad de enviarle un jSON al cliente y que este cliente con esta información pueda crear el mismo el .pdf, pasamos de hacer archivos de aproximadamente de 50kbs cada uno,  en servidor a solo un jSON que puede pesar aproximadamente 1kb. Eso seria aumentar la capacidad de tu servicio un 80% o si no mas.

Esa arquitectura de los "thin client" o "cliente liviano", a mi criterio se esta acabando, gracias a la incursión de HTML5 las cosas han cambiado un poco en la web, y como vemos no solo .pdf podemos hacer, ya hay herramientas para la creación de archivos word, excel, entre otras muchas cosas. Que ahora esta dejando el lado del servidor solo para hacer querys y que todo lo haga el cliente.

En este código de muestra uso la herramienta anteriormente explicada, el "VJS" para la creación de un dialogo y un grid para que vean lo simple que se puede hacer un PDF, en este ejemplo agarro todo lo que esta en el grid y lo coloco en una pagina nueva donde se crea el PDF.

El botón de ejecución del PDF va a un método que se llama createPDF, en este método se usa un poco de paginacion para que el  PDF quede bien estructurado y no quede algo sobrepuesto.

Capaz es un poco complicado verlo así de una vez, pueden probar un botón y solo poner:

var doc  = new jsPDF();
doc.addText(80,20,"Hola mundo");
doc.output('datauri');

ya con eso estarían creando un PDF, sencillo cuando presionan un botón, no olviden importar el JS al principio del documento, de todas maneras les dejo la pagina oficial del proyecto:

http://jspdf.com/

Les dejo un ejemplo como siempre para que puedan descargar aqui

Y les dejo el ejemplo para que lo vean sin descargar aqui (disculpen las publicidades pero es el host gratis).

Bueno con esto concluyo este ejemplo que me parece bastante interesante!...

Hasta luego todos

Saludos