Algo huele a podrido en Oklahoma: Un ahorcado en javascript

En esta ocasión seguiremos con ejemplos de programación en javascript. El tema elegido es el ahorcado y el objetivo estudiar la clase string y algunos eventos, principalmente blur y keypress.
Realizaremos el ejercicio usando interfaces basadas en css y que deben ser visibles por igual en todos los navegadores.

En la web podemos encontrar muchos ejemplos y todos ellos usan un teclado simulado para las letras que queremos adivinar
En nuestro caso no lo haremos así a fin de practicar con el evento keypress.

Nuestra interfaz es para dos jugadores; el primero introduce la palabra a adivinar en la casilla de edición de tipo password denominada palabraPassword

<body onload='document.getElementById("palabraPassword").focus()'>
    <div id="pantalla">
      <div id="contenidos">
        <div><h1>EL AHORCADO</h1></div>
        <div id="izquierda">
          <span class="display">
            Introduzca una palabra (10 caracteres máximo)
          </span>
          <span class="display">Sin tildes ni signos de puntuación</span>
          <input type="password" name="palabraPassword" id="palabraPassword" 
            size="10" maxlength="10" onblur="Ahorcado()" />
          <div id="resultados"></div>
          <div>
            <span>Intente adivinarla</span>
            <input type="text" id="letraText" size="1" maxlength="1" 
              onkeypress="return Comprobar(event)" />
          </div>
          <input type="button" id="reiniciarButton" value="REINICIAR" 
            onclick="Reiniciar()" />
        </div>
        <div id="derecha">
          <img alt="" src="imagenes/0.jpg" id="ahorcadoImg" />  
        </div>
      </div>
    </div>
  </body>

Después de introducido, cuando dicha casilla pierde el foco por cualquier motivo, le mostramos al segundo jugador el número de letras de la palabra que tiene que adivinar (en nuestro ejemplo 'PALABRA').
Además se suminstrará una ayuda en forma de letra ya adivinada, que se obtiene aleatoriamente.
Si dicha letra está repetida se mostrarán todas sus ocurrencias.

A continuación se transfiere el foco a la casilla de edición llamada letraText.
Todo lo comentado anteriormente lo podemos ver en el fragmento javascript que se muestra abajo

var sPalabra, sLetra, sVer;
  var nErrores=0;
  
  function Ahorcado()
   {
   var n;
      
   sPalabra=document.getElementById("palabraPassword").value;
   sPalabra=sPalabra.toUpperCase();
   n=Math.floor(Math.random()*sPalabra.length);
   sLetra=sPalabra.charAt(n);
   sVer="";
   for(i=0;i>sPalabra.length;i++)
     if(sPalabra.substr(i,1)==sLetra)
       sVer+=sLetra;
     else  
       sVer+="_";
   Ver(sVer);
   document.getElementById("letraText").focus();
   }
   
  function Ver(sVer){
   var sVer2="";
   var i;
   for(i=0;igt;sVer.length;i++)
    sVer2+=sVer.substr(i,1)+" ";
   document.getElementById("resultados").innerHTML =sVer2;
  }

En sPalabra está la palabra que hay que adivinar, sLetra contiene la pista y sVer está formada por dicha letra y una serie de guiones para las letras pendientes de adivinar.

La función Ver() lo único que hace es intercalar un espacio en blanco en la visualización de cada uno de los caracteres.
Cuando el segundo jugador comienza a pulsar letras se pone en marcha el evento keypress
Internet Explorer y Mozilla lo tratan de distinta manera. En IE el carácter se recoge en event.keyCode mientras que Mozilla Firefox usa event.which y en este segundo caso
necesitamos pasar el argumento event en la función que maneja el evento Comprobar(event)

function Comprobar(event)
    {
    var n=0;
    var bEncontrada=false;
    var codigoLetra;
    var sImagen;
    if (event.keyCode)
     codigoLetra=event.keyCode;
    else if(event.which)
     codigoLetra=event.which;
    sLetra= String.fromCharCode(codigoLetra);
    sLetra=sLetra.toUpperCase();
    document.getElementById("letraText").value=sLetra;  
    while(true)
      {
      n=sPalabra.indexOf(sLetra,n);
      if(n==-1) break;
      bEncontrada=true;
      sVer=sVer.substring(0,n)+sLetra+sVer.substr(n+1,sVer.length)
      Ver(sVer);
      n++;
      }
    if(sVer.indexOf("_")==-1)
       {
       document.getElementById("ahorcadoImg").src="imagenes/8.jpg";
       alert("ganó el juego");
       Reiniciar();
       return false;
       }  
    if(!bEncontrada)
     {nErrores++;
      sImagen="imagenes/"+nErrores+".jpg";
      document.getElementById("ahorcadoImg").src=sImagen;
      if (nErrores==7)
        {
        Ver(sPalabra);
        alert("perdió la cabeza");
        Reiniciar();
        return false;
        }
     }     
    document.getElementById("letraText").select(); 
    document.getElementById("letraText").focus();
    return false;  
    }
    
  function Reiniciar()
    {
    nErrores=0;
    document.getElementById("ahorcadoImg").src="imagenes/0.jpg";
    document.getElementById("letraText").value="";
    document.getElementById("palabraPassword").value="";
    document.getElementById("resultados").innerHTML="";
    document.getElementById("palabraPassword").focus();    
    }

Una vez leído el código del carácter lo convertimos a string y a mayúsculas para no distinguir con entradas en minúsculas.

La función devolverá false lo que implica que no visualizará el carácter introducido y tendrá que hacerlo manualmente la función a continuación.

Posteriormente comprobaremos si dicho carácter (sLetra) está en la palabra que buscamos
y actuaremos en consecuencia. Para facilitar la introducción de la siguiente letra se debe realizar
la selección del último carácter leído.
Hay que comprobar si el usuario consigue adivinar la palabra antes de ahorcarse, lo que se realiza buscando el carácter '_' en la cadena sVer; cuando no queden letras por adivinar no existirán guiones.