Slow Roads

Conducir no es una de las actividades humanas que escogería como de mis preferidas. Mucho menos si eso implica interactuar con mis congéneres en calles estrechas, rotondas infernales o avenidas atestadas. Eso se traslada a mis gustos videojugables, estando los de carreras entre aquellos títulos que no tocaría ni con un palo, acompañando a FIFA y derivados.

Sin embargo, he de reconocer que conducir por parajes naturales de vegetación exuberante sin rastro de otro vehículo por muchos kilómetros que recorras, es ciertamente relajante. En el competitivo mundo de los videojuegos, parecía  no haber espacio para experiencias así de relajantes, al menos hasta que se pusieron de moda los "Walk simulators" y su enfoque más calmado.

Slow Roads se ajusta a este concepto, permitiéndonos conducir un sencillo coche poligonal, una moto o un autobús, por distintos parajes en 3D que se generarán aleatoriamente y cuya complejidad podremos elegir. No hay más, simplemente "conducir". Su manejo por tanto es muy sencillo, las clásicas "WASD" nos permiten movernos, la tecla Shift Izquierda hará que accionemos un ligero turbo, con la H encenderemos las luces... porque con las teclas E y Q podremos modificar el momento del día y la meteorología de nuestro viaje, aunque se recomienda usar el menú de la parte inferior izquierda. 

En definitiva, una gozada que hará las delicias de los que necesiten unos momentos de relax y sosiego. Si no queremos molestarnos ni siquiera en  dirigir el vehículo, tendremos una opción de autoconducción. Así te podrás hacer la ilusión de que tienes un Tesla.

Puedes jugar en la siguiente dirección: https://slowroads.io

Efecto de scanlines de TV en archivos HTML

Si queremos dar un toque añejo a nuestros juegos o web realizada en HTML, podremos hacerlo de una forma muy sencilla. En la hoja de estilo, o dentro de la etiqueta Style de HTML, deberemos añadir el siguiente código CSS:

/* CRT */ 

@keyframes flicker{0%{opacity:0.27861;}5%{opacity:0.34769;}10%{opacity: 0.23604;}15%{opacity:0.90626;}20%{opacity:0.18128;}25%{opacity:0.83891;}30%{opacity:0.65583;}35%{opacity:0.67807;}40%{opacity:0.26559;}45%{opacity:0.84693;}50%{opacity:0.96019;}55%{opacity:0.08594;}60%{opacity:0.20313;}65%{opacity:0.71988;}70%{opacity:0.53455;}75%{opacity:0.37288;}80%{opacity:0.71428;}85%{opacity:0.70419;}90%{opacity:0.7003;}95%{opacity:0.36108;}100%{opacity:0.24387;}} @keyframes textShadow{0%{text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;}5%{text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;}10%{text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;}15%{text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;}20%{text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;}25%{text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;}30%{text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;}35%{text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;}40%{text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;}45%{text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;}50%{text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;}55%{text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;}60%{text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;}65%{text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;}70%{text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;}75%{text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;}80%{text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;}85%{text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;}90%{text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;}95%{text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;}100%{text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;}} .crt::after{content:" ";display:block;position:absolute;top:0;left:0;bottom:0;right:0;background:rgba(18, 16, 16, 0.1);opacity:0;z-index:2;pointer-events:none;animation:flicker 0.15s infinite;} .crt::before{content:" ";display:block;position:absolute;top:0;left:0;bottom:0;right:0;background:linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));z-index:2;background-size:100% 2px, 3px 100%;pointer-events:none;} .crt{animation:textShadow 1.6s infinite;}

En el archivo HTML, dentro de la etiqueta body o de un div que englobe la estructura del juego, habrá que llamar a la clase de la siguiente forma:

<div class="crt"> o <body class="crt">

Según la etiqueta que usemos.

Para aprovecharlo en nuestros juegos realizados con Twine 2,  tendremos que añadir el código CSS al estilo de nuestro juego, y dentro de todos los pasajes, incluir el texto dentro de la siguiente estructura:

<div class="crt"> Texto del pasaje </div> 

 

Ztype

Hablábamos en anteriores artículos de juegos para mejorar la mecanografía y en esta ocasión tenemos uno bastante más arcade que Your Father. Se trata de Ztype, del estudio alemán Phoboslab, un shoot´m´ up clásico en cuanto a su apariencia que destapa su originalidad en cuanto a su manejo pues no podremos movernos, solamente disparar unos proyectiles que surgirán de nuestra nave al escribir las palabras que describen a cada enemigo. 

La mecánica de juego es sencilla: a través de distintas oleadas de enemigos que deberemos ir superando aumentando de dificultad en cada una de ellas, deberemos acabar con las naves enemigas que aparecerán en la parte superior de la pantalla dirigiéndose hacia nosotros. Deberemos acabar con ellas escribir las palabras o letras, según el enemigo, que las describen. Si algún enemigo choca contra nosotros, perderemos irremediablemente. Si pulsamos ENTER, activaremos uno de los tres EMP de los que disponemos, acabando con todos los enemigos en pantalla.

Entre sus opciones se encuentra la de incluir nuestro propio texto personalizado. Podremos compartir además nuestras puntuaciones en Facebook y Twitter. El texto por defecto es en inglés.

Enlace: Ztype

Your Father!

Estudiar mecanografía es uno de esos actos arcaicos provenientes de un pasado no tan lejano, como pulsar botones para hacer una llamada o sacarse un moco con el dedo; sin embargo, en algunos módulos de Formación Profesional se pide un buen nivel de escritura con el teclado, una habilidad que tampoco está de más dominar para no pasar el bochorno de teclear con los dos dedos índices al escribir la dirección de una página web delante de tus suegros.

Existen infinidad de juegos para mejorar nuestra velocidad al teclado, siendo el más famoso el matazombis ilustrado: Typing of the Dead de SEGA. Por ello, cuando vi en la web de Coding Nepal una aplicación destinada a ello, decidí modificarla para hacerla algo más interesante y de paso practicar mis conocimientos de HTML y CSS. Aparte de modificaciones en la apariencia de la aplicación, lo único que hice fue sustituir el aburrido texto que teníamos que teclear por insultos tanto en español como en inglés. En un primer momento iban a ser solo en la lengua de Cervantes, pero quería atraer al público anglosajón así que me vi en la necesidad de incluir ofensas en dicho idioma, teniendo en cuenta que para los términos castellanos, no podía incluir ni acentos ni aquellos que incluyeran la letra "ñ" ya que los hijos de la Gran Bretaña no poseen esos caracteres en sus teclados, lo cual limitó un poco el listado de injurias y blasfemias.

La mecánica es sencilla: empiezas a escribir el texto que aparece en el recuadro, respetando espacios y mayúsculas y el objetivo es no cometer errores y hacerlo en el menor tiempo posible. Para cambiar de texto, pulsa el botón "Try Again". Sencillo como sacarse un moco. 

Your Father! es el segundo título de la "trilogía del insulto" que comenzó con Your Mother y terminará con "You, Son of a bitch!", teniendo un gran éxito entre la comunidad de Itch.io, al menos todo el éxito que puedo tener yo. En cualquier caso, ha multiplicado por 100 mis métricas habituales, lo cual me lleva a plantear la estrategia futura de mis lanzamientos.

Puedes encontrar Your Father en su correspondiente página en Itch.io desde donde puedes jugarlo.

Night Jumping

En la anterior entrada hablé de Pocket Platformer, un "engine" de creación de juegos de plataformas que seguía la filosofía de Bitsy a la hora de diseñar los juegos, basándose en una sencillez insultante. Para probarla, y queriendo cambiar un poco de las experiencias narrativas que venía creando hasta ahora, pensé que sería buena idea hacer un pequeño juego que me permitiera probar las distintas mecánicas que se pueden implementar.

No tengo mucho tiempo para casi nada que no me reporte dinero, así que tuve que rascar un par de horas de la semana para diseñar los 20 niveles del juego. Creo que han quedado representados todos los obstáculos que se pueden incluir en los juegos: misiles perseguidores, portales de teletransportación al estilo Portal, Balas de cañón, suelo que desaparece si estás mucho tiempo sobre él, los perennes pinchos, etc.

Hice alguna que otra modificación a varios gráficos, añadiendo animación a la hierba o creando nuevos tiles, así como añadí algún NPC que aportara una pizca de, llamémosle, humor, al conjunto. La historia es casi inexistente. Eres Jimmy, un niño cualquiera en medio del bosque durante una noche clara, y tienes que avanzar por las pantallas hasta alcanzar la bandera verde intentando recoger todas las monedas. Todo esto en el menor tiempo posible. De ahí el sencillo título: Night Jumping.

En líneas generales se trata de un juego muy fácil de superar con algunos puntos que pondrá en aprietos a los jugadores las primeras veces que se juegue, pero creo que para ser mi primera, y apresurada, experiencia en el mundo de los plataformas, no me ha quedado del todo mal. El juego está en inglés pero no es nada rebuscado así que a poco que prestaras atención en clase se entiende perfectamente. Hay que destacar que este juego, subido a Itch.io como no podía ser menos, está teniendo muchas visitas. Imagino que aparte del género, incluya también el factor idiomático. Es algo a tener en cuenta para futuros desarrollos en los que, tristemente, priorizaré la lengua británica sobre el español.

Pocket Platformer

Hoy día, quien no crea un juego es porque no quiere (o no tiene tiempo, vale) pero la falta de conocimientos hace tiempo que dejó de ser una excusa. Con la aparición de "engines" como Game Maker o Multimedia Fusion que se basaban en el "no-code", hacer un juego nos alejaba de aprender complejos lenguajes de programación, pudiendo desarrollar un matamarcianos simplemente añadiendo objetos a la escena y dándole propiedades a los mismos. Obviamente, no tendremos el control sobre el producto que tendríamos de haber desarrollado el juego desde cero, pero para la mayoría de los mortales con un deseo por hacer un juego, es suficiente.

Hay multitud de programas en el mercado que nos facilitan la creación de juegos y este no es un post para hablar de ellos, pero incluso los grandes como Unreal Engine o Unity tienen integrado o algún plugin de "Visual Script" con el que no tener que programar. Uno de los últimos programas con los que me  he encontrado para hacer juegos es Pocket Platformer, desarrollado por @the_l0bster e inspirado en Mario Maker, Bitsy y la "consola de fantasía" Pico-8. Como su propio nombre indica, está enfocado en los juegos de plataformas y es quizá el más sencillo de usar que me he encontrado hasta el momento. Se ejecuta desde su página en Itch.io así que no tendremos que instalar nada. Viene con una serie de gráficos predeterminados con sus características asociadas aunque podremos crear los nuestros propios. Según el tipo de gráfico que modifiquemos, tendremos un NPC, objetos de decoración, tiles de escenario, etc. En la ventana podremos ir colocando los objetos con el botón izquierdo del ratón y borrarlos con el derecho. La interface la completan una columna con las opciones del juego que podremos cambiar, como el nombre, el mensaje cuando acabe el juego, si el jugador tendrá doble salto o no, y la ventana de los niveles, que podremos ir editando de forma sencilla. Podremos exportar con solo un clic el juego a un archivo HTML, será la forma de guardarlo si cerramos el navegador sin haberlo terminado pues al importarlo, podremos seguir editándolo.

Entre las pegas que se le pueden poner está el mencionado de la escasez de opciones de modificación. Podremos elegir el color del fondo, pero será el mismo para todos los niveles, no podremos poner una imagen de fondo, tampoco añadir música a menos que lo hagamos con un enlace web a una canción que tengamos subida en alguna parte. No se puede modificar la pantalla de Título, la de derrota / victoria es la misma y podría seguir un buen rato, pero pese a todo, merece la pena pasar una tarde desarrollando un pequeño plataformas con el que poner en práctica niveles para implementar en otros proyectos más grandes o simplemente darnos la satisfacción de haber creado un juego. 

Prosinecki Life Simulator

Prosinecki Life Simulator surgió como una manera como cualquier otra de seguir avanzando en mi dominio de Twine 2. Este es un proyecto más ambicioso que el anterior, Roll the dice, en el que he trabajado con variables anidadas y profusión de elementos aleatorios para que tenga un aliciente el rejugarlo.

El objetivo de esta historia interactiva, en el que encarnamos el papel del jugador croata Robert Prosinecki, es tener el menor número de lesiones posibles, lo cual vendrá indicado por las decisiones que tomemos durante su desarrollo. Se trata de un juego cortito sin muchas pretensiones más que practicar con Harlowe, mi formato de historia preferido.

Tras el prólogo, el juego se divide en jornadas, 11 en total. Ni siquiera están todos los equipos de la liga 91-92, pero no quería que se hiciera excesivamente repetitivo. Cada jornada, a su vez, consta de dos partes, el previo al partido, en el que está la interacción en sí, y los partidos, donde veremos diversos mensajes que "narrarán"el acontecer de los mismos. Tras el derby con el Barça, el juego acabará y podremos ver qué lesiones hemos sufrido y si nuestro equipo ha ganado la liga.

En el aspecto técnico, no he encontrado muchos problemas. Si acaso el mayor quebradero de cabeza, si es que se le puede llamar así, fue ajustar las imágenes para que en dispositivos móviles se vieran por completo. Esto lo conseguí con el código: 

img{

max-width: 100%

}

Se puede hacer mejor y de forma más completa pero me sirvió para salir del paso y, total, este juego tiene un recorrido cercano a cero así que no me molesté en buscar soluciones más elegantes. 

Para el aspecto de 8 bits de las imágenes, usé la app para móviles: 8 bit photo lab, la cual tiene distintos filtros gratuitos, tan completos, que hace innecesaria la compra de la versión de pago para desbloquear los demás, si no buscas un look de 8 bits en concreto. Usé filtros a discreción sin tener una línea fija: desde Apple II hasta EGA, pues a según qué foto le sentaba mejor una u otra. Las imágenes, de más está decir, las saqué de Google.

Cabía la posibilidad de incluir música o efectos de sonido como los gritos de un grupo de aficionados durante los partidos, pero lo desestimé pues podría hacerse muy pesado. El código para ello era el siguiente:

<script>

var audio= document.createElement('audio');

audio.src=

'animando.mp3';  //animando.mp3 será el audio que queramos. 

audio.loop = true;       

audio.play();

</script>

Teniendo en cuenta que teníamos que pegarlo en el pasaje donde quisiéramos que se reprodujera y que el archivo mp3 debería estar en el mismo directorio que el archivo HTML del juego.

Otra de las nuevas características implementadas en este juego, es la aparición automática, con un efecto de máquina de escribir, de un texto determinado, teniendo en cuenta que después de 6 segundos saltaríamos a otro pasaje, lo cual se conseguía escribiendo lo siguiente en el pasaje en cuestión:

(set: $timer to 6)    //tiempo que queramos que dure la animación. 

<!-- Asigna el texto que se mostrará -->

(set: $typewriterText to "Texto que queramos!")

<!-- Muestra (call) el pasaje Typewriter  -->

(display: "Typewriter")

{

    (live: 1s)[

        (if: $timer is 0)[

            (stop:)

            (goto: "Comienzo")

        ]

        (else: )[

            (set: $timer to it - 1)

        ]

    ]

}

Para que funcione, tendremos que haber creado un pasaje con el nombre Typewriter y el siguiente código:

{

    <!-- Crea una variable para rastrear la posición dentro de la cadena $typewriter -->

    (set: $typewriterPos to 1)

    <!-- Crea un gancho para mantener el texto escrito -->

    |typewriterOutput>[]

    <!-- Asigna un retraso de 20ms por bucle -->

    (live: 20ms)[

        <!-- Añade el siguiente caracter al gancho -->

        (append: ?typewriterOutput)[(print: $typewriterText's $typewriterPos)]

        <!-- Actualiza la posición -->

        (set: $typewriterPos to it + 1)

        <!-- Si ha llegado al final, para -->

        (if: $typewriterPos is $typewriterText's length + 1)[

            (stop:)

        ]

    ]

}

Para los escudos de los equipos contra los que se enfrenta el Real Madrid, busqué por Internet, aunque no estoy seguro de que todos correspondan a los de la temporada 91-92 en la que se desarrolla el juego. El tamaño de las imágenes era de 53x53.

Pantalla de inicio alternativa

Y poco más que contar en el aspecto del desarrollo. Los elementos aleatorios los incluí con la instrucción: 

(either: "Chendo", "Sanchis", "Buitre")

mediante la cual se elige uno de los tres nombres en cada ejecución de la instrucción.

Para grabar el pequeño gameplay que puedes ver más abajo, usé OBS, grabando la ventana del navegador a pantalla completa. Para cortar determinadas partes tuve que usar Avidemux, toda vez que VirtualDub, el programa que usaba en mi época de tester, no acepta el formato MP4.

El próximo proyecto, antes de dar el salto al desarrollo de un juego arcade, será terminar Misterio en la luna, una aventura conversacional, pero mientras tanto podéis disfrutar de Prosinecki Life Simulator en la siguiente dirección

Créditos

Imagen de Pexels en Pixabay 

Imagen de Free-Photos en Pixabay 

Imagen de annca en Pixabay 

Imagen de Annalise Batista en Pixabay

1024 Torozos Edition

En mis viajes por las planicies académicas, me topé cierto día con una implementación del juego 2048 realizada en HTML, CSS y JS por Gabriel Cirulli. Curioso por naturaleza, me puse a trastear con él y fruto de esa experiencia surge este 1024 Torozos Edition.

Para quien no lo sepa, 2048 consiste en una matriz de 4x4 tiles en la que irán apareciendo potencias de 2: 2, 4, 8, 16... hasta 2048. El objetivo es unir los tiles del mismo número para formar la suma de ellos. Así, si unimos un tile de 2 con otro de 2, obtendremos uno de 4, eliminando un espacio de la cuadrícula en el proceso. 

Tras jugar un poco me pregunté si se podrían sustituir los números por algo más visual, como un dibujo o una foto. Y, efectivamente, se podía. Decidí usar instantáneas de distintos parajes de la provincia de Valladolid, que he ido tomando a lo largo de los años.

Lo primero que hice y lo más sencillo fue traducir el texto del juego, modificándolo del archivo index.html, aunque para los términos relativos a la puntuación tuve que cambiar algo del archivo JS. Para lo demás no encontré tampoco ninguna dificultad, pero sí que hubo algún que otro escollo. Por ejemplo, aunque implementé las fotos en los tiles sin problemas, usando un background en el CSS correspondiente, los número seguían apareciendo sobreimpresos encima de estas. Tuve que reducir a 0 el tamaño de los mismos en el estilo correspondiente.

Cuando me las prometía muy felices, tras haber subido el juego a Itch.io para que pudiera estar disponible para todo el mundo sin necesidad de descargar o tener que usar un servidor web propio, me dio por jugarlo en móvil. Las fotos no se veían enteras, solo una parte. Tuve que añadir un segundo juego de tiles en caso de que la resolución tuviera menos de 520 píxeles de alto y tuve que añadir el código correspondiente para que se usaran los tiles reducidos en ese caso. No me llevó demasiado en cualquier caso.

Modificando este juego buscaba mejorar mis conocimientos de desarrollo web y del uso del inspector de Firefox. No tenía ninguna otra pretensión. Podéis probarlo a continuación.

Roll the dice

Quizá el de los dados sea uno de los juegos más sencillos de la historia. Aun con sus muchas variantes, consiste básicamente en lanzar un dado y sacar un número mayor que el de tu contrincante. Es por eso que decidí que en mi periplo por el aprendizaje de Twine, implementaría un sencillo juego de dados en el que el jugador tendría que enfrentarse a distintos oponentes, en su lucha por representar a la raza humana en un posterior Torneo Intergaláctico en el que la Tierra se jugaba su existencia. Una historia simplona como la de cualquier otro Tomb Raider. 

Antes de pensar siquiera en cómo iba a hacerlo, y repasando mi libro sobre Twine (Twine. Una aproximación al desarrollo de literatura interactiva) me llamó la atención la plantilla "La historia interactiva de la Tierra", que divide la pantalla en dos recuadros, en uno de los cuales, se pueden ir cambiando las imágenes a mostrar. Esto me venía de perlas a la hora de mostrar la cara de los distintos contrincantes, por lo que al elegirla, me tuve que ceñir al Formato de historia Sugarcane. Sí que podría haberla adaptado a Sugarcube, por ejemplo, pero no quería perder tiempo en otra cosa que no fuera desarrollar el minijuego (me da vergüenza llamar a esto "juego").

Decidí usar Twine 1.4 en lugar de su versión avanzada, porque iba a utilizar muchas imágenes, y me era más sencillo importarlas al programa que subirlas a una web y luego enlazarlas.

Dio la casualidad de que al poco de ponerme manos a la obra, descubrí la existencia de la web https://thispersondoesnotexist.com/ en la que una inteligencia artificial crea imágenes de rostros humanos de personas que no han pisado jamás la Tierra. O eso se supone. Imágenes perfectas para librarme de denuncias por usar la cara de cualquier fulano sin permiso.  Por aquello de evitar el valle inquietante, usé el programa PixaTool para modificarlas y convertirlas a la paleta verdiblanca de GameBoy, lo cual le confería un aspecto más "jugable". Hice lo mismo para el resto de imágenes que usaría.

Una de ellas la usaría en la pantalla de inicio. Decidí crear una para poner el logo del juego y en la caja de texto, un simple enlace que instara al jugador a hacer click para empezar. Para ello, definí el pasaje Start de la siguiente forma, siendo representados el nombre de un pasaje por los símbolos ::

:: Start
Label Textura

<center>[[Pulsa para comenzar|INICIO]]</center>

Siendo "Textura" un pasaje CSS con el siguiente contenido:

.passage .header {
  background-image: [img[texture838]];  //Texture838 es el nombre de la imagen que importé
  width:70%;
  height:320px;
  min-height: 320px;
}

De tal forma, se creaba un nuevo pasaje "inicio" en el que comenzar la aventura. Tras escribir una historia más o menos funcional para salir del paso, surgieron varios desafíos:

. La idea original consistía en tener un plantel de 9 personajes contra los que jugar, de los que solo veríamos 3 en cada partida, para hacerlas algo más aleatorias y rejugables.

. Tenía que hallar la forma de simular las tiradas sin tener que estar escribiendo código para cada rival y tirada. Sugarcube me hubiera venido bien pero, como dije, por el tema de la plantilla CSS no era una opción.

Para lo primero haríamos uso de la función "either", de tal forma que a la variable $con  (de contrincante) le asignaríamos cualquier valor de entre la lista que definamos; en este caso, los nombres de los pasajes correspondientes a cada jugador. 

<<set $con to either("jugManolo", "jugAde", "jugsuckie", "jugSonrisas", "jugPablito", "jugTuercas", "jugPurito", "jugsvetlana", "jugramiro")>>

. Ir a [[Prueba|$con]]

Así, cuando pulsemos en el texto "Prueba", nos llevará a un pasaje aleatorio de entre la lista lista de "either".

Desde el pasaje de cada enemigo se llamará al pasaje responsable de las tiradas de dados, que se reutilizará con todos los demás. El pasaje encargado de las tiradas quedaría de la siguiente forma:

<<set $tirada = random(1,6)>>  //se simula la tirada eligiendo un número aleatorio entre 1 y 6
Has sacado un <<print $tirada>> //Se muestra en pantalla el resultado

<<set $tiradamalo = random(1,6)>>  //lo mismo para el oponente
Tu contrincante ha sacado un <<print $tiradamalo>>

//aquí se comprueba quién ha sacado una mayor puntuación y se actualizan las variables de los asaltos pues el que gane 2 de 3 ganará la partida.
<<if $tirada > $tiradamalo>>
¡Has ganado el asalto!
<<set $puntos+=1>>
<<if $puntos == 2>>
<<set $contrincante +=1>>
¡Has ganado, maldito suertudo! Ahora vuelve a la [[arena]]
<<else>>
[[Es hora de tirar de nuevo|tiradatu]]
<<endif>>
<<endif>>

<<if $tirada < $tiradamalo>>
¡Has perdido el asalto!
<<set $puntosmalo+=1>> //se actualizan los puntos del rival
<<if $puntosmalo == 2>> //se comprueba si hemos perdido el juego
¡Has perdido, desgraciado! No mereces seguir viviendo pero qué demonios, tampoco vamos a manchar esto de sangre. Firma [[aquí|gameover]] para terminar.
<<else>>
[[Es hora de tirar de nuevo|tiradatu]] //si aun no se ha conseguido los puntos necesarios para ganar, se sigue tirando.
<<endif>>
<<endif>>

<<if $tirada == $tiradamalo>>
¡Habéis empatado!
[[Tendréis que tirar de nuevo|tiradatu]]
<<endif>>

El resto es sencillo y no se trata más que de escribir la pantalla de Game Over y de victoria en el juego. Un apunte más, para cambiar las imágenes de cada rival, importaremos sus fotos, crearemos una hoja de estilo para cada una de la siguiente forma:

::susan
tag stylesheet suckiesusan

.passage .header {
  background-image: [img[suckiesusan]];
}

y en el pasaje en que queramos que aparezca dicha imagen, en el campo "tag" tendremos que poner el nombre de la hoja de estilo, en este caso "suckiesusan", que aparece junto a stylesheet, en el campo "tag".

Habría muchas mejoras por hacer, comenzando por la posibilidad de eliminar de la lista los rivales contra los que nos hemos enfrentado, pero en este nivel de aprendizaje, prefería centrarme en terminar el juego y seguir con otra cosa.

Puedes jugar a Roll the dice en la siguiente dirección:

 

Color Valley

Siempre viene bien tener un juego en el móvil o el PC con el que matar esos minutos de tiempo ocioso en lo que tenemos a nuestra disposición tanta oferta lúdica que no sabemos qué escoger. Uno de esos juegos bien podría ser este "Color Valley", creado en HTML5 por no sé muy bien quién, pues se puede encontrar en multitud de webs recopilatorias de minijuegos, aunque yo he encontrado sus dos entregas en Caygames.com. Puede que sea de ellos, puede que no. Es curioso el tema de la autoría pues según en qué web encuentres el juego, puede tener un logo o otro. Imagino que el código debe de estar en alguna parte y simplemente se limitan a copiarlo y distribuirlo bajo su nombre. Por cierto, que también se puede encontrar bajo el nombre de Color Switch... el mundo de los minijuegos de móvil es oscuro y misterioso.

El objetivo es coger tantas estrellas como podamos mientras vamos subiendo por la pantalla a una pequeña pelota a golpe de ratón o pulsación de la pantalla, que irá cambiando de color según vayamos cogiendo unas pequeñas dianas coloridas. Este color determinará si podremos atravesar los obstáculos que nos encontremos, siempre que sean del mismo color que nuestra pelota, o si seremos destruidos en mil pedazos en caso contrario. Una mecánica sencilla pero altamente adictiva que nos mantendrá pegados a la pantalla un buen rato.

Puedes jugarlo en la siguiente dirección: http://caygames.com/

Puzzle Script

P.S.. es un engine de creación de juegos basados en puzles que se pueden desarrollar en HTML5. En realidad está más enfocado a los juegos estilo "Sokoban" de mover cajas para colocarlas en determinados sitios, aunque como todo, se puede exprimir para crear otro tipo de puzles. Podremos acceder a él desde la página web: http://www.puzzlescript.net Una vez allí, podremos disfrutar de varios títulos realizados con la herramienta, un sencillo tutorial con el que hacer nuestros primeros pinitos, aparte de una extensa documentación si queremos profundizar en la materia y el programa en sí.

Este es muy sencillo de usar. Cuando pulsemos en el enlace, se nos abrirá una ventana dividida en dos de forma vertical. A la izquierda podremos encontrar el código fuente a editar, la ventana derecha está a su vez dividida en dos: arriba con una muestra de nuestro juego y debajo de esta, distintas herramientas y la consola de información, donde podremos ver los distintos mensajes de error, confirmación, etc, a medida que se vaya ejecutando nuestro código.

En la parte superior, nos encontramos con un menú desde el cual cargar distintos ejemplos, así como las opciones de compilar, ejecutar nuestro juego, compartirlo con la comunidad, acceso a la documentación y los foros. Como comentaba, podremos compartir el juego, en cuyo caso el engine creará un enlace en sus servidores desde el cual acceder al mismo y además podremos descargar un archivo HTML por si queremos subirlo a cualquier otro sitio.

Una característica muy curiosa es que podremos escoger la paleta de nuestro juego, para simular sistemas como GameBoy, C64, Amiga500, Master System, etc. De esta forma podremos crear la ilusión de encontrarnos ante un juego desarrollado para estas máquinas.

Los juegos que podremos encontrar tienen un enlace llamado "Hack" que si lo pulsamos, nos llevará al editor de Puzzlescript, de forma que podremos ver su código y así saber cómo han hecho determinada acción, algo muy útil para aprender rápidamente.

Podéis encontrar una traducción de su documentación, realizada por mí, en las siguientes direcciones:

• Básica
• Intermedia
• Avanzada

Como curiosidad, existe otra versión llamada DungeonScript, en el que podremos crear juegos de puzzle que se jueguen en primera persona. Puedes probarlo en la siguiente dirección: http://dungeonscript.farbs.org/editor.html

Agar.io

No soy muy dado al juego online con otros entes humanos pero no puedo dejar de hacer una excepción con Agar.io, un divertido arcade en el que controlaremos una célula que deberá ir creciendo de tamaño a medida que devore los puntos de colores que pueblan la pantalla y las células más pequeñas que se crucen en nuestro camino, controladas por otros jugadores.

Realizado en HTML5, se trata de un juego multijugador en el que competiremos contra gente de distintas partes del mundo por conseguir ser la célula más grande del vecindario. En la pantalla de bienvenida podremos escoger el servidor que mejor se adecúe a nuestra posición geográfica, uno de los dos modos de juego con los que cuenta: Todos contra todos y lucha por equipos, la posibilidad de introducir un nick para nuestra célula, ser meros espectadores de la escabechina que se esté llevando a cabo en ese momento, etc.

Un arcade, en definitiva, bastante entretenido en que poder disfrutar de la "compañía" de otros sin necesidad de escuchar a los niños rata escupir su frustración vital a través de un micro. Podéis jugarlo en la siguiente dirección: http://agar.io/

Existe además una versión para un solo jugador, desarrollada por Shea Barton, estudiante de la Universidad de Waterloo, que podréis encontrar aquí: http://sysach.com/circle-game/ La mecánica es similar. En una pantalla fija, nada de scroll, deberemos esquivar las bolas de mayor tamaño mientras que engullimos a las que sean más pequeñas que la bola que controlamos. Tendremos que esquivar más que huir, como es habitual en Agar.io. La acción es mucho más rápida y llegará el momento en que no podamos huir de nuestro aciago destino pues al ser una pantalla fija, una alcanzado un tamaño considerable será casi imposible esquivar las que nos superen en superficie. Aun así, totalmente recomendable.

Bombermine

Los fans de Bomberman, uno de los buques insignia de la defenestrada Hudson Soft, están de enhorabuena. Si ya era divertido intentar acabar con un puñado de enemigos imaginad jugar contra casi 1000 jugadores en un laberíntico escenario que podremos ir destruyendo como es habitual en los juegos de la saga, aunque se irán regenerando de tanto en cuando. Eso podremos hacer en Bombermine, un juego para navegador desarrollado en HTML 5 en el que podremos batirnos el cobre contra otros jugadores de todo el mundo.

Al romper bloques a veces conseguiremos items con los que mejorar a nuestro personaje, como la posibilidad de colocar más de una bomba, aumentar su radio de acción, mover bombas a patadas, ser más rápidos, etc y además en determinados momentos nos podremos convertir en un Pokemon durante unos instantes en los que no podremos colocar bombas. En otras ocasiones nos convertiremos en Kenny, personaje de South Park pudiendo "infectar" a otros jugadores que tornarán en nuestra condición no pudiendo atacar a los demás.

Dispondremos de distintos servidores en Europa, el Reino Unido, los USA y Japón aunque al final por cuestión de lag y demás siempre nos convendrá conectarnos a los servidores del viejo continente. Solo necesitaremos un nick y podremos jugar en partidas de 20 minutos con su correspondiente tabla de clasificaciones donde quedará registrado el número de victimas de nuestras bombas y las veces que muramos.

En definitiva, una divertida manera de pasar unos minutos de forma gratuita, que podréis encontrar en la siguiente dirección: http://bombermine.com