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

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. 

Nuevas consolas

Hoy en día la guerra de las consolas ha sido una brutal batalla en el campo de los videojuegos, las marcas reconocidas como Sony, Microsoft y Nintendo ya presentan su nueva generación de consolas, también se presenta Android, en esta nueva generación de consolas, con su idea de OUYA aquí para mi lo que es lo nuevo en las consolas:


Sony Play Station 4: Para mi la consola mas esperada por todo los gamers, siempre sony ha dado de que hablar y siempre ha traído grandes títulos y grandes gráficas, para mi es la mejor consola de estas.


Microsoft Xbox One: De la nueva generación la 2da que salio, trae la tecnología de Blu Ray y trae 8GB de ram, es una consola que trae muchas cosas interesantes, ya de salida trae muchas cosas negativas como que no permite leer los títulos del xbox 360 y tampoco se podrá prestar juegos.

Aun así Xbox, siempre ha dado de que hablar y mas aun con el Kinect que trajo muchas mejoras que están muy interesantes.

Aquí les dejo un vídeo del nuevo motor gráfico que tiene EA Sport para el nuevo Xbox One

http://www.youtube.com/watch?v=QS6IlceFF9g&feature=share


WII U: La decaída de la marca japonesa Nintendo, ha sido preocupante, la falta de títulos interesante ha hecho perder mucho terreno a la Nintendo que tenia años siendo la consola mas vendida por sus grandes títulos que se han ido perdiendo.

Aun los gamers esperamos que la Nintento sea lo que era antes con esos grandes títulos como: Donkey Kong, Super Smash Brother, etc. Que tanto nos gustaron.

Aquí les dejo un vídeo de la Wii U

http://www.youtube.com/watch?v=4e3qaPg_keg

OUYA: Para mi la mejor idea de crear juegos que he visto en mi vida, esta idea de hacer los juegos para quien quiera que los hagas bajando un Developer Kit, me parece sencillamente genial, esto para los desarrolladores independientes (Indi developers) es la primera vez que se toma en cuenta seriamente por una consola, es una consola basada en Android Jelly Bean y sus principios son sencillamente geniales.

http://www.youtube.com/watch?v=j8Hf1VWbLFo

La historia de los Vídeo Juegos

Principios (1940-1959):

La historia del video juego se remota a los años 40, específicamente después de la 2da guerra mundial con la aparición del primer computador programable el ENIAC, los primeros videojuegos era experimentos de programación en las universidades y no fue sino hasta el año 1950, cuando el prestigioso matemático Alan Turing con el prestigioso experto en computación Claude Shannon junto a otros 2 grandes matemáticos Alonzo Church y Kurt Göde establecieron las bases de la teoría de la computación donde le dieron grandes bases a la inteligencia artificial.

Gracias a eso, Shannon junto a el economista y matemático Champernowne, presentaron el artículo “Programming a Computer for Playing Chess” (Programando a una computadora para que juegue ajedrez), en donde presentaron técnicas y algoritmos necesarios para programar un ajedrez, pero en esa época no existía ningún computador suficientemente potente como para programar el juego de ajedrez y no fue hasta 1951 cuando el Dr. Dietrich Prinz, que pudo escribir el programa original en una Ferrari Mark I.

En 1952, Alexander Shaffo Douglas, en su tesis de matemática pura inventa el juego llamado OXO (Juego muy parecido a lo que conocemos como “La vieja”), que fue programado para la maquina EDSAC, aunque fue presentado solo para un grupo de personas, se le considera el primer juego de la historia en usar pantalla grafica digital.

En 1958, llego el que es considerado el primer juego oficial de la historia, llamado Tennis for Two (Tenis para dos), cuando el físico estadounidense William Higinbotham, presento un programa que simulaba una partida de tenis en un osciloscopio, aun muchos fans de ese proyecto dicen que la física de ese juego es mucho mejor que la física de los juegos actuales de tenis.

La era de las primeras “maquinitas:

No fue sino hasta los años 70, que los videojuegos vieron por fin futuro, (los años 60, solo fueron experimentos y se consideraba la industria del video juego como una pérdida de tiempo), luego de la creación de Spacewar en los años 60, el estudiante de Stanford Bill Pits y su amigo Hugh Tuck, crearon la primera máquina arcade de la historia que la ubicaron en un café frente a Stanford donde tuvo grandes éxitos, siendo así la primera máquina arcade que se pagaba con monedas en la historia.

Luego los ingenieros Bushell junto con Ted Dabney, construyeron el juego llamado Computer Space, tratando de introducir el Spacewar a todos los bares del país y poder crear una considerable suma de dinero, luego de varios hincapiés el proyecto llego a comercializarse cerca de la universidad de Stanford, donde tuvo grande éxito y se les pidió sacar el producto en serie para todos los bares del país. Luego de eso no tuvieron grandes éxitos ya que su forma de puntaje y su interfaz era muy complicada para la gente que no era estudiante y se dejó de producir. Bushell y Dabney solo recibieron 250 dólares por su trabajo y crearon una marca llamada Atari.

Raphael Baer, luego de su caída con la Brown Box, en los años 60, siguió insistiendo para conseguir compradores para su proyecto, luego de convencer a los gerentes de Magnavox, se creó la primera consola en la historia la Magnavox Odissey, a pesar de grandes problemas de marketing la marca logro conseguir unas ventas aproximadas a los 130 000 unidades en esa navidad y conseguir inspiración para varios creadores como Bushell.

Luego de la creación de la Magnavox, Bushell consiguió jugar uno de los juegos que presentaba la consola que era juego “Ping-Pong”, tras ese episodio contrato a Alan Alcorn¸ para sacar una versión arcade del mismo juego y lo llamarían Pong. Aunque no presentaba grandes diferencias con el juego de la Magnavox, si traía mejoras en puntajes, rutina de movimientos, efectos de sonido, entre otras. Fue un gran éxito en todo estados unidos en donde sus ventas fueron creciendo hasta tal punto que Bushell tuvo que ir a una oficina de desempleados y contratar gente para poder cubrir la cantidad de pedidos que tenía, entre ellos tenía muchos adictos a la marihuana, heroína, entre otras drogas que le dieron la imagen a Atari de hippie. A finales de 1974 había cerca de 100.000 máquinas solo en estados unidos que generaba aproximadamente 250 millones de dólares anualmente. La era de los videojuegos había nacido oficialmente.

Tras el éxito inmediato de Pong se reestructuro por completo el negocio de los videojuegos, los juegos cada vez era más novedosos y más confiables, en 1973 ya 15 compañías se habían lanzado al negocio de videojuegos, en la que todas las compañías solo imitaban el éxito rotundo de Atari el Pong, en ese tiempo Atari solo se preocupaba por innovar el negocio comercializando nuevos éxitos como Space Race, Rebound, Gotcha, Quadrapong, Touch Me, Tank, Qwak!, Gran Trak 10, entre otros. Cada uno suponía la creación de un nuevo género de juegos.

No fue hasta 1975 cuando Atari, creo otra gran creación que fue el Telegame Pong, que fue la versión domestica de Pong, obtuvo un éxito inmediato y vendió 150 000 unidades aproximadamente, generando una cantidad enorme de ingresos y de competidores a la empresa. En navidades del 77, se podían contabilizar que solo en estados unidos habían sido vendidas cerca de 13 000 000 unidades.

La era de los clásicos y del avance tecnológico:

En 1971 la marca Intel, crea una revolución en la tecnología que afectaría directamente los videojuegos como se conocían y se empiezan a crear los videojuegos como los conocemos hoy en día, Intel crea el microprocesador, esto significaría un cambio radical para la industria del videojuegos ya que todos estaban basados en la tecnología TTL, si querían hacer un cambio tenían que hacer cambios en el hardware y eso era mucho gasto de dinero y tiempo. Con la tecnología de microprocesadores eliminaba ese inconveniente, esta tecnología traía la posibilidad de programar los videojuegos, expandiendo las posibilidades de gráficos y jugabilidad que daba la tecnología TTL. Con esto a mediados de 1975 se creó el juego Gun Fight, un arcade que incorporaba por primera vez la tecnología de microprocesadores. El juego innovo en muchos sentidos, fue la primera vez que se podía ver en pantalla a 2 figuras humanas combatiendo e inducia la noción de controles separados para el movimiento y la dirección.

Fue Steve Jobs, siendo trabajador de Atari, que se encargó de la primera versión de Breakout en microprocesadores, el juego terminado en abril de 1976 fue un éxito rotundo creando millones de imitaciones.

La llegada del ordenador personal:

A mediados de la época de los 70 el computador personal solo era accesible por personas con mucho dinero y solo pidan ser utilizados por personas que estuvieran en el medio (Ing. o aficionados a la computación), también esos computadores eran extremadamente lentos que era muy difícil crear juegos de acción, gracias a eso se crearon los juegos conversacionales o también conocidos como juegos de turno.

Mientras tanto, las nuevas consolas personales de juegos como la Atari 8800 o el KIM-1, pero 2 personas en Sillicon Valley estaban creando algo que también haría un cambio radical en la industria de los juegos en las computadoras personas, Steve Jobs y Steve Wozniak, estaban creando una máquina que dispondría de gráficos, color, sonido y conectores para controles de juego. Esa máquina llamada la Apple II, desde que salió en 1977 se crearon una diversidad de videojuegos que llegaron hasta distribuirse en bolsas Ziploc (Gracias a la Apple II, se pudieron hacer muchos juegos caseros).

Luego en 1978, el japonés Tomohiro Nishikado adopto la nueva tecnología de microprocesadores e, influido por Speed Race¸ creo Space Invader el juego que originalmente consistía en disparar tanques y aeroplanos, pero que en parte por la presión de la compañía y el gran éxito de Star Wars, fue cambiado por los famosos Aliens.

Los años 80 la época de oro de los Videojuegos:

En el año de 1982 la fiebre de los videojuegos había aumentado considerablemente después de la salida de Space Invader los ingresos en los juegos pasaron de 454 millones de dólares a 5313 millones de dólares en 1982, es decir, estaba incrementando un 5% mensualmente.

Con la llegada de los gráficos vectoriales también marco gran diferencia en los video juegos el primero en hacerlo fue el juego Space Wars, que fue una versión del clásico SpaceWars! Del 1962.

Más aun con la llega del color en el mundo del videojuegos causo revolución en los juegos y se crearon nombres como Frogger, considerado por los críticos el videojuego más popular de todos los tiempos.

Mientras tanto se creó Activision siendo la primera compañía externa que desarrollaba juegos para la consola de Atari. Ejemplo que años después lo harían muchas marcas.

También en el año 1981, la marca japonesa Nintendo saco Donkey Kong, juego que por primera vez la figura de Mario Bros, y lo demás es historia.

La era de 8 bits:

En esta era se crearon grandes consola como el Nintento Entertainment System, que saco grandes juegos como Mario World, Zelda, entre otros.

En este momento todas las marcas se basaron en los gráficos y empezaron también a salir grandes franquicias que hoy en día están consolidadas, como Fotball Manager, entre otros.

La década de los 90 y los 16 bits:

A pesar de la consolidación definitiva de los videojuegos a nivel empresarial, la década de los 90 se caracteriza por ser la caída de los 8 bits.

Gracias a los nuevos computadores y tecnologías de 16 bits, se pudieron crear grandes consolas como la que lidero toda esa década la Sega Megadrive, que disponía del título de “Sonic The Hedgehog”. Ese liderazgo se mantuvo solo unos pocos años cuando llego Nintendo con su Super Nintendo, con títulos como Mario Kart, fue un éxito rotundo.

En esta época también se caracterizó por la aparición del Game Boy, esta máquina puso enseguida a Nintendo como la líder en el área de ventas de consolas móvil.

La era del 3D y presente:

La era del 3D comenzó a llegar en la época de los 90 y se consolido totalmente en el 2000, pero el concepto de 3D no es exactamente de esa época, en 1965, cuando el pionero Ivan Shuterland presento en un congreso que delineaba las características de un futuro de la interfaz visual capaz de no solo mostrar el mundo como tal si no que de hacerlo sentir, la creación de esa realidad virtual, debía ser el objetivo principales de los investigadores del campo de la informática

Luego de grandes géneros utilizando la idea del 3D que se dieron en la época de los 90 como Wolfstein 3D, Doom, entre otros grandes éxitos. También se dio a demostrar que el Shareware es una modalidad de negocios exitosa.

En el presente las empresas de video juegos son totalmente prestigiosas, son compañías trasnacionales, en países como España generaba más dinero que la industria de la música y el cine.