How can I place images in the hangman game below? I thought I’d replace the image with every wrong attempt on the javascript part

Asked

Viewed 48 times

-3

<html>
<head>

  <meta charset="utf-8">

  <br><center><font face="Helvetica" color=black size=7><b>DOM CASMURRO</b></font></center>

  <div align="center">

    <p><font face="Helvetica" color=black size=6><b>DICA: Nome da personagem protagonista citada no seguinte trecho:</b></font><br></p>

    <br><p><font face="Helvetica" color=black size=6><b>"Olhos de cigana oblíqua e dissimulada."<br></b></font><br></p>
  </div>


  <script type="text/javascript">
    var palavra=new Array();
    var controlando=0;
    var cont=0;
    var tracos=[];
        var conpt=0;//controle
        var jogadas=6;

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


        function preenchimento(valor){
          var elemento = document.getElementById("resp");
          var value= elemento.value;
          var checando=0;

          var conpt = false;
          for (var i = 0; i < palavra.length; i++) {
            if (valor == palavra[i]) {
              tracos[i] = valor;
              document.getElementById(valor).disabled = true;
              conpt = true;
            }
          }


          if (!conpt){

            jogadas = jogadas - 1;

             if (jogadas == 6){

              alert("você possui mais 6 tentativas");

            }

            if (jogadas == 5){
              alert("você possui mais 5 tentativas");

            }

            if (jogadas == 4){
              alert("você possui mais 4 tentativas");

            }


            if (jogadas == 3){
              alert("você possui mais 3 tentativas");

            }


            if (jogadas == 2){
              alert("você possui mais 2 tentativas");

            }


            if (jogadas == 1){
              alert("você possui mais 1 tentativas");


            }


            if (jogadas == 0){

              alert("você perdeu! Tente Novamente!");
              location.href="jogodaforca.html";
            }
          }



            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 finalizar(tela){
        alert("Você Concluiu a Atividade!");
              location.href="jogodaforca.html";
            }

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

      }
    </script>

  </head>
  <body>

    <div align="center">
      <img src="img6.jpg"  br clear="left">
      <div id="all" >

       <div id="campo">
        <span style="display: none">
          Palavra: <input type="password" id="tela" value="CAPITU" readonly="true"/></span>
          <br><br>
          <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="O" onClick="preencher(value);">
           <input type="button" value="P" id="P" onClick="preencher(value);">

           <br>
           <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>
           <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);" >
           <br>
           <br>
           <br>
         </div>
         <br />
         <input type="button"  value="iniciar" id="iniciar" onClick="iniciar(tela);" >
         <input type="button"  value="finalizar" id="finalizar" onClick="finalizar(tela);" >
       </div>
     </div>
   </div>


 </body>
 </html>
php javascript html

1 answer

0


It’s quite simple, I put one div with the id="situacao" and you can insert the image of the body parts little by little, for example: with an error the image 1 would be the head, with two mistakes the head and the trunk, then an image with the head the trunk and the left arm, and at each error it will put the image according to the number of errors.

at the end of the code html insert that div

<div>
    <p>você esta morrendo</p>
    <div id="situacao"></div>
</div>

Change this part of the code so:

if (jogadas == 6){        
    alert("você possui mais 6 tentativas");
    document.getElementById("log").innerHTML="<img src='img6.png' /><p>6</p>";
}

if (jogadas == 5){
    alert("você possui mais 5 tentativas");
    document.getElementById("log").innerHTML="<img src='img5.png' /><p>5</p>";
}

if (jogadas == 4){
    alert("você possui mais 4 tentativas");
    document.getElementById("log").innerHTML="<img src='img4.png' /><p>4</p>";
}


if (jogadas == 3){
    alert("você possui mais 3 tentativas");
    document.getElementById("situacao").innerHTML="<img src='img3.png' /><p>3</p>";
}


if (jogadas == 2){
    alert("você possui mais 2 tentativas");
    document.getElementById("situacao").innerHTML="<img src='img2.png' /><p>2</p>";
}


if (jogadas == 1){
    alert("você possui mais 1 tentativas");
    document.getElementById("situacao").innerHTML="<img src='img1.png' /><p>1</p>";
}


if (jogadas == 0){

    alert("você perdeu! Tente Novamente!");
    document.getElementById("situacao").innerHTML="<img src='img.png' /><p>0</p>";
    location.href="jogodaforca.html";
}

remember to change the img src to the corresponding image, following what I told you above. when you have in error 6 shows an img with only 1 body part, in 5 with two parts and so on.

  • 1

    THANK YOU! IT WAS RIGHT!

Browser other questions tagged php javascript html

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