estoyEstoy intentando desarrollar el"El juego del ahorcadoahorcado" en jsjs
con funciones, por ahora tengo una palabra al azar de la array que e creado, una funcion que oculta esa palabra por guiones, hasta hay 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. e encontrado un metodo de replaceAT pero creo que es muy rebuscado y no se si funciona. Estoy un poco bloqueado probando cosas que no funcionan.
estoy intentando desarrollar el juego del ahorcado en js con funciones, porPor ahora tengo una palabra al azar de la array que ehe creado, una funcionfunción que oculta esa palabra por guiones, hasta hayahí 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. eHe encontrado un metodométodo de replaceATreplaceAT
pero creo que es muy rebuscado y no se si funciona.
Estoy un poco bloqueado probando cosas que no funcionan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Hangman</title>
</head>
<body>
<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>
<script src="./index.js"></script>
</body>
</html>
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()
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>