En este artículo, te mostraré paso a paso cómo crear el popular juego del ahorcado utilizando JavaScript. El juego del ahorcado es una divertida actividad en la que los jugadores deben adivinar una palabra oculta antes de que se complete el dibujo de un ahorcado. Es un excelente ejercicio para practicar tus habilidades de programación y aprender más sobre el lenguaje JavaScript.

Crear la estructura básica del juego

Lo primero que debemos hacer es crear la estructura básica del juego. Para ello, necesitamos un archivo HTML que contenga los elementos necesarios para mostrar la interfaz del juego y un archivo JavaScript donde escribiremos el código del juego.

.1. Archivo HTML

En el archivo HTML, debemos incluir un elemento para dibujar el ahorcado y una sección para mostrar la palabra oculta y las letras adivinadas. También necesitaremos un formulario para que el usuario pueda ingresar las letras.

                  
Juego del Ahorcado
        
    
    
            Adivinar    
  

.2. Archivo JavaScript

En el archivo JavaScript, debemos escribir el código que controlará el juego. Comenzaremos definiendo las variables que necesitaremos y creando las funciones necesarias para dibujar el ahorcado y actualizar la interfaz del juego.

const palabras = ["javascript", "programacion", "desarrollo", "web", "ordenador"];let palabraOculta = "";let letrasAdivinadas = [];let vidas = 6;function dibujarAhorcado() {  // Código para dibujar el ahorcado}function actualizarPalabra() {  // Código para actualizar la palabra oculta y mostrarla en la interfaz}function actualizarLetras() {  // Código para mostrar las letras adivinadas en la interfaz}function adivinarLetra(letra) {  // Código para verificar si la letra adivinada está en la palabra oculta}function manejarFormulario(event) {  // Código para manejar el envío del formulario}// Código para inicializar el juego

Inicializar el juego

Antes de comenzar a jugar, debemos inicializar el juego. Esto implica elegir una palabra aleatoria de la lista de palabras disponibles, inicializar las variables necesarias y llamar a las funciones de actualización de la interfaz para mostrar la palabra oculta y las letras adivinadas.

function inicializarJuego() {  palabraOculta = palabras[Math.floor(Math.random() * palabras.length)];  letrasAdivinadas = [];  vidas = 6;  actualizarPalabra();  actualizarLetras();}// Llamar a la función de inicialización del juegoinicializarJuego();

Dibujar el ahorcado

En esta sección, vamos a implementar la función dibujarAhorcado() que se encargará de dibujar el ahorcado en el elemento . Utilizaremos el contexto 2D del canvas para dibujar las diferentes partes del ahorcado.

function dibujarAhorcado() {  const canvas = document.getElementById("canvas");  const context = canvas.getContext("2d");    // Código para dibujar el ahorcado}

Actualizar la palabra oculta

La función actualizarPalabra() se encargará de actualizar la palabra oculta y mostrarla en la interfaz del juego. Recorreremos la palabra oculta y, por cada letra, verificaremos si la letra ha sido adivinada o no. Si la letra ha sido adivinada, la mostraremos; de lo contrario, mostraremos un guion bajo.

function actualizarPalabra() {  const palabraElement = document.getElementById("palabra");  let palabraMostrada = "";    for (let letra of palabraOculta) {    if (letrasAdivinadas.includes(letra)) {      palabraMostrada += letra;    } else {      palabraMostrada += "_";    }  }    palabraElement.textContent = palabraMostrada;}

Actualizar las letras adivinadas

La función actualizarLetras() se encargará de mostrar las letras adivinadas en la interfaz del juego. Recorreremos el array de letras adivinadas y las mostraremos separadas por espacios.

function actualizarLetras() {  const letrasElement = document.getElementById("letras");  letrasElement.textContent = letrasAdivinadas.join(" ");}

Adivinar una letra

La función adivinarLetra() se encargará de verificar si la letra adivinada por el jugador está en la palabra oculta. Si la letra está en la palabra, la agregaremos al array de letras adivinadas y actualizaremos la interfaz del juego. Si la letra no está en la palabra, restaremos una vida al jugador y, si llega a cero vidas, mostraremos un mensaje de derrota.

function adivinarLetra(letra) {  if (letrasAdivinadas.includes(letra)) {    // La letra ya ha sido adivinada    return;  }    letrasAdivinadas.push(letra);  actualizarLetras();    if (!palabraOculta.includes(letra)) {    vidas--;    dibujarAhorcado();        if (vidas === 0) {      // El jugador ha perdido    }  }}

Manejar el envío del formulario

La función manejarFormulario() se encargará de manejar el envío del formulario. Obtendremos el valor del campo de texto y llamaremos a la función adivinarLetra() pasándole la letra adivinada.

function manejarFormulario(event) {  event.preventDefault();    const letraInput = document.getElementById("letra");  const letraAdivinada = letraInput.value.toLowerCase();    adivinarLetra(letraAdivinada);    letraInput.value = "";}const formulario = document.getElementById("formulario");formulario.addEventListener("submit", manejarFormulario);

8. Conclusión

En este artículo, hemos aprendido cómo crear el juego del ahorcado utilizando JavaScript. Hemos visto cómo crear la estructura básica del juego, inicializar el juego, dibujar el ahorcado, actualizar la palabra oculta y las letras adivinadas, adivinar una letra y manejar el envío del formulario. Espero que hayas disfrutado de este tutorial y que te haya sido útil para mejorar tus habilidades de programación en JavaScript.