El Juego de la Vida hecho en... DHTML

Gamoliyas fue mi noveno juego íntegramente en DHTML (JavaScript, CSS y HTML) que hice después del Hundiyas. Se trata del juego de la vida de John Conway ("John Conway's Game of Life").

Para quien no conozca el juego, puede leer sobre él en la wikipedia: http://es.wikipedia.org/wiki/Juego_de_la_vida

Mientras el juego está en marcha, siempre que no se haya especificado lo contrario (en Guardar mundo), se pueden crear (pintar) más individuos con el botón izquierdo del ratón.
Para borrar, se debe utilizar el botón derecho del ratón o el izquierdo mientras se pulsa una de estas teclas: Control, Backspace, Suprimir, D, E o 0 (útil para Opera que no detecta el botón derecho del ratón). También es posible borrar haciendo doble click encima de una casilla (sí, en Opera también).

El juego es muy configurable, pudiendo hacer un mundo esférico y de distintos tamaños. También se puede modificar la velocidad de los ciclos, verse en color (según los vecinos de cada individuo), guardar mapas y volver a cargarlos, etc.

Al guardar un mapa se pueden elegir otras opciones (como ocultar el menú de opciones y otras cosas, reproducir automáticamente nada más carguemos, etc). Esto genera una URL que la podemos guardar para visitar luego o bien la podemos poner en el diálogo que sale al apretar la opción de Cargar mundo y así no tenemos que recargar la página del juego: esta opción descompone la URL y aplica las opciones elegidas y visualiza el mundo correspondiente.

Y ahora viene el punto fuerte: estas mismas URL que se generan al guardar sirven también para insertar el juego en otras páginas (educativas, por ejemplo) mediante un iframe o mediante otra técnica que se prefiera. Podéis utilizar el juego en vuestra página sin ningún compromiso, siempre que sea respetando el nombre de autor.
Para más información de cómo utilizar el juego en otras páginas podéis visitar http://www.granvino.com/jam/stuff/juegos/gamoliyas/spanish/ejemplo.htm (en inglés en http://www.granvino.com/jam/stuff/juegos/gamoliyas/english/ejemplo.htm)

Puede jugarse en línea en http://www.granvino.com/jam/stuff/juegos/gamoliyas/spanish/ (en inglés en http://www.granvino.com/jam/stuff/juegos/gamoliyas/english/).

Y podéis bajar el juego, con licencia MPL 1.1, en http://gamoliyas.sourceforge.net/

Un "Hundir la flota"... sí, en DHTML

Hundiyas fue mi octavo juego íntegramente en DHTML (JavaScript, CSS y HTML) que hice después del Conectayas.

Se trata del juego de "los barquitos" o "los barcos", tambien conocido como "Hundir la flota", "Tocado y hundido" o "Batalla naval".

Pero la diferencia es que se pueden modificar muchos parámetros con el menú de opciones: dificultad, alto y ancho del tablero, poder poner barcos adyacentes (unos junto a otros), etc.

Se juega contra el ordenador. La "inteligencia" de éste vendrá dada por el nivel de dificultad escogido. Aunque parezca un juego sólo de suerte, en realidad es también un juego de inteligencia.

Lo primero que se debe hacer es colocar tus barcos (haciendo click en ellos, no arrastrándolos) en tu panel, que es el de la izquierda. Una vez colocados pueden volver a moverse volviendo a hacer click en ellos y eligiendo su nuevo emplazamiento. Cuando se coloquen todos, se debe dar al botón de "Comenzar batalla" que aparecerá donde inicialmente estaban los barcos. Entonces comienza a bombardear el primer jugador y luego el oponente... así rodo el rato, por turnos. El jugador que bombardea primero también puede ser configurado en el menú de opciones. Se debe bombardear en el panel de la derecha, que aunque no se vean es donde se encuentran los barcos del oponente. Gana quien consigue eliminar todos los barcos del oponente sin que le eliminen todos los suyos.

Puede jugarse en línea en http://www.granvino.com/jam/stuff/juegos/hundiyas/spanish/ (en inglés en http://www.granvino.com/jam/stuff/juegos/hundiyas/english/).

Y podéis bajar el juego, con licencia MPL 1.1, en http://hundiyas.sourceforge.net/

La villa del seis: Miedo y ... en La Mussara (La segunda aventura gráfica online sin software propietario ni plug-ins)

La villa del seis es mi tercer juego en PHP y DHTML (JavaScript, CSS y HTML). Lo realicé junto con Yasmina Llaveria del Castillo, mi novia.

El juego utiliza el mismo motor que el Yasmina's Quest pero retocado y mejorado.

Esta vez se trata de una aventura de terror psicológico ambientada en La Mussara, un pueblo abandonado en la província de Tarragona (España). Todas las fotos del juego han sido realizadas en éste pueblo, al cual accedimos la mayoría de veces de noche para hacerlas y tambien de día (luego con retoque fotográfico las oscurecimos y le aplicamos efectos para que pareciera de noche).

El juego se basa en la leyenda -existente en la realidad- que habla sobre un pueblo situado en una dimensión paralela, llamado La vila del sis en catalán, al cual -dicen- se accede desde las puertas interdimensionales de La Mussara (enclave telúrico para algunos) y que algunos creen que ese pueblo es el lugar a donde van a parar las personas desaparecidas en La Mussara.

Según dicen ocurren muchas desapariciones allí. Lo cierto es que vamos mucho porque nos gusta la montaña, sobretodo de noche, y todavía estamos aquí :)

El pueblo tiene una iglesia abandonada, con pinturas satánicas (y de cualquier otra índole también), y otros lugares interesantes. Muchos de éstos, incluida la iglesia, se recogen en el juego y podeis ver fotos de ella si lo jugais.

La historia comienza cuando una noche, yendo hacia La Mussara para ver la llúvia de estrellas, se te para el coche y escuchas un ruido muy fuerte a lo lejos. No puedes resistirte y, con mucho miedo, decides investigar el origen de este misterio.

El juego es bastante más largo que el Yasmina's Quest, y también contiene más objetos, más lugares para visitar, más dificultad, más texto...

El juego ha sido publicado y comentado en muchas páginas web, blogs y foros. Hasta ha salido una pequeña referencia a él en la revista AÑO/CERO (tanto en la versión impresa como en la versión en línea) en el número de enero del 2007. El éxito del juego ha resultado en unas 200 descargas diarias aproximadamente, ya habiendo pasado la etapa con mas éxito (más o menos 300 al día). Esta tendencia continúa hoy en día.

El juego ha estado jugado o podría jugarse en teléfonos móviles, consolas (DreamCast, XBOX, WII...), consolas portátiles (Nintendo DS, PSP), PDA's (PocketPC, Palm), ordenadores (PC, Mac, Amiga), etc. Algunas capturas se pueden ver aquí.

Puede ser jugado como una aventura gráfica estilo point-and-click, como una aventura conversacional (aventura textual, con solo texto o acompañada con gráficos a modo aventura grafico-conversacional) o como una mezcla de las dos.

Para poder jugar el juego como una aventura gráfica, pudiendo hacer click (o la acción equivalente dependiendo del dispositivo utilizado para jugar) en las acciones y en los objetos, es necesario que el navegador soporte JavaScript y CSS. En éste caso también se podrá jugar como una aventura conversacional (IF, ficción interactiva) si se prefiere, escribiendo las acciones a realizar.

Si el navegador web no soporta CSS, se puede jugar igualmente pero los objetos se verán situados mal en la pantalla o no se verán (los del inventario sí).

Si el navegador web no soporta o tiene desactivado JavaScript se puede jugar como una aventura gráfico-conversacional (aventura conversacional con gráficos). Se tendrán que escribir las acciones.

Si el navegador web, sin JavaScript, tampoco soporta o tiene desactivados los gráficos, tampoco es problema para jugar: se puede jugar como una aventura conversacional clásica, sin gráficos.

Existe un caso remoto con JavaScript y sin gráficos: el juego se jugaría como una aventura conversacional pero con facilidades (no haría falta escribir las acciones ni los objetos).

A muchas personas les resulta bastante difícil resolver los puzzles del juego. Para los que se pierdan, recordarles que pueden utilizar la opción correspondiente durante el juego para ver el mapa y situarnos ("la X marca el lugar"). O también dejando el cursor del ratón (u otro dispositivo que deje ver la propiedad "title" de HTML) encima de cada punto cardinal podemos ver que sale un texto explicando hacia dónde va esa salida.

El juego también ha sido traducido al catalán.

La reseña donde se nombra al juego, en la revista AÑO/CERO de enero del 2007, puede leerse en éste artículo de Jose Manuel Serrano cueto (también en la versión impresa): http://www.akasico.wanadoo.es/akasico/html/carticulos/176048_2.html

Para ver capturas del juego en diversas plataformas: http://lavilladel6.tuxfamily.org/

Para leer un poco más sobre el juego, podeis visitar este post: http://www.caad.es/foro/viewtopic.php?t=1321 (también podéis utilizar un buscador para encontrar más información, dejarme un comentario o escribirme)

Podéis probar el juego en línea en http://www.granvino.com/jam/stuff/juegos/lavilladel6/ (en catalán en http://www.granvino.com/jam/stuff/juegos/laviladel6/).

Y podéis bajar el juego, con licencia MPL 1.1, en http://lavilladel6.sourceforge.net/

Para los que tengan Windows y prefieran bajarse el juego y no tengan un servidor web con soporte de PHP (o no quieran utilizarlo), pueden bajarse la versión que incluye el programa server2go: La villa del seis + server2go (La vila del sis + server2go en catalán). Esta versión sólo funcionará en Windows, aunque el código PHP que incluye (que es todo el juego) sí que funciona en cualquier sistema (aunque para eso es mejor bajarse el código sin server2go de http://lavilladel6.sourceforge.net/).

Espero que os guste :)

Un Conecta-4 que se transforma en un 3 en raya y en más juegos similares... por supuesto, con DHTML

Conectayas fue mi séptimo juego íntegramente en DHTML (JavaScript, CSS y HTML) que hice después del Buscayasminas.

Conectayas es un juego muy configurable que puede convertirse en un Conecta cuatro, un Tres en raya (Tic-Tac-Toe o gato) y en muchos más juegos similares mediante el menú de opciones.

Con el menú de opciones podremos configurar, entre otras cosas, el alto y ancho del tablero, las fichas necesarias para ganar y la gravedad (si ésta está activada, las fichas caen como en el Conecta-4 y si no se quedan en el hueco donde las dejas al estilo del 3 en raya).

Se puede jugar contra el ordenador o contra otra persona de forma local (por turnos, claro).

Al principio puede ser difícil ganarle al ordenador pero cuando se coge el truco ya es más fácil.

Puede jugarse en línea en http://www.granvino.com/jam/stuff/juegos/conectayas/spanish/ (en inglés en http://www.granvino.com/jam/stuff/juegos/conectayas/english/).

Y podéis bajar el juego, con licencia MPL 1.1, en http://conectayas.sourceforge.net

Un Buscaminas muy configurable en tu navegador... ¡también con DHTML!

Buscayasminas es mi sexto juego íntegramente en DHTML (JavaScript, CSS y HTML) y es el siguiente juego con esta tecnología que hice después del Yasminoku.

El Buscayasminas es un clon del Buscaminas que viene en las diferentes versiones del sistema operativo Windows pero haciendolo más configurable grácias a su menú de opciones: se puede fijar un límite de tiempo, por ejemplo.

El botón derecho se puede utilizar para poner banderas (marcar minas) en Internet Explorer, Netscape, Mozilla/Mozilla Firefox, etc. pero en Opera (al menos en su versión 9 y anteriores, con la configuración por defecto) deberemos hacer click con el botón izquierdo del ratón mientras pulsamos la tecla Control (o Alt, o Mayus...).

El juego ha sido traducido a diversos idiomas por diversos usuarios de alrededor del mundo. De esto ya os hablaré otro día ;)

Puede jugarse en línea en http://www.granvino.com/jam/stuff/juegos/buscayasminas/spanish/ (en inglés en http://www.granvino.com/jam/stuff/juegos/buscayasminas/english/).

Y podéis bajar el juego, con licencia MPL 1.1, en http://buscayasminas.sourceforge.net

Un Sudoku... ¡con más DHTML!

Yasminoku es el juego en DHTML (JavaScript, CSS y HTML) que hice después del Yasminuroban y se trata de un juego de Sudoku.

El juego puede generar sudokus con la cantidad deseada de números iniciales que luego has de resolver y darle al botón "Validar" para comprobar que estén bien resueltos. A veces tienen más de una solución.
También se le puede insertar un sudoku, por ejemplo uno que hayamos visto en un periódico, y hacer que lo resuelva.

Para mayor facilidad puede utilizarse el teclado para cambiar de número en lugar de hacer click en ellos.

El juego ha tenido bastante repercusión (y sigue teniendola). Ha sido traducido en varios idiomas (incluido el chino) por otras personas y utilizado en otras webs. E incluso le han dedicado dominios exclusivamente para él. Pero de eso ya os hablaré otro día :)

Puede jugarse en línea en http://www.granvino.com/jam/stuff/juegos/yasminoku/spanish/ (en inglés en http://www.granvino.com/jam/stuff/juegos/yasminoku/english/).

Y podéis bajar el juego, con licencia MPL 1.1, en http://yasminoku.sourceforge.net

Un Sokoban en el navegador web... ¡y dale con el DHTML!

Yasminuroban es el juego en DHTML (JavaScript, CSS y HTML) que hice después del Tetríssimus y se trata de un clon del juego japonés "Sokoban" (también conocido como "Warehouse Keeper" o "Boxes", entre otros nombres). Podéis encontrar más información sobre este juego aquí.

Se utilizan las flechas del teclado para poder manejarlo (aunque el editor de niveles hace uso del ratón).

Permite volver atrás los pasos necesarios, deshaciendo movimientos, y también lo contrario, rehacer movimientos. Incluye un contador de movimientos para saber cuántos hemos realizado. Si nos hemos equivocado demasiado podemos reiniciar el nivel por completo.

Para poder elegir nivel, incluye un selector de niveles. Los niveles impares son sacados del Sokoban y los pares son de cosecha propia.

Pero Yasminuroban es más que un simple clon del Sokoban: también incluye un editor de niveles. Se trata del primer editor de niveles escrito en DHTML (más información en http://www.gameinnovation.org/index.php/Yasminuroban). Este editor de niveles permite crear tus propios niveles y jugarlos (también editar los niveles ya existentes en el juego) u obtener su código para ponerlos dentro del juego o de otro juego tipo Sokoban.

Puede jugarse en línea en http://www.granvino.com/jam/stuff/juegos/yasminuroban/spanish/ (en inglés en http://www.granvino.com/jam/stuff/juegos/yasminuroban/english/).

Y podéis bajar el juego, con licencia MPL 1.1, en http://yasminuroban.sourceforge.net

Un Tetris en el navegador web... más DHTML

"Tetríssimus" es mi tercer juego íntegramente en DHTML (JavaScript, CSS y HTML), sin utilizar PHP para nada.

Es un sencillo clon del Tetris que se maneja con las flechas del teclado y que se pueden rotar las piezas en dos sentidos: hacia la izquierda (teclas shift, espacio, insert o...) o hacia la derecha (flecha arriba, control, intro o...).

Cada seis líneas se sube de nivel y a cada nivel nuevo las piezas todavia van más deprisa (en los primeros niveles cuesta apreciarlo). Hay niveles infinitos.

El algoritmo de rotación de las piezas, que utiliza para rotar las matrices que guardan a éstas, seguramente no sea el mejor pero lo idee yo mismo porque no lo encontraba en ninguna parte. Funciona perfectamente para matrices de cualquier tamaño y tanto para rotar hacia la izquierda como hacia la derecha.

El juego tiene algunos bugs como cuando se rota la pieza cerca del suelo y esta se eleva (aun siendo un cuadrado) o bien cuando las piezas se solidifican demasiado temprano al chocar con otras ya puestas, sin dar tiempo a moverla.

Podéis probar el juego en línea en http://www.granvino.com/jam/stuff/juegos/tetrissimus/spanish/ (en inglés en http://www.granvino.com/jam/stuff/juegos/tetrissimus/english/).

Y podéis bajar el juego, con licencia MPL 1.1, en http://tetrissimus.sourceforge.net

El clásico Pong en el navegador web... también con DHTML

"PunkPong" es mi segundo juego íntegramente en DHTML (JavaScript, CSS y HTML), sin utilizar PHP para nada.

No es más que un clon del Pong con niveles infinitos. Cada vez que marcas tres goles, pasas de nivel y el enemigo es más difícil. Los primeros enemigos son bastante sencillos, lo sé, pero... ¡intentar superar el nivel 11!

Se puede jugar utilizando el teclado, con las flechas arriba y abajo y el espacio para sacar la pelota cuando es tu turno (también flecha derecha, control, etc), o el ratón (click para sacar).

Tiene algunos bugs, como el de la pelota fantasma que atraviesa la paleta (tanto la del enemigo como la tuya), pero a veces hacen mas divertido el juego porque cambia un poco su dinámica y ocurren inesperadamente.

Podéis probar el juego en línea en http://www.granvino.com/jam/stuff/juegos/punkpong/spanish/ (en inglés en http://www.granvino.com/jam/stuff/juegos/punkpong/english/).

Y podéis bajar el juego, con licencia MPL 1.1, en http://punkpong.sourceforge.net

Los "Marcianitos" hacen el animal en el navegador... con DHTML

"La Ranisima" es mi primer juego íntegramente en DHTML (JavaScript, CSS y HTML), sin utilizar PHP para nada.

Se trata de un juego tipo "Space Invaders" bastante infantil, de muy sencillo manejo y muy facil de ganar.

En lugar de "marcianitos" tenemos a distintos animales que irán cambiando en cada fase hasta que salgan todos en una de ellas y luego vuelve a comenzar otra fase por el primero. Hay niveles infinitos y la difultad siempre va incrementando.

La protagonista es una rana (de ahí el nombre) que puede moverse en los cuatro puntos cardinales y disparar con uno de estos botones: Control, Barra espaciadora, Shift, etc...

Podéis probar el juego en línea en http://www.granvino.com/jam/stuff/juegos/ranisima/spanish/ (en inglés en http://www.granvino.com/jam/stuff/juegos/ranisima/english/).

Y podéis bajar el juego, con licencia MPL 1.1, en http://ranisima.sourceforge.net

El juego de la carta más alta

Mi segundo juego en PHP fue "La carta más alta", un juego de cartas para dos jugadores (el ordenador y el usuario).

Al principio supuse, por ignorancia, que al ser un juego de cartas iba a ser más fácil de programar. Al final resultó, en algunos aspectos, casi tanto o más difícil de programar que el Yasmina's Quest y su motor.

El juego no utiliza nada más que PHP y el HTML que devuelve éste. Eso quiere decir que puede jugarse en cualquier dispositivo que tenga un navegador web: ordenadores, consolas, teléfonos móviles... Tampoco utiliza imágenes, así que se ve perfectamente en navegadores web basados en texto.

La mecánica es muy sencilla: comienza tirando el usuario. Gana la mano (la jugada actual) quien ha tirado la carta más alta (puede haber empate). Ambos, ordenador y usuario, roban una carta y tira el que ha ganado la mano anterior (si hubo empate, tira el último que tiró la vez anterior).
Así va transcurriendo el juego hasta que ya no hay más cartas para robar y van tirándose las últimas que quedan en las manos. El ganador es el que más manos (jugadas) haya ganado. Puede haber empate final.

Aún siendo sencilla la mecánica del juego, es difícil ganarle al ordenador. Prometo que éste no hace trampas :)

Podéis probar el juego en línea en http://lcma.tuxfamily.org/lcma_spanish/index.php
Y podéis bajar el juego, con licencia MPL 1.1, en http://lcma.sourceforge.net

Que lo disfrutéis ;)

La primera aventura gráfica online sin software propietario ni plug-ins

Yasmina's Quest fue mi primer juego en PHP y el cual también utiliza DHTM (JavaScript, CSS y HTML) aunque el soporte de DHTML no es necesario para poder jugarlo.

Se trata del primer juego de aventura gráfica del estilo point-and-click ("apuntar y hacer click", al estilo de las aventuras clásicas de LucasArts, etc) que puede jugarse en línea y en cualquier navegador web, sin necesidad de descargar ningún plug-in ni nada. Puede encontrarse más informacion aquí: http://www.gameinnovation.org/index.php/First_graphical_point-and-click_adventure_written_in_PHP_and_DHTML

También es el primer juego ambientado en La Mussara, un pueblo abandonado de la província de Tarragona (España).

Puede funcionar en cualquier navegador web, compatible o no con JavaScript.
Si el navegador web soporta JavaScript e imágenes, es posible jugar a la aventura como una aventura gráfica común (haciendo click en los objetos pintados en la pantalla y en las acciones).
Si no soporta JavaScript, el juego funcionará como una aventura conversacional con gráficos.
Hasta es posible jugarse en un navegador web basado en texto como Links (o Lynx o w3m). Sin gráficos, el juego funcionaría como una aventura conversacional clásica (pudiendo hacer click con el ratón en las acciones y demás sólo si el navegador soporta JavaScript aunque no tenga imágenes).
Todo esto sería imposible en un juego hecho en Flash o en Java.

El juego lo cree a medida que iba creando su motor y así poder probarlo. El motor está preparado para ser utilizado para crear otras aventuras de forma bastante sencilla, siempre que se conozcan los lenguajes PHP y JavaScript. Así pues, es posible utilizar el motor del juego para crear otras aventuras mejores: mejores gráficos, más largas, mejores puzzles, mejor historia, etc... lo que uno quiera ;)

Tanto el motor como su juego es de código libre y es posible utilizarlos (publicarlos y/o modificarlos) siempre que se conserve el nombre de autor original del juego y del motor. Por lo tanto, si creais una aventura con este motor deberéis conserar mi nombre como autor del motor. Todo lo demás podeis cambiarlo a vuestro antojo.

El juego en si es bastante "cutre". Los gráficos los dibujé a mano en una libreta y luego los escanee, recortándolos posteriormente con un editor gráfico. Se trata, por lo tanto, de un juego en clave de humor (en el cual me parodio a mi mismo y a mi "arte" dibujando).

Podéis jugar al juego en línea en http://www.granvino.com/jam/stuff/juegos/yq/

Para descargar el juego y su motor con licencia MPL 1.1, incluyendo el código, es posible hacerlo en http://yquest.sourceforge.net

Podéis ver las innovaciones del juego en: http://www.gameinnovation.org/index.php/Yasmina

Para más información sobre el juego y su motor, podéis visitar el siguiente hilo en el foro del CAAD: http://www.caad.es/foro/viewtopic.php?t=1304