Inicio Apuntes FPApuntes DAW Juego de adivinar palabras, crea el tuyo propio con JavaScript, HTML y CSS

Juego de adivinar palabras, crea el tuyo propio con JavaScript, HTML y CSS

Solo necesitas JavaScript, CSS y HTML

Publicado por entreunosyceros

Una vez más aquí. Hoy vengo a dejar un pequeño artículo sobre un juego de JavaScript que me pidieron en su día en un curso que hice. Años atrás publiqué un artículo en el que indicaba cómo crear un juego de recordar parejas que codifiqué con JavaScript. Bueno, pues el caso es que años después me hice un curso de JavaScript, en el que me pidieron hacer un juego de adivinar palabras (algo parecido al ahorcado), sin necesidad de utilizar una conexión a base de datos.

Pues bien, hace dos días, un conocido me preguntó algo relacionado con JavaScript, que hizo que me acordase de este pequeño pasatiempos que tenía guardado en un disco duro. Pues hoy voy a publicarlo, por si a alguien le puede venir bien en algún momento.

Para haber hecho esto hace unos años, en su día se ve que traté de hacer que los códigos fueran lo más simples que mis limitados conocimientos me permitían, y además llené los códigos de comentarios buscando no olvidarme que hace cada cosa.

Juego de adivinanzas de palabras en JavaScript

Este pequeño proyecto en el que intentaremos adivinar algunas palabras, primero debemos crear cuatro archivos. Uno HTML, otro CSS y dos JS (dentro de una carpeta llamada JS). Después de crear estos archivos, tan solo será necesario pegar dentro de cada uno de ellos los códigos que vamos a ver continuación.

El archivo HTML

Como decíamos, el primer archivo que vamos a crear es el archivo .HTML con tu editor favorito. A este le vamos a dar el nombre index.html.

<!DOCTYPE html>

<html lang="es">

<head>

  <meta charset="utf-8">
  <title>ARRRRG-divina</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <div class="envoltura">

    <h1>Palabra a adivinar</h1>

    <div class="contentenido">

      <input type="text" class="typing-input" maxlength="1">

      <div class="inputs"></div>

      <hr id="linea" />

      <div class="detalles">
        <p class="pista">Pista: <span></span></p>
        <p class="posibilidades">Posibilidades restantes: <span></span></p>
        <p class="letrasErroneas">Letras equivocadas: <span></span></p>
      </div>

      <div id="boton"><button class="reset-btn">Volver a empezar</button></div>

    </div>

  </div>

  <script src="js/lista.js"></script>
  <script src="js/script.js"></script>

</body>

</html>

El archivo .CSS

El siguiente archivo que vamos a crear es el archivo .CSS. A este lo vamos a llamar style.css, y lo vamos a colocar en el mismo directorio que el archivo index.html. Dentro pegaremos las siguientes reglas CSS para darle el aspecto a nuestro pequeño proyecto.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Comic Sans', sans-serif;
}

body {
  display: flex;
  padding: 0 10px;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: #761bb2;
}

#linea {
  margin: 15px;
}

.pista {
  font-weight: bolder;
}

#boton {
  text-align: right;
}

.envoltura {
  width: auto;
  background: rgb(223, 223, 223);
  border-radius: 10px;
  box-shadow: 10px 10px 25px rgba(24, 24, 24, 0.1);
}

.envoltura h1 {
  font-size: 25px;
  font-weight: bold;
  padding: 20px 25px;
  border-bottom: 1px solid #ccc;
  text-align: center;
}

.envoltura .contentenido {
  margin: 25px 25px 35px;
}

.contentenido .inputs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.inputs input {
  height: 57px;
  width: 57px;
  margin: 4px;
  font-size: 24px;
  font-weight: 500;
  color: #1ba98c;
  text-align: center;
  text-transform: uppercase;
  border-radius: 5px;
  border: 1px solid #B5B5B5;
}

.typing-input {
  opacity: 0;
  z-index: -999;
  position: absolute;
  pointer-events: none;
}

.inputs input:first-child {
  margin-left: 0px;
}

.contentenido .detalles {
  margin: 25px 0 25px;
}

.detalles p {
  font-size: 19px;
  margin-bottom: 10px;
}

.contentenido .reset-btn {
  width: auto;
  cursor: pointer;
  color: #fff;
  padding: 15px 0;
  font-size: 17px;
  border-radius: 5px;
  background: #631491;
  transition: all 0.3s ease;
  padding: 2%;
}

.contentenido .reset-btn:hover {
  background: #8d18a5;
}

/*Para móvil*/

@media screen and (max-width: 460px) {
  .envoltura {
    width: 460px;
  }

  .envoltura h1 {
    font-size: 22px;
    padding: 16px 20px;
  }

  .envoltura .contentenido {
    margin: 25px 20px 35px;
  }

  .detalles p {
    font-size: 17px;
  }

  .inputs input {
    height: 51px;
    width: 50px;
    margin: 3px;
    font-size: 22px;
  }

  .contentenido .reset-btn {
    padding: 14px 0;
    font-size: 16px;
  }
}

El archivo .JS

El tercero de los archivos que vamos a crear es uno llamado script.js. Este archivo lo vamos a colocar dentro de una carpeta llamada js, la cual se colocará dentro del directorio en el que tengamos guardados el archivo .HTML y .CSS.

// Contantes que devuelven el primer elemento que coincide con el grupo especificado
const inputs = document.querySelector(".inputs"),
    resetBtn = document.querySelector(".reset-btn"),
    pistaTag = document.querySelector(".pista span"),
    posibilRestantes = document.querySelector(".posibilidades span"),
    letraEquivocada = document.querySelector(".letrasErroneas span"),
    typingInput = document.querySelector(".typing-input");

// Variables de alcance limitado a un bloque    
let palabra, maxSuposiciones, letrasCorrectas = [], letrasIncorrectas = [];

// Selección aleatoria de la palabra a adivinar
function palabraAleatoria() {
   
    // Definimos para conseguir un item aleatorio
    let itemAleatorio = listado[Math.floor(Math.random() * listado.length)];
   
    palabra = itemAleatorio.palabra;
    maxSuposiciones = palabra.length >= 5 ? 8 : 6;
    letrasCorrectas = []; letrasIncorrectas = [];
    pistaTag.innerText = itemAleatorio.pista;
    posibilRestantes.innerText = maxSuposiciones;
    letraEquivocada.innerText = letrasIncorrectas;

    // Cuadrados para escribir el texto
    let html = "";
    for (let i = 0; i < palabra.length; i++) {
        html += `<input type="text" disabled>`;
        inputs.innerHTML = html;
    }
}
palabraAleatoria();

// Inicio del juego

function initGame(e) {
    //convertimos a minúsculas el valor
    let key = e.target.value.toLowerCase();
    // Hacemos que se escriban solo letras y comparamos si son correctas o incorrectas
    if (key.match(/^[A-Za-z]+$/) && !letrasIncorrectas.includes(` ${key}`) && !letrasCorrectas.includes(key)) {
        // Letras correctas
        if (palabra.includes(key)) {
            for (let i = 0; i < palabra.length; i++) {
                if (palabra[i] == key) {
                    letrasCorrectas += key;
                    inputs.querySelectorAll("input")[i].value = key;
                }
            }
        } else {
            // Letras incorrectas
            maxSuposiciones--;
            letrasIncorrectas.push(` ${key}`);
        }
        posibilRestantes.innerText = maxSuposiciones;
        letraEquivocada.innerText = letrasIncorrectas;
    }
    typingInput.value = "";

    // Resultados posibles

    setTimeout(() => {
        if (letrasCorrectas.length === palabra.length) {
            //Generamos una respuesta aleatoria para el ganador
            var meng = Math.floor(Math.random() * 5);
            if (meng == 0) {
                alert(`Enhorabuena! Encontraste la palabra ${palabra.toUpperCase()}. Has ganado, pero en realidad has perdido (tu tiempo)`);
            } else if (meng == 1) {
                alert(`Enhorabuena! Encontraste la palabra ${palabra.toUpperCase()}. Deja de jugar a esto y echa un Euromillón ... a ver si sales "probre"`);
            } else if (meng == 2) {
                alert(`Enhorabuena! Encontraste la palabra ${palabra.toUpperCase()}. Deja de jugar a esto y prueba a lamer un ladrillo`);
            } else if (meng == 3) {
                alert(`Enhorabuena! Encontraste la palabra ${palabra.toUpperCase()}. Este juego no tiene secretos para ti`);
            } else if (meng == 4) {
                alert(`Enhorabuena! Encontraste la palabra ${palabra.toUpperCase()}. Un gallifante para ti!!`);
            } else {
                alert(`Enhorabuena! Encontraste la palabra ${palabra.toUpperCase()}. Has ganado un chorizo poco chupado`);
            }
            // Volvemos a seleccionar una palabra de la lista
            return palabraAleatoria();
        } else if (maxSuposiciones < 1) {
            var menp = Math.floor(Math.random() * 5);
            if (menp == 0) {
                alert("Has fallado. Esto es demasiado para un sorbe charcos como tú");
            } else if (menp == 1) {
                alert("Has fallado tontín!!!. Deberías dedicar tu tiempo a lamer tu propio sobaco");
            } else if (menp == 2) {
                alert("Has fallado. Las adivinanzas no son lo tuyo!!!");
            } else if (menp == 3) {
                alert("Has fallado. Pareces más tonto que los pelos del culo, que ven venir la mierda ... y no se apartan");
            } else if (menp == 4) {
                alert("Has fallado por no leer bien la pista ... más fácil no puede ser esto!!! ");
            } else {
                alert("Has fallado ... y al mismo tiempo creo que se te está cayendo la baba")
            }

            for (let i = 0; i < palabra.length; i++) {
                // Mostramos la palabra oculta
                inputs.querySelectorAll("input")[i].value = palabra[i];
            }
        }
    }, 100);
}

// Llamadas

typingInput.addEventListener("input", initGame);
inputs.addEventListener("click", () => typingInput.focus());
document.addEventListener("keydown", () => typingInput.focus());
resetBtn.addEventListener("click", palabraAleatoria);

Las palabras del juego

En último lugar vamos a crear el segundo archivo .JS. Este archivo lo vamos a llamar lista.js y lo vamos a colocar dentro de la carpeta js en la que colocamos el anterior archivo .js. Dentro de este archivo podremos colocar las palabras y las pistas siguiendo una sencilla estructura.

let listado = [
    {
        palabra: "javascript",
        pista: "Lenguaje con el que se ha escrito este programa"
    },
    {
        palabra: "android",
        pista: "S.O. que lleva mi teléfono móvil"
    },
    {
        palabra: "manitou",
        pista: "Marca de tabaco que fumo"
    },
    {
        palabra: "kombucha",
        pista: "Té fermentado que esta rico que te mueres"
    },
    {
        palabra: "marihuana",
        pista: "Planta con cogollos que debería estar legalizada"
    },
    {
        palabra: "javascript",
        pista: "Lenguaje con el que se ha escrito este programa"
    },
    {
        palabra: "mechero",
        pista: "Artilugio para encender la cocina"
    },
    {
        palabra: "python",
        pista: "Una lenguaje de programación que tiene como logo una serpiente"
    },
    {
        palabra: "penne",
        pista: "Macarrón alargado"
    },
    {
        palabra: "teclado",
        pista: "Sirve para escribir en un ordenador"
    },
    {
        palabra: "utabon",
        pista: "Desatasca narices"
    },
    {
        palabra: "ventilador",
        pista: "Mueve el aire y da vueltas"
    },
    {
        palabra: "php",
        pista: "Lenguaje de programación del lado del servidor"
    },
    {
        palabra: "silla",
        pista: "Pones tu culo sobre ella"
    },
    {
        palabra: "entreunosyceros",
        pista: "Página web en la que publico cosas"
    },
    {
        palabra: "twitter",
        pista: "Red social con un pájaro"
    },
    {
        palabra: "whatsapp",
        pista: "Envias mensajes instantaneos desde esta APP"
    },
    {
        palabra: "mogadiscio",
        pista: "Capital de Somalia"
    },
    {
        palabra: "electricidad",
        pista: "Su precio está por las nubes"
    },
]

Tras colocar cada archivo donde se debe, ya podemos ejecutar el archivo index.html, el cual abrirá en nuestro navegador web algo como lo siguiente:

pantallazo juego de adivinar palabras

Este juego tiene una mecánica sencilla. El jugador tiene que encontrar todas las letras de una palabra obtenida de forma aleatoria de un listado en el número de intentos dados. Para que sea más sencillo de usar, el juego también dará pistas relacionadas con la palabra buscada.

Además, si quieres probar el juego antes de utilizarlo en tu propio equipo, puedes verlo funcionando en el siguiente enlace.

Tengo que decir que posiblemente el juego carezca de algunas cosas que deberían estar en el código, pero en su momento me sirvió y hace lo que esperaba. Cada uno es libre de mejorarlo o cambiarlo como quiera.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.