How to limit a player’s chances in Javascript

Asked

Viewed 492 times

0

Friends, I’m developing a simple hangman game in Javascript, no dummy, only with a odds counter, however, I’m not getting limit the chances of the player and I have some syntactic errors. Could you help me? Below is the code:

HTML:

<html>
    <head>
        <title>Jogo da Forca</title>
    </head>
    <body>
        <div id="all">
        <h1>JOGO DA FORCA</h1>
            <div id="campo">Palavra:
                <input type="password" id="tela" value="" />
            </div>
            <input type="text" id="resp" value="" onload="criarTracos();" />
            <div id="teclas">
                <br/>
                <input type="button" value="Q" id="Q" onClick="preencher(value);">
                <input type="button" value="W" id="W" onClick="preencher(value);">
                <input type="button" value="E" id="E" onClick="preencher(value);">
                <input type="button" value="R" id="R" onClick="preencher(value);">
                <input type="button" value="T" id="T" onClick="preencher(value);">
                <input type="button" value="Y" id="Y" onClick="preencher(value);">
                <input type="button" value="U" id="U" onClick="preencher(value);">
                <input type="button" value="I" id="I" onClick="preencher(value);">
                <input type="button" value="O" id="P" onClick="preencher(value);">
                <br/>
                <input type="button" value="A" id="A" onClick="preencher(value);">
                <input type="button" value="S" id="S" onClick="preencher(value);">
                <input type="button" value="D" id="D" onClick="preencher(value);">
                <input type="button" value="F" id="F" onClick="preencher(value);">
                <input type="button" value="G" id="G" onClick="preencher(value);">
                <input type="button" value="H" id="H" onClick="preencher(value);">
                <input type="button" value="J" id="J" onClick="preencher(value);">
                <input type="button" value="K" id="K" onClick="preencher(value);">
                <input type="button" value="L" id="L" onClick="preencher(value);">
                <br />
                <input type="button" value="Z" id="Z" onClick="preencher(value);">
                <input type="button" value="X" id="X" onClick="preencher(value);">
                <input type="button" value="C" id="C" onClick="preencher(value);">
                <input type="button" value="V" id="V" onClick="preencher(value);">
                <input type="button" value="B" id="B" onClick="preencher(value);">
                <input type="button" value="N" id="N" onClick="preencher(value);">
                <input type="button" value="M" id="M" onClick="preencher(value);">
                <input type="button" value="APAGAR" id="APAGAR" onClick="backspace(tela);" style="width=1000px;">
                <br/>
            </div>
            <br />
            <input type="button" value="iniciar" id="iniciar" onClick="iniciar(tela);">
        </div>
    </body>
</html>

Javascript:

var palavra = new Array();
var controlando = 0;
var cont = 0;
var tracos = [];
var conpt = 0; //controle
var jogadas = 5;

function preencher(valor) {
    var elemento = document.getElementById("tela");
    var value = elemento.value;
    if (controlando == 0) {
        elemento.value = value + valor;
    }
    if (controlando == 1) {
        preenchimento(valor);
        if (renan == 1) {
          jogadas = jogadas - 1;
          alert(jogadas);
        }
    }
 }

function preenchimento(valor) {
    var elemento = document.getElementById("resp");
    var value = elemento.value;
    var checando = 0;
    for (var i = 0; i < palavra.length; i++) {
        if (valor == palavra[i]) {
            tracos[i] = valor;
            document.getElementById(valor).disabled = true;
            conpt = 2;
        } else conpt = 1;
    }
    if (conpt == 1) jogadas = jogadas - 1;
    elemento.value = tracos;
}

function backspace(campo) {
    valor = campo.value;
    tamanho = valor.length
    campo.value = valor.substring(0, tamanho - 1)
}

function iniciar(tela) {
    var copia = tela.value;
    document.getElementById("tela").disabled = 1; //checar se pode
    palavra = copia;
    controlando = 1;
    criarTracos();
}

function criarTracos(valor) {
    var elemento = document.getElementById("resp");
    var tam = palavra.length;
    for (var i = 0; i < tam; i++) {
        tracos[i] = "__";
    }
    elemento.value = tracos;
}
javascript html

  • We can help, as long as it’s with a question, not the full game.

1 answer

1

It is very simple to control the moves, just add a start variable false so that it only becomes true if the player has hit, otherwise continue false and at the end of the loop you should reduce a counter chance(jogadas) and then inform the user that he missed a move and has x remaining moves, and when clicking on a letter you must have a if controlling your variable jogadas, so that if it is less than 5 will warn the user that he no longer has enough chances, and should start a new game.

I also took the liberty of styling your "game" with CSS and also added a "New Game" button and note that I am adding the keyboard letters dynamically so you can change when you want, it is better this way.

Ps: there were also some syntax and logic errors, were fixed, would look this way:

        function adicionaLetras(){
	      var str = "QWERTYUIOPASDFGHJKLZXCVBNM";
	      for(var i=0; i<str.length; i++)
	      {
	        var nextChar = str.charAt(i);
            var ele      = document.createElement('input');
            ele.name     = nextChar;
            ele.value    = nextChar;
            ele.type     = 'button';
            ele.id       = nextChar;
            ele.onclick  = function(){ preencher(this.id) };
            document.getElementById('teclas').appendChild(ele);
          }
        }

        function preencher(valor){
          if (jogadas > 0){
          var elemento = document.getElementById("tela");
          var value = elemento.value;
          
          if (controlando == 0) {
              elemento.value = value + valor;
          }
          if (controlando == 1) {
              preenchimento(valor);
          }
          }else{
            alert('Desculpe, acabaram suas jogadas, por favor, inicie um novo jogo.');
          }
        }
  

        function preenchimento(valor){
          var acertou = false;
          var elemento = document.getElementById("resp");
            for (var i = 0; i < palavra.length; i++) {
              if (valor == palavra[i]) {
                tracos[i] = valor;
                document.getElementById(valor).disabled = true;
                acertou = true;
              }
            }
          elemento.value = tracos;
          if (acertou)
            alert("Você acertou, ainda tem "+jogadas+" jogadas.");
          else{
            jogadas--;
            alert("Você errou, você tem apenas "+jogadas+" jogadas restantes");
          }
        }
            function backspace(campo) {
                valor = campo.value;
                tamanho = valor.length
                campo.value = valor.substring(0, tamanho - 1)
            }

            function iniciar(tela) {
                jogadas = 5;
                var copia = tela.value;
                document.getElementById("tela").disabled = 1; 
                palavra = copia;
                controlando = 1;
                criarTracos();
            }

            function criarTracos(valor) {
                var elemento = document.getElementById("resp");
                var tam = palavra.length;
                for (var i = 0; i < tam; i++) {
                    tracos[i] = "__";
                }
                elemento.value = tracos;

            }

        window.palavra = new Array();
        window.controlando = 0;
        window.cont = 0;
        window.tracos = [];
        window.jogadas = 5;        
        adicionaLetras();
html {
  font-family: Tahoma;
  font-size: 11pt
}
#teclas {
  width: 100%;
  height: 100px;
  position: relative;
  display: block;
  float: left;
}

#teclas span {
  display: block;
  text-align: center;
  background-color: skyblue;
  margin-top: 5px;
}

#campo {
  height: 170px;
  width: 200px;
  background-color: deepskyblue;
  padding: 3px;
  color: #fff;
  margin: 0 auto;
}

.container {
  width: 250px;
  height: 270px;
  margin: 0 auto;
  display: block;
  border: 1px solid deepskyblue;
  padding: 10px;
}

#teclas input[type=button] {
  width: 25px;
  height: 25px;
}

#campo > input {
  width: 97%;
  margin-bottom: 5px;
}

#campo > input[type=button] {
  width: 100%;
  margin-bottom: 5px;
}

.container input {
  border: 2px solid #333;
}
<div class=container>
  <div id="campo">
    Palavra Inicial:
    <input type="password" id="tela" value="" />
    Advinhação:
    <input type="text" id="resp" value="" onload="criarTracos();" />
  <input type="button" value="Apagar" id="APAGAR" onClick="backspace(tela);" />
  <input type="button" value="Iniciar jogo" id="iniciar" onClick="iniciar(tela);">
  <input type="button" value="Novo jogo" id="newgame" onClick="window.location.reload();">
  </div>
  <div id=teclas>
  <span>Teclado</span>
  </div>  
</div>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.