JavaScript

Juan Mellado, 16 Febrero, 2008 - 15:12

La "estadística del pollo" dice que desarrollo un juego nuevo cada tres meses, una productividad que más que quisiera para sí más de uno, incluido yo mismo. El problema de esa estadística es que también dice que si tú te comes dos pollos y yo no me como ninguno, entonces "de media" nos comemos un pollo cada uno, aunque la realidad es que uno se harta y otro se queda a dos velas.

De los últimos 9 juegos que he publicado en la web en estos últimos 27 meses, hay algunos que me llevaron un par de días de desarrollo y otros que los he ido dilantando durante semanas, tomando horas sueltas de aquí y de allá. Lo interesante desde mi punto de vista es que puedo hacer un repaso desde la distancia y observar mi evolución como programador de videojuegos amateur.

Para los juegos de la web decidí usar JavaScript, así que para ir familarizándome con el lenguaje empecé con lo básico, un Arkanoid del cual llegué a hacer tres versiones. Comenzar escribiendo un clon de algún juego sencillo (Adivinar un Número, Ahorcado, Tetris, ...) es lo que siempre se recomienda cuando se está empezando, y no creo que sea un mal consejo, aunque yo creo que llevo demasiado tiempo siguiéndolo.

Después de ese primer juego fueron cayendo otros. Un Mahjong donde empezaba a usar gráficos estáticos, aunque no tenía ningún tipo de variación sobre lo básico, ni puntuación, ni tiempo. Colors, un juego de emparejamiento de colores que hacía uso de un algoritmo recursivo fundamental dentro del género. Un Solitario donde tuve que lidiar con el drag and drop, y empezar a pelearme con las incompatibilidades entre distintas plataformas y navegadores. Un Sudoku donde puse a prueba el rendimiento del backtracing en un navegador. Discovery, un punto de inflexión en el que me reafirmé en mi condición de "coder" prácticamente nulo como "designer". Buscaminas, un entrenimiento como cualquier otro para pasar un frío fin de semana. Videopoker, un juego hecho para reaprovechar material gráfico y buscar formas sencillas de encontrar la mejor jugada posible. Y por último Confetti, posiblemente el más elaborado de todos ellos, tanto interna como externamente.

En mi último juego me he esmerado un poco más que de costumbre en el acabado y he tratado de ser un poco más original que de costumbre. Dos detalles:

- El marcador con la puntuación originalmente iba a ser un simple y discreto texto estático, pero a medida que trabajaba en el código me dí cuenta que el único objetivo del juego era conseguir sumar más puntos que en la partida anterior, así que decidí darle más protagonismo. El resultado fue un marcador bastante grande, visible de un sólo y fugaz vistazo. Para mejorarlo un poco y hacerlo más atractivo visualmente decidí que cada número apareciera desplazado verticalmente de forma aleatoria uno o dos pixels. Un cambio pequeño pero que queda muy bien, ya que le quita rigidez a la puntuación y le da un poco de vida. No contento con eso decidí que debía tener algún tipo animación, así que hice que la puntuación fuera subiendo gradualmente en vez de de un sólo golpe. Queda muy bien cuando termina la partida y se puede ver la puntuación subiendo todavía.

- El contador de tiempo en un principio tenía que haber sido la clásica barra que fuera subiendo hasta alcanzar su tope, pero después de echar un vistazo a algunos juegos comerciales (en plan "casual") me fijé que normalmente tenían algún tipo de detalle diferenciador y decidí cambiarlo. En un principio pensé en un termómetro, pero luego me pregunté si podría implementar un sistema de partículas y simular un reloj de arena. Después de muchas pruebas lo conseguí. Incluso llegué a hacer uno con varios colores, pero era tan espectacular que distraía la atención sobre el juego y decidí no ponerlo. Curiosamente al final esto me llevó tanto tiempo que casi me hace abandonar la idea de hacer el juego completo, uno de los de los problemas de no tener diseño ni planificación previa (¿o debería decir "ventajas" cuando uno se es amateur?)

A partir de aquí no tengo muy claro hacía donde mirar y qué camino seguir, y es que creo que siempre trabajaré mejor por encargo que por iniciativa propia. En mi trabajo siempre me he encontrado cómodo con esa presión, buscando soluciones a problemas ajenos en un tiempo adecuado y con la calidad necesaria.

Juan Mellado, 10 Febrero, 2008 - 12:49

A partir de ahora Confetti estará también disponible como un gadget de Google.



Add to Google

Juan Mellado, 2 Febrero, 2008 - 20:08

Acabo de subir un nuevo juego terminado a la web con el nombre de Confetti. Por la imagen adjunta creo que resultará claro entrever el género al que pertenece.

Siguiendo la costumbre de los últimos juegos, este también está hecho en JavaScript y puede jugarse directamente desde el navegador. Sólo lo he probado en Firefox 2 e Internet Explorer 6 bajo Windows XP, en otras configuraciones puede no visualizarse correctamente. En los próximos días trataré de hablar un poco más de él.

Juan Mellado, 25 Junio, 2007 - 18:03

El juego de las no-diferencias:

Original - Parecido

Original - Parecido

Mejor no seguir buscando.

Juan Mellado, 13 Marzo, 2007 - 18:20

Cuando hice el último efecto en JavaScript la semana pasada, comenté la posibilidad de añadir una pequeña sombra al texto para reforzar la sensación de movimiento y darle un poco de profundidad al conjunto. Hoy he estado trasteando un poco hasta conseguirlo, aunque al final ni siquiera he tenido que utilizar JavaScript, con un poco de HTML y CSS básico ha bastado.


underground
underground


Para crear el efecto que se observa en el cuadro he creado tres elementos div en HTML. El primer div sólo sirve realmente para englobar a los otros dos, definir el tamaño del cuadro donde se realiza el efecto, dibujar un borde alrededor, y establecer los atributos comunes de fuentes y colores. El segundo div se utiliza para la sombra, y como se observa en el código que he puesto, en él tan sólo se establece el color que se quiere para la misma, y se escribe la palabra sobre la que se quiere aplicar el efecto. Por último, en el tercer div, se vuelve a escribir la misma palabra que la puesta en el div de sombra, se establece un color de fondo transparente, y se "mueve" mediante los valores del margin completamente hacia arriba (valor negativo) y un poco hacia la derecha. Ese último "movimiento" es el que realmente provoca el efecto, al superponer el texto de color negro sobre el texto de color gris.

<div style="width: 500px; height: 90px; font-family: times new roman; font-size: 75px; text-aling:center; border: 1px solid #000000; color:#000000; background:#ffffff;">
<div style="color:#afafaf;">underground</div>
<div style="background:transparent; margin:-1.25em 0 0 0.2em;">underground<div>
</div>


Por último, una cosa que me gustaría comentar, es que mientras que para el primer div he utilizado píxeles (px) como unidad de medida para conseguir un mayor control sobre los tamaños y posiciones, en el tercer div he utilizado el tamaño de la fuente (em) como unidad de medida para que independientemente del tamaño de letra que se establezca en el cuadro el efecto siga siendo el mismo.