ElTicus.com

Programación, lenguajes y recursos para programadores

**
Recurso no clasificado
Implementaci贸n del juego: Piedra papel o Tijeras en Javascript / Html
Programaci贸n b谩sica
Publicado por Fecha: 2015-08-12 00:00:00 Idioma: Espa帽ol Tipo de documento: C贸digo fuente

Iniciamos el programita con las cabeceras correspondientes a cualquier documento HTML con Javascript.

<html>
<head>
<meta charset="utf-8" />
<title>Piedra, papel o tijera (if)</title>
<script type="text/javascript">

Seguimos con las variables que son globales.

var opciones=["Piedra","Papel","Tijeras"];
var marcadorUsuario=0;
var marcadorMaquina=0;

La siguiente funci贸n realiza toda la labor de generar el valor elegido por la computadora, lo compara con el del usuario (el cual recibe como par谩metro) e imprime el resultado.

function calcular(valor){
var aleatorio;
var divresulado;
var piedra=0;
var papel=1;
var tijera=2;
var gana = "<span style='color:green;'> Ganaste </span>";
var pierde = "<span style='color:red;'> Perdiste </span>";
var empata = "<span style='color:blue;'> Empate </span>";

aleatorio=Math.floor(Math.random()*3);
divresulado=document.getElementById("resultado");
divmarcador=document.getElementById("marcador");
mensaje="";

var opcionUsuario=valor;
var opcionMaquina=aleatorio;

mensaje +="<div>Elegiste <b>" + opciones[opcionUsuario]+"</b></div>";
mensaje +="<div>La m谩quina eligi贸 <b>"+ opciones[opcionMaquina]+"</b></div>";

mensaje +="<div style='font-size:1.3em; padding:10px;'>";
//-----Evaluamos las elecciones------
if(opcionUsuario==piedra)
{
if(opcionMaquina==piedra)
{
mensaje += empata;
}
if(opcionMaquina==papel)
{
mensaje += "La piedra pierde ante el papel" + pierde;
marcadorMaquina++;
}
if(opcionMaquina==tijera)
{
mensaje += "La piedra rompe las tijeras" + gana;
marcadorUsuario++;
}
}

if(opcionUsuario==papel)
{
if(opcionMaquina==piedra)
{
mensaje += "El papel envuelve a la piedra" + gana;
marcadorUsuario++;
}
if(opcionMaquina==papel)
{
mensaje += empata;
}
if(opcionMaquina==tijera)
{
mensaje += "El papel pierde ante las tijeras" + pierde;
marcadorMaquina++;
}
}

if(opcionUsuario==tijera)
{
if(opcionMaquina==piedra)
{
mensaje += "Las tijeras pierden ante la piedra" + pierde;
marcadorMaquina++;
}
if(opcionMaquina==papel)
{
mensaje += "Las tijeras cortan el papel" + gana;
marcadorUsuario++;
}
if(opcionMaquina==tijera)
{
mensaje += empata;
}
}
mensaje +="</div>";

//--- imprimimos resultados----
divresulado.innerHTML=mensaje;
divmarcador.innerHTML="<div>Marcador: M谩quina <b>"+ marcadorMaquina +"</b> - <b>"+ marcadorUsuario +"</b> Usuario </div>";

}

Finalemnte cerramos el script y ponemos el HTML correspondiente al formulario de opciones y los contenedores de los mensajes de resultados (div id="resultado" y div id="marcador").

</script>
</head>

<body>
<h3>Juego de piedra, papel o tijera en javascript</h3>
<p>El sistema utiliza un generador aleatorio para hacer su eleccin</p>
<p>La computadora ya eligi su opcin, Qu eliges t?</p>
<p><input type="button" id="0" name="piedra" value="Piedra" onClick="calcular(0);"> 
 <input type="button" id="1" name="papel" value="Papel" onClick="calcular(1);"> 
 <input type="button" id="2" name="tijeras" value="Tijeras" onClick="calcular(2);"></p>
<br />
<div id="resultado"></div>

<div id="marcador"></div>

</body>
</html>



Si quieres ver el resultado completo funcionando, haz
Click Aqu铆




Hay 1 comentarios sobre este tema por parte de los lectores


Haz un comentario sobre este tema
Nombre email (no se muestra)
comentario:
Escribe las 2 letras que ves aqu: Imagen anti-spam =

Comentarios de parte de los lectores: