Bitacora #2: Tile.js generator

Dejando los posts sobre cosas curiosas de javascript para más adelante, cuento un poco sobre una pequeña utilidad que arme para usar en el port del gorillas.

Se trata de un simple generador de tiles para usar sobre un contexto 2d.
Dado que el juego original no utilizaba imágenes, me pareció que no seria correcto hacer un clon que sí las use, por lo que pensé en dibujar los elementos del juego (gorilas, edificios, bananas y el sol) con primitivas del contexto 2d.

Como seria bastante engorroso imaginarme donde tendría que poner cada punto, se me ocurrió hacer una ‘pizarra’ en la que se dibuje cada punto que selecciono. Estos se van guardando en memoria para luego obtener una función con el código para dibujar dichos puntos.

Para manejar de forma ‘elegante’ la orientación a objetos en javascript, use la libreria Base.js. Esta provee de una serie de objetos y métodos que hacen que la herencia y la creación de ‘clases’ sea más llevadero.
El resto del código, consiste en una clase con un ‘canvas virtual’ que lleva registro de los puntos que fueron dibujados para luego obtener el código de cada uno (tanto la clase ‘canvas’ como la clase ‘dot’ saben como obtener su código).
Ademas, al momento de obtener las funciones, se puede especificar un ‘multiplicador’ para reducir el tamaño de los puntos, de esta forma se puede dibujar en grande y de forma comoda, para luego disminuir el tamaño.

Ejemplo:

Tile Generator

Dibujamos esto...

 

 

Drawed gorilla

y obtenemos la función para dibujar esto...

El script es bastante sencillo y carece de buenas prácticas, pero es útil para lo que necesito en este momento.

Para verlo en acción: http://tehsis.com.ar/tilegen/
Repo en github: https://github.com/tehsis/Tile.js-Generator

En el futuro espero hacerlo extensible a primitivas distinta a los puntos (rectángulos en realidad) y poder dibujar otras cosas. No seria complicado, pero ahora la prioridad es el gorillas :D.

Dejo un par de links interesantes,

Base.js – Mini librería para trabajar con objetos, clases, herencia, etc de forma ‘clasica’
Load.js – Mini librería para ‘importar’ scripts js mediante código.
10 Things I learned from jQuery source – Video de Paul Irish contando 10 técnicas interesantes que estan presentes en el código de jQuery.
Tutorial del elemento Canvas (MDC) – Lindo y llevadero tutorial del MDC sobre la etiqueta canvas y el contexto 2d.

Bitacora #1: Funciones y scope en javascript

Para comenzar con la bitácora, me pareció innecesario hablar sobre que es javascript, como se ejecuta y cosas básicas sobre su sintaxis.
Es que de hecho, la mayoría de los desarrolladores web, sabemos que posee una sintaxis basada en C, que es un dialecto de la especificación ECMAScript y que se usa para hacer efectos raros en las páginas web… Si ya se, es prácticamente un cliché decir que javascript es mucho más poderoso que eso, teniendo ejemplos como Twitter, Facebook, Gmail y un largo etcétera, creo que ya no hace falta aclararlo.
Lo cierto es que durante mucho tiempo la mayoría simplemente buscaba en Google como hacer algo en particular sobre Javascript, cambiaba un par de cositas para adaptarlo a su necesidad y decia ‘Tengo que aprender javascript algún día’. Ese ‘algún día’ llego hace rato y hoy es difícil pensar un sitio o un sistema web que no lo utilice.
Es quizás por esto que mucha gente no entiende exactamente como se utiliza Javascript y por lo que muchas de sus capacidades como lenguaje, en el sentido estricto de la palabra, están subestimadas.
Por ello, elegí comenzar a escribir sobre los conceptos básicos que en mi opinión, hacen especial a javascript

Funciones y scopes

Las funciones en javascript son incluso más importantes que en otros lenguajes dado que son el único delimitador de contexto que tenemos a diferencia de C++ o Java en donde las variables tienen alcance solamente en el bloque en donde fueron definidas.

En el ejemplo, definimos una variable a en el contexto global, dentro de una función creamos una variable del mismo nombre a la cual le asignamos un valor. Ejecutamos la función y comprobamos que la variable a, tal y como es de esperarse, no fue modificada.
Sin embargo, dentro del bloque if, creamos una nueva variable a, le asignamos un valor y fuera del bloque, la variable continua teniendo ese valor. Como dije anteriormente, el único scope en javascript son las funciones y el scope global.

Funciones anónimas

Otra cosa interesante de javascript, es la posibilidad de crear funciones anónimas. Con ellas, podemos hacer dos cosas (en principio); asignarlas a una variable e invocarlas como una función común:

O bien, decirles que se autoejecuten, de la siguiente manera:

Esto último, es muy útil, no solo nos permite simular bloques para solucionar el problema del scope que mencionamos antes, si no que sirve para solucionar un problema bastante común e incluso visto en algunos frameworks famosos y es que, cualquier variable que definamos fuera de una función, se encuentra en el scope global. De modo que es muy común que diferentes scripts sobrescriban variables por estar definiendo todas en el contexto global.
Una solución a esto, es la de encerrar todo nuestro código en una gran función anónima que se autoejecute y solo exponer aquellas variables estrictamente necesarias y de esta forma simular espacios de nombres en nuestros scripts.
Un ejemplo práctico de esto, lo podemos ver en el código fuente del framework jQuery

Como vemos, al incluir jQuery en nuestro sitio web, se ejecuta una gran función anónima dentro de la cual, se crea una variable con toda la funcionalidad del framework y luego se la asigna a una propiedad del objeto window.
Para no entrar en mucho detalle simplemente tenemos que saber que dentro de un browser, el objeto window define nuestro contexto global. Es decir, jQuery en el contexto global es el mismo objeto que window.jQuery.

De esta forma, la única colisión de nombres posible es que haya otro objeto llamado jQuery (o $) dentro de window.

Nota 1: El $ en window.$ no es ni más ni menos que un identificador para una variable cualquiera. Es exactamente lo mismo usar jQuery o $, no posee ningún poder otro poder mágico.

Nota 2: Es recomendable usar jQuery en lugar de $, ya que este último es utilizado por otros frameworks y podemos tener efectos no muy deseados si tratamos de trabajar con ellos.

Conclusión

Las funciones en javascript son el único delimitador de scope que tenemos, esto podría resultar un grave problema ya que cualquier identificador que definamos fuera de una función puede colisionar con otro definido en otro script. Es por esto que es una buena práctica encerrar todo nuestro script en funciones anónimas que se autoejecuten y exponer (asignándolos como propiedades del objeto window) solamente aquellos identificadores imprescindibles.
Para cerrar, podemos decir que en javascsript las funciones son objetos, pero eso mejor lo vemos mañana.

Antes de cerrar, quiero comentar que pueden encontrar el estado actual del juego que comente en el post anterior en https://github.com/tehsis/Gorillas.js
Por lo pronto, estuve trabajando más que nada en crear un marco de trabajo para solucionar algunos problemas que vamos a ver más adelante.

Bitácora de viaje hacia la BarcampNEA: Desarrollo de un juego usando HTML5 + JS

Para quien no lo sepa, el Sabado 25 de junio próximo, se va a relizar la primer Barcamp organizada en el NEA (Nordeste Argentino). Evento bautizado BarcampNEA.
Para esto, nos propusimos con @matixfigueroa hacer una comparativa entre Flash+Actionscript y HTML5+Javascript. Para lo cual cada uno va a realizar un port del famoso juego Gorillas incluido con el otrora ponderado Quick Basic.

 

Dado que a diferencia de mi contra parte que descose Actionscript, recién estoy comenzando seriamente a trabajar con Javascript, me pareció que podría ser interesante armar una “bitácora de viaje” contando que fui haciendo, los problemas que encontré y como los solucione de forma tal que pueda compartirlo y de paso afianzar los conceptos aprendidos. Ademas, abro la posibilidad de escuchar sus recomendaciones, sugerencias y/o colaboraciones a este mini proyecto.

No voy a poner una periodicidad fija para cada post ya que todo depende de que tan apretado este con la facultad y/o mi trabajo, pero tratare de cubrir la mayor cantidad de aspectos que pueda.

Este primer post va a ser corto, así no mezclo las cosas. Mañana arranco con un par de conceptos básicos de Javascript.

Me despido no sin antes recomendar dos libros que acabo de leer y que considero muy interesantes para comenzar con este lenguaje.

El primero es “Javascript: The good parts” de Douglas Crockford. Una introducción a Javascript “cortita y al pie”. El creador de JSON muestra en este libro las cosas lindas de javascript y como ocultar implementar correctamente las feas.

El segundo, “Pro Javascript techniques” de John Resig, es un excelente complemento para el primero ya que el autor nos explica soluciones a diferentes problemas utilizadas en los frameworks más famosos , como Prototype, ExtJS, Dojo, jQuery (obviamente ya que su autor es el mismo que el del libro) entre otros.

Nos seguimos leyendo mañana :)