En este post te mostraré un juego que he programado recientemente. Se trata de El ahorcado o hangman, en su versión web programado con JavaScript; totalmente gratuito y open source.

El juego está escrito con el lenguaje JavaScript, usando Vue.js y Bootstrap. Cuenta con:

• Gestión de palabras. Puedes agregar y eliminar palabras para jugar al ahorcado
• Elección de palabra aleatoria: cada vez que juegas se selecciona una palabra aleatoria del banco de palabras que el usuario ha registrado
• Botones con letras para adivinar la palabra, mismos que se deshabilitan una vez que se ha intentado esa letra
• Imagen del ahorcado, misma que cambia con el número de intentos
• Juego totalmente responsivo (adaptable a teléfonos, tabletas, etcétera)

A continuación te mostraré cómo está hecho, en dónde puedes descargarlo, etcétera. Pues es un juego open source y gratuito que puedes modificar sin problemas.

Estilos

El único estilo importante es el que se aplica a la palabra que el jugador está adivinando. La misma tiene un letter-spacing de 4px. Lo demás es para el footer y la barra de navegación, además de la fuente:

See the gist on github.

Funciones comunes

Para gestionar las palabras tenemos algunas funciones globales que serán importadas ya sea en el momento de jugar o al momento de gestionar las palabras. Dentro del código también encontramos el que hace funcionar al botón del menú:

See the gist on github.

Si te fijas, la gestión de palabras es muy fácil. Solo usamos Local storage de JavaScript para guardar o regresar un arreglo codificado como JSON.

Ahora veamos cómo es que se desarrolla el juego.

Imagen dependiendo del intento

En el juego se muestra una imagen del ahorcado dependiendo del intento. Al final de todo, son imágenes estáticas (bien se podría hacer con canvas pero sería algo más complejo) que tienen los nombres de Ahorcado-X.png en donde X es la fase del ahorcado.

Lo que hace que se vayan cambiando es el método imagePath que hace la resta de los máximos intentos menos los intentos restantes y a partir de ello devuelve la cadena de la imagen:

See the gist on github.

Si te fijas, usamos las plantillas de cadena. Después, en el HTML, simplemente usamos a Vue para que recargue la imagen cada que sea necesario, es decir, cada que el valor cambie:

See the gist on github.

Por cierto, en el repositorio he dejado la imagen PSD (se edita con Photoshop) modificable en caso de que quieras agregar otros detalles. Sé que se pueden usar otros editores, pero solo ese tenía a la mano.

También quiero decirte que puedes modificar las imágenes o remplazarlas por otras, para darle otro estilo al juego. Solo asegúrate de colocar el nombre de manera correcta.

Generación de teclado

Las teclas son botones dibujados con Vue.js a través de un diccionario. Al inicio de todo, tenemos las letras que se usarán:

See the gist on github.

A partir de las mismas generamos un diccionario en donde la clave es la letra y el valor es un objeto que tiene la letra, y si la misma debe ser deshabilitada.

See the gist on github.

Al inicio, disabled está en false pues ninguna tecla está deshabilitada (se va a deshabilitar cuando el usuario haga clic sobre ella). Y finalmente lo dibujamos con Vue en el DOM:

See the gist on github.

Al hacer clic en el botón se invoca al método attemptWithLetter, mismo que recibe la letra. Esto hace que el usuario intente adivinar la palabra con esa letra. Antes de ver cómo funciona eso, veamos cómo se prepara y elige la palabra.

Nota: tú puedes modificar la cadena ALPHABET para agregar o quitar letras disponibles al usuario. El programa se encarga de generar el teclado.

Elegir palabra para el ahorcado, y ocultarla

Lo primero que se hace es obtener todas las palabras y elegir una al azar:

See the gist on github.

Por cierto, en caso de que no haya palabras, se le indica al usuario que agregue algunas. En caso contrario (línea 9) se elige una palabra aleatoria para jugar a hangman en JS y luego se invoca a prepareWord.

La función convierte la palabra a mayúsculas, y luego declara un arreglo que tendrá la palabra oculta. El arreglo tendrá objetos, mismos que tendrán la letra y la propiedad hidden en true.

See the gist on github.

Esta propiedad hidden va a ser cambiada cuando el jugador acierte la letra.

Intentar adivinar palabra

Cuando el jugador presiona o hace clic en el botón, se invoca al método attemptWithLetter:

See the gist on github.

Lo primero que hacemos es deshabilitar la tecla. Después verificamos si la letra no existe en la palabra usando una búsqueda secuencial:

See the gist on github.

Si no existe, entonces restamos un intento. Pero si la letra es correcta, invocamos a discoverLetter que va a recorrer la palabra oculta y va a desocultar cada letra que coincida con la que acaba de intentar el usuario:

See the gist on github.

De cualquier modo, al final se verifica el estado del juego para saber si el jugador pierde o gana.

Saber si jugador pierde o gana ahorcado

See the gist on github.

Si el jugador gana o pierde, se reinicia el juego, cosa que veremos más adelante. Por ahora veamos cómo saber si gana.

El jugador gana si todas las letras de la palabra ya no están ocultas. Y el jugador pierde si los intentos son menores o iguales a cero. De cualquier modo se le indica al jugador si ha perdido o ganado, además de mostrarle la palabra original.

Reiniciar juego

Lo que se hace al reiniciar el juego es reiniciar los intentos, configurar el teclado (para habilitar las teclas nuevamente) y elegir una palabra aleatoria:

See the gist on github.

Otras funciones importantes del juego

Hace falta mencionar algunas otras funciones. Por ejemplo, la que muestra la palabra enmascarada para el jugador:

See the gist on github.

O la que muestra la palabra original sin importar si el jugador adivina o no:

See the gist on github.

Gestión de palabras

Las palabras se guardan en localstorage como lo dije anteriormente. Esto no es tan complejo, solo tenemos la vista que dibuja las palabras en una tabla usando v-for, y que muestra un formulario para agregar alguna palabra:

See the gist on github.

El funcionamiento igualmente es con Vue, muy simple y usando las funciones globales vistas previamente:

See the gist on github.

Lo único a destacar aquí es que se evita que haya palabras duplicadas, y que no se permiten espacios en blanco en las palabras.

Demostración

Como la mayoría de mis programas, este software es open source. Puedes probar la demostración en este enlace (recuerda agregar palabras).

Esto puede ser montado en un servidor o en localhost. Lo he probado con XAMPP (es decir, Apache).

Vídeo en YouTube

Si quieres puedes ver la explicación del vídeo así como la demostración de uso en el siguiente vídeo:

Código completo

El código fuente lo encuentras en mi GitHub.

Te invito a ver más sobre videojuegos y JavaScript. También puedes ver otro software que he creado.