Tabla de contenido
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:
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.