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 ahorcado en JavaScript – Programación de juego

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:

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ú:

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.

Relacionado:  Reproducir sonidos con JavaScript

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:

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:

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:

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.

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:

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.

Relacionado:  Obtener Activity desde Fragment en Kotlin

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:

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.

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:

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

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:

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

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:

Otras funciones importantes del juego

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

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

Gestión de palabras

Gestionar banco de palabras para ahorcado con JavaScript y Local storage

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:

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

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

Relacionado:  Enviar formulario con AJAX y PHP

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: https://github.com/parzibyte/hangman-javascript

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


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 750 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: