1

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>

1 respuesta 1

2

Tenias un par de errores, por ejemplo:

  • La letra ingresada la buscabas en la variable replaceWord y deberías usar word que es donde esta la palabra seleccionada.
  • La letra ingresada esta en mayúsculas y la comparabas con letras en minúsculas.
  • Al recorrer una variable tipo string no conviene usar for in ya que itera los caracteres que contiene y todas las propiedades del tipo de dato también.

Solución:

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();


String.prototype.replaceAt = function(index, character) {
  return this.substr(0, index) + character + this.substr(index + character.length);
}

// funcion para printar letra si se ha hacertado
function printLetter() {
  let replacescript = document.getElementById('teclado');
  replacescript.addEventListener('click', (e) => {
    // Convertimos la letra ingresada a minúscula
    let letra = e.target.value.toLowerCase();
    // Obtenemos un arreglo con los caracteres de la palabra
    let letters = word.toLowerCase().split('');
    // Recorremos el arreglo
    letters.forEach(function(letter, i) {
      // Si la letra coincide
      if (letra == letter) {
        replaceWord = replaceWord.replaceAt(i * 2, letra);
      }
    });
    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>

3
  • me estaba comiendo la cabeza y no veía que estaba comparando minúsculas con mayúscula, muchas gracias por tu ayuda. Commented el 12 oct. 2021 a las 16:09
  • quiero poner un alert para cuando se falla la letra, pongo un else despues del if(letra == letter) pero tiene un comportamiento muy raro, sale el alert acierte o falle la letra,y luego tengo que darle a aceptar tantas veces como letras tiene la palabara, podrias ayudarme a entender por que? Commented el 12 oct. 2021 a las 18:02
  • @davidCuenca te conviene crear una variable para controlar si se encontro la letra y fuera del forEach verificar su valor/estado y realizar la acción dependiendo del mismo
    – Marcos
    Commented el 12 oct. 2021 a las 21:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.