Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Realizar el juego del ahorcado.
El jugador debe acertar una palabra secreta que se muestra en pantalla utilizando guiones bajos. Para ello, se mostrará un prompt solicitando que introduzca una letra. Si la acierta, el guión bajo será sustituido por una letra. Si no, se le informará del error. Continuaremos con esta mecánica hasta que el jugador acierta la palabra secreta.
1. Maquetamos el código HTML del juego.
2. Al iniciar el programa, este deberá escoger una palabra al azar entre 4. Esta será la palabra secreta que el usuario deberá adivinar. Para ello, crearemos un array de cuatro palabras y seleccionaremos una de ellas utilizando un número aleatorio.
3. Utilizando el siguiente código el programa creará una nueva palabra con tantos guiones bajos como letras tenga la palabra secreta.
let hiddenWord= secretWord.replace(/./g, "_ ");El código anterior contiene una expresión regular (reg exp o regular expresion) : /./g
La primera barra (/) indica que es el comienzo de la expresión regular. La segunda barra(/g , global) indica que se aplicará a todas las ocurrencias. El punto que hay en medio indica que estas ocurrencias serán todos los caracteres.
4. El usuario deberá ir introduciendo letra a letra hasta adivinar la palabra secreta.
5. Después de recoger la letra introducida por el usuario, utilizando un bucle for, iremos comparandola con las letras que tiene la palabra secreta. En caso de coincidencia, mostraremos un mensaje de alerta.
Para acceder a cada una de las letras de la palabra secreta y compararlas con las letra introducida por el usuario, tenemos dos opciones:
- Utilizar la función charAt(i)
- Utilizar la sintaxis de corchetes como si fuese un array (secretWord[i]).
6. Lo que queremos realmente no es mostrar un mensaje de alerta, sino poner la letra introducida por el usuario en la palabra con guiones en la posición que le corresponda. Para ello, en lugar de un alert, llamaremos a la siguiente función, que como podemos ver, recibe tres parámetros de entrada:
- la palabra con guiones en la que queremos para hacer el reemplazo.
- le letra que queremos reemplazar
- la posición en la que queremos cambiar el guión por la letra introducida por el usuario.
hiddenWord = replaceAt(hiddenWord, letter, i*2);La función anterior no existe en Javascript, así que para poder usarla tendremos que declarar la función dentro de nuestro código. El código de la función que debemos declarar es el siguiente:
const replaceAt = (string, character, index) => {
return string.substring(0, index) + character + string.substring(index + character.length);
}7. Utilizaremos
if(!hiddenWord.includes("_"))para comprobar si el usuario ganó.
8. Cada vez que el usuario falle, desplazaremos la siguiente imagen de fondo para que se vaya completando la imagen del ahorcado.