Piedra, papel y tijera en javascript usando DOM

Hoy vamos a diseñar el famoso juego infantil como ejemplo de estructuras alternativas cuidando, además, otros dos aspectos: construir la interfaz usando solamente css y tener en cuenta las instrucciones javascript del DOM getElementById y getElementsByTagName.

En el diagrama coloreado se observa que usamos una capa #pantalla como fondo y sobre ella construimos la capa #contenidos. Para centrar la segunda capa la opción mejor es variar margin.

#pantalla {
        width: 100%;
        overflow: hidden;
     }
     #contenidos {
        width: 600px;
        margin: 0 auto auto;
     }
 

El resto del diseño depende del uso adecuado de float. Dentro de #izquierda situamos las capas #maquina y #humano con float:left, #resultados rompe la tendencia con clear:both. A su vez #izquierda y #derecha vuelven a emplear float:left

#izquierda{  
        float:left;
        }
        #maquina {
        width: 170px;
        padding:5px;
        float:left;
        }
        #humano {
        width: 170px;
        padding:5px;
        float:left;
        }
        #resultados {
        width: 340px;
        padding:10px;
        clear:both;
        }
        #derecha{
        float:left;
        width: 170px;
        padding-top:40px;
        padding-left:25px;
        }
 

De acuerdo con las recomendaciones de las normas debemos evitar el uso de <br />. Con el lineheight adecuado lo conseguimos al situar los botones de radio.

input.botones {
        width: 100px;
        display:block;
        line-height:30px;
     }
 

Completamos el diseño con los contenidos. En HTML usamos la etiqueta <fieldset> para poner marcos con o sin título (<legend>).

<div id="izquierda">
      <div id="maquina">
         <fieldset class="arriba">
           <legend>Máquina</legend>
           <img id="imagen" alt="" 
              src="imagenes/piedra.jpg" />
         </fieldset>
      </div>
      <div id="humano">
         <fieldset class="arriba">
            <legend>Humano</legend>
            <div id="divHumano">
               <span class="radio"><input type="radio" 
                  name="humanoRadio" value="piedra" 
                  checked="checked" /> Piedra</span>
               <span class="radio"><input type="radio" 
                  name="humanoRadio" value="papel" />
                  Papel</span>
               <span class="radio"><input type="radio" 
                  name="humanoRadio" value="tijera" />
                  Tijera</span>
           </div>
       </fieldset>
    </div> 
   ....
   ....   
    
 

Asimismo recuerde que debemos hacer diseños que permitan ser vistos por igual en todos los navegadores.

En cuanto al código javascript cuando queremos referenciar un elemento individual empleamos getElementById

document.getElementById("resultado").innerHTML = 
      "Gana la máquina";
 

Cuando la referencia se refiere a un grupo de etiquetas la principal alternativa es getElementsByTagName

function VisResultados()
    {
    radio=document.getElementsByTagName("input");
    if( valor == PIEDRA && radio[TIJERA].checked ||
       valor == PAPEL && radio[PIEDRA].checked ||
      valor == TIJERA && radio[PAPEL].checked)
       document.getElementById("resultado").innerHTML = 
          "Gana la máquina";
    else if (valor == PIEDRA && radio[PAPEL].checked ||
    valor == PAPEL && radio[TIJERA].checked ||
    valor == TIJERA && radio[PIEDRA].checked)
       document.getElementById("resultado").innerHTML = 
          "Gana el humano";
    else
       document.getElementById("resultado").innerHTML = 
          "Empate";
    }

 

El ejercicio hace uso de un temporizador para provocar en el usuario un mayor realismo.

A continuación presentamos el resto del código.

var PIEDRA=0;
  var PAPEL=1;
  var TIJERA=2;
  var contador,valor;
  var tmr=null;
  
  function Jugar()
   {
   contador=0;
   tmr=setInterval("CalcularJugada()",200);
   }
  
  function CalcularJugada()
   {
   document.getElementById("resultado").innerHTML="";
   valor=Math.floor(Math.random()*3);
   var imagen=document.getElementById("imagen");
   switch(valor)
   {
     case PIEDRA:
        imagen.src="imagenes/piedra.jpg";
        break;
     case PAPEL:
        imagen.src="imagenes/papel.jpg";
        break;
     case TIJERA:
        imagen.src="imagenes/tijera.jpg";
        break;
   }
   contador++;
   if (contador==20)
    {
    clearInterval(tmr);
    VisResultados();
    }  
   }
 

Para bajarse el ejercicio completo pulse aquí