Estoy intentando desarrollar "El juego del ahorcado" en js
con funciones.
Por ahora tengo una palabra al azar de la array que he creado, una función que oculta esa palabra por guiones, hasta ahí bien.
No logro que al seleccionar la letra y que cuando coincida esa letra con una de la palabra oculta se cambie el guion por la letra. He encontrado un método de replaceAT
pero creo que es muy rebuscado y no se si funciona.
Estoy un poco bloqueado probando cosas que no funcionan.
let words = ['elefante', 'futbolista', 'cocinera', 'payaso'];
let word = words[Math.floor(Math.random() * words.length)];
let replaceWord;
// funcion para ocultar palabra y que se vean guiones y aparezca en el Dom.
function secretWord() {
replaceWord = word.replace(/./g, "_ ");
let printletra = document.getElementById('printletra');
printletra.innerHTML = replaceWord;
//alert(replaceWord)
}
secretWord();
// funcion para printar letra si se ha hacertado
function printLetter() {
let replacescript = document.getElementById('teclado');
replacescript.addEventListener('click', (e) => {
let letra = e.target.value;
String.prototype.replaceAt = function(index, character) {
return this.substr(0, index) + character + this.substr(index + character.length);
}
for (let i in replaceWord) {
if (letra === replaceWord[i]) {
replaceWord = replaceWord.replaceAt(i * 2, letra);
console.log(letra)
return replaceWord;
}
}
document.getElementById('printletra').innerHTML = replaceWord;
console.log(replaceWord)
});
}
printLetter()
<section class="contenedorsection">
<div class="contenedor">
<div class="title">HANGMAN</div>
<section class="categoriascont">
<div class="categorias">categorias</div>
</section>
<section class="contletraspadre">
<div id="printletra" class="contletras"></div>
<div class="dibujohangman"></div>
</section>
<section class="contletfalladas">
<div class="letfalladas"></div>
</section>
<section>
<div id="teclado">
<button type="button" class="key" value="Q" style="border-style: outset;">Q</button>
<button type="button" class="key" value="W" style="border-style: outset;">W</button>
<button type="button" class="key" value="E" style="border-style: outset;">E</button>
<button type="button" class="key" value="R" style="border-style: outset;">R</button>
<button type="button" class="key" value="T" style="border-style: outset;">T</button>
<button type="button" class="key" value="Y" style="border-style: outset;">Y</button>
<button type="button" class="key" value="U" style="border-style: outset;">U</button>
<button type="button" class="key" value="I" style="border-style: outset;">I</button>
<button type="button" class="key" value="O" style="border-style: outset;">O</button>
<button type="button" class="key" value="P" style="border-style: outset;">P</button>
<br>
<button type="button" class="key" value="A" style="border-style: outset;">A</button>
<button type="button" class="key" value="S" style="border-style: outset;">S</button>
<button type="button" class="key" value="D" style="border-style: outset;">D</button>
<button type="button" class="key" value="F" style="border-style: outset;">F</button>
<button type="button" class="key" value="G" style="border-style: outset;">G</button>
<button type="button" class="key" value="H" style="border-style: outset;">H</button>
<button type="button" class="key" value="J" style="border-style: outset;">J</button>
<button type="button" class="key" value="L" style="border-style: outset;">L</button>
<button type="button" class="key" value="K" style="border-style: outset;">K</button>
<button type="button" class="key" value="Ñ" style="border-style: outset;">Ñ</button>
<br>
<button type="button" class="key" value="Z" style="border-style: outset;">Z</button>
<button type="button" class="key" value="X" style="border-style: outset;">X</button>
<button type="button" class="key" value="C" style="border-style: outset;">C</button>
<button type="button" class="key" value="V" style="border-style: outset;">V</button>
<button type="button" class="key" value="B" style="border-style: outset;">B</button>
<button type="button" class="key" value="N" style="border-style: outset;">N</button>
<button type="button" class="key" value="M" style="border-style: outset;">M</button>
</div>
</section>
</div>
</section>