0

Estou desenvolvendo um jogo da forca usando JavaScript e não consigo resolver dois problemas

  1. Sempre que eu acerto a primeira letra e imprimo a palavra na tela, a mesma imprime apenas depois de acertar a segunda letra e não armazena a letra

  2. O vetor erro fica dando null

O que estou errando?

var paises = ["brasil", "canada", "espanha", "irlanda", "egito", "russia", "china", "australia", "argelia", "mexico"]
var letra = /\[a-z]/
var chute = document.getElementById("resposta")
var tentativas = document.getElementById("tentativas");
tentativas.innerText = 6;
var rand = paises[Math.floor(Math.random() * paises.length)]; //Método para selecionar um elemento string de um array
var resposta = []
var erro = []
erro.length = 6;
var correta = []

function valida() {
  var chute2 = chute.value; //Atribuir o valor do objeto chute
  chute2.toString(); //convertendo o objeto para string
  var tentativas2 = parseInt(tentativas.innerText);
  if (chute2 != "") {
    forca(tentativas2, chute2, rand, erro);
  } else {
    alert("Digite uma letra");
  }

}

function forca(tentativas2, chute2, rand) {
  var palavra = rand;
  if (tentativas2 != 0 && comparar(palavra, chute2) == true) {
    alert("Letra correta. Tente mais uma")
    lerVetor(palavra, chute2, resposta, erro)
    espacoPalavraCorreta(resposta, correta, chute2);
    document.getElementById("resposta").value = "";
  } else if (tentativas2 != 0 && comparar(palavra, chute2) == false) {
    alert("Letra errada. Tente mais uma")
    tentativas2--
    tentativas.innerText = tentativas2
    lerVetor(palavra, chute2, resposta)

    document.getElementById("resposta").value = "";

  } else if (resposta != palavra && tentativas2 == 0) {
    alert("Suas chances acabaram. A palavra correta é " + palavra)
    window.location.reload()
  } else {
    alert("Você venceu o jogo")
    window.location.reload()
  }


}


function comparar(palavra, chute2) {
  if (palavra.indexOf(chute2) != -1) {
    return true
  } else {
    return false
  }
}


function lerVetor(palavra, chute2, resposta, erro) {

  var palavraTamanho = palavra.length;
  var x;
  for (var i = 0; i < palavraTamanho; i++) {
    if (palavra[i] == chute2) {
      resposta[i] = chute2;
      //resposta[i].innerText = chute2
    } else {
      x = 0;
      erro[x] = chute2;
      x++
      break
    }
  }

}



function espacoPalavraCorreta(resposta, correta, chute2) {
  var tamanho = resposta.length;

  for (var j = 0; j < tamanho; j++) {

    if (resposta[j] != chute2) {
      correta[j] = document.getElementById("letras_corretas")
      correta[j].textContent = correta[j].textContent + " _ " //Comando para adicionar elementos no vetor e evitar override
    } else if (resposta[j] == chute2) {
      correta[j] = document.getElementById("letras_corretas");
      correta[j].textContent = correta[j].textContent + resposta[j]
    }
    //Próximo desafio: Entender por que o vetor erro dá nulo e como pegar a String temporária e substituir seus caracteres
  }

}
<h1>O jogo da forca mais épico de toda a história</h1>
<p class="p">Sua Resposta: <input type="text" class="sua_resposta" id="resposta" name="resposta"></p>
<input type="button" value="Chutar" onclick="valida()">
<p class="p">Tentativas: <span id="tentativas"></span></p>
<p class="p">A Resposta Correta: <span id="correta"></span></p>
<p class="p">Letras corretas: <span id="letras_corretas"></span></p>
<p class="p">Letras erradas: <span id="erros"></span></p>

1 Resposta 1

1

Você tem alguns "detalhes" errados para além dos dois que você mencionou.

Por exemplo,

var erro = []
erro.length = 6;

é incorreto modificar a propriedade length de um array em Javascript, pelo menos no seu caso, o único caso que conheço em que a propriedade length é modificada é quando o programador quer remover alguns elementos do array, mas no seu caso não aconselho, talvez seja até mesmo isso que esteja causando o erro.

Depois, na função forca:

var palavra = rand;

Repare que sempre que o usuário chutar uma letra, a palavra que foi anteriormente obtida aleatoriamente será substituída por outra, ou seja, o usuário estará chutando letras para diferentes palavras ao mesmo tempo! O correto seria obter essa palavra no momento em que a página é carregada.

Outro detalhe é o método .toString(), repare que este método retorna uma string representando o objeto em questão. Ou seja, este método não modifica a variável original em si, portanto teria de ser:

chute2 = chute2.toString();

em vez de:

chute2.toString();

de qualquer forma, não era necessário usar aqui.

Existem outros detalhes mínimos que podem ser melhorados mas de resto deu para entender a sua lógica e o que pretendia fazer.

Sempre que eu acerto a primeira letra e imprimo a palavra na tela, a mesma imprime apenas depois de acertar a segunda letra e não armazena a letra

Não investiguei a fundo este problema mas certamente está na função espacoPalavraCorreta, eu optei por seguir outro caminho, em vez de fazer dessa maneira que você estava tentando fazer eu fiz o seguinte:

var resposta = palavra.replace(/./g, '_').split('');

isto pega na palavra já obtida anteriormente e aleatoriamente do array palavras e substitui todos os caracteres por _. O .split('') é para converter a String para um array de caracteres. Depois,

for (let i = 0; i < palavra.length; i++) {
  if (palavra[i] == chute) {
    resposta[i] = chute;
  }
}

esta é a parte que trata de substituir, na posição correta, o _ pela letra que o usuário chutou corretamente.

Espero que tenha conseguido entender minhas explicações.

Tentei deixar o código de maneira a que você possa entender, espero que o uso de menos funções não o confunda.

  • Removi o seu onclick do HTML e em vez disso usei o método addEventListener, fiz isso porque o uso de "inline event handlers" é considerado "bad practice".
  • O window.addEventListener('load' ... é apenas para garantir que o script é executado depois da página carregar por completo.

window.addEventListener('load', function() {
  const palavras = ["brasil", "canada", "espanha", "irlanda", "egito", "russia", "china", "australia", "argelia", "mexico"];

  const input = document.getElementById("resposta");
  const tentativasElem = document.getElementById("tentativas");
  const respostaElem = document.getElementById("correta");
  const letrasCorretas = document.getElementById("letras_corretas");
  const letrasErradas = document.getElementById("letras_erradas");
  const botaoChutar = document.getElementById("chutar");

  var tentativas = 6;
  tentativasElem.innerText = tentativas;

  const palavra = palavras[Math.floor(Math.random() * palavras.length)];

  var resposta = palavra.replace(/./g, '_').split('');
  respostaElem.innerText = resposta.join('');

  const corretas = [];
  const erradas = [];

  botaoChutar.addEventListener('click', function() {
    if (tentativas > 0) {
      let chute = input.value.trim().toLowerCase();

      if (corretas.indexOf(chute) != -1 || erradas.indexOf(chute) != -1) {
        alert("Você já chutou essa letra. Tente uma letra diferente.");
      } else if (chute && /^[A-Z]$/i.test(chute)) {
        forca(chute);
      } else {
        alert("Digite uma letra.");
      }
    } else {
      alert("Suas tentativas se esgotaram.");
    }
  });

  function forca(chute) {
    if (palavra.indexOf(chute) != -1) {
      for (let i = 0; i < palavra.length; i++) {
        if (palavra[i] == chute) {
          resposta[i] = chute;
        }
      }
      respostaElem.innerText = resposta.join('');

      corretas.push(chute);
      letrasCorretas.innerText = corretas.join(", ");

      if (resposta.join('') == palavra) {
        alert("Parabéns, você venceu!");
        window.location.reload();
      } else {
        alert("Letra correta. Tente mais uma.");
        document.getElementById("resposta").value = "";
      }
    } else {
      tentativasElem.innerText = --tentativas;

      erradas.push(chute);
      letrasErradas.innerText = erradas.join(", ");

      if (!tentativas) {
        alert("Suas chances acabaram. A palavra correta era " + palavra + ".");
        window.location.reload();
      } else {
        alert("Letra errada. Tente novamente.");
        document.getElementById("resposta").value = "";
      }
    }
  }
});
<h1>O jogo da forca mais épico de toda a história</h1>
<p class="p">Sua Resposta:
  <input type="text" class="sua_resposta" id="resposta" name="resposta">
</p>
<input type="button" value="Chutar" id="chutar">
<p class="p">Tentativas: <span id="tentativas"></span></p>
<p class="p">A Resposta Correta: <span id="correta"></span></p>
<p class="p">Letras corretas: <span id="letras_corretas"></span></p>
<p class="p">Letras erradas: <span id="letras_erradas"></span></p>

1
  • Neste momento não tenho tempo, mas se quiser posso adicionar mais tarde comentários ao código se estiver com dificuldades em entender alguma coisa. Commented 9/05/2017 às 17:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .