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!

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

VJS (Visual JavaScript) Herramienta para mejorar la Interfaz al nivel de cliente.

En esta entrada les traigo algo bastante interesante. Es una herramienta para el desarrollo web llamada VJS(Visual JavaScript), esta herramienta desarrollada por el M. Sc. Jubert Perez, que facilita mucho el desarrollo de interfaces a nivel de cliente.

Entre una de ellas tenemos el archivo Desktop.js que con esto podemos desarrollar un escritorio web, con sus respectivos iconos,barra de inicio, etc.

Tenemos otra herramienta llamada Dialog.js con esto podemos desarrollar diálogos para la web, con bastantes funciones internas, como Drag & Drop, Minimizar, Maximizar, etc.

Bueno puedo estar hablando toda una tarde de esta herramienta y todavía no concluir su gran magnitud para el desarrollo de aplicaciones del tipo cliente en la web.

Todos sabemos que el desarrollo cliente esta agarrando mucha fuerza en la nueva generación del HTML, muchas cosas que se hacían por servidores ahora las hace el cliente y el servidor se encuentra mucho mas liberado, si podríamos hacer todo por cliente y generar solo un request muy pequeño al servidor, las paginas aumentarían un 80% su velocidad y eso seria bastante entretenido verlo.

No tan solo mejorar las aplicaciones del tipo cliente, también la manera en que el usuario pueda manejarlas con mucho mas facilidad y ya no requiere que el usuario sea una persona con conocimientos previos de la computación para manejar este tipo de aplicaciones.

Aquí les anexo un proyecto que hice con esta herramienta y se nota muy interesante también les dejo unos screenshot de la misma

Descargar Ejemplo

VJS, la herramienta completa.

Para ver el ejemplo sin descargar haz click aqui

También les anexo la documentación del VJS aqui

Saludos a todos.