EGALABS
¡Dedicados con pasión al diseño y programación web!

¡Déjanos tu email! te enviaremos los últimos artículos…

@

Piedra Papel o Tijera

Fecha: sábado 20, junio 2015  -  Categoria: JavaScript, Programación, Tutoriales

Comentarios: 0  -  Autor:

Hoy quería dejarles el script en JavaScript del clásico juego de piedra papel o tijera, con una interfaz HTML simple para poder jugarlo sin usar la función alert() de JavaScript.

En si mismo el algoritmo de este pequeño juego no es muy complicado, pero si lleva unas cuantas líneas de código, por lo cual puede sorprender a más de uno que recién empiece en esto de la programación.

Lo realicé hace algunos días matando el tiempo mientras hacía otras cosas y esperaba que se terminen, la verdad nunca me había interesado desarrollarlo pero son de esas cosas que se te ocurren cuando tienes tiempo muerto y no puedes hacer algo más productivo. Sinceramente a pesar de ser un juego pequeño y algoritmo muy simple, nunca dejo de ponerme feliz al ver a mi código funcionar correctamente, esa es una de las cosas que más me gustan en la programación y el diseño web, crear cosas y ver que funcionan por más simples que sean, no hay mayor satisfacción que la de crear algo que funciona.

Con respecto al código, el mismo puede ser simplificado un poco más, lo que los programadores llamamos optimizar el código, pero me pareció mejor dejarlo así para que aquellos que recién empiezan y todavía no entienden bien que es lo que está sucediendo en el mismo puedan interpretarlo sin mayor dificultad. Como siempre les voy a dejar el código comentado en aquí y lo van a poder descargar en un archivo zip de Medifire o 4shared.

Aunque simple no deja de ser interesante, espero les guste este juego de piedra papel tijera.

Primero el HTML

<!DOCTYPE html>
<html>
 <head>
  <title>Piedra papel Tijera</title>
  <meta content="text/html charset=utf-8" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- recuerden que la de abajo es una ruta relativa indica que style.css esta en la misma carpeta que juego.html -->
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <!-- recuerden que la de abajo es una ruta relativa indica que script.js esta en la misma carpeta que juego.html -->
  <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  <noscript>Este juego esta desarrollado en javascript necesita habilitarlo o tener un navegador que lo soporte.</noscript>
  <div class="container-fluid">
   <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"></div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 content">
     <h1>¡Juguemos a Piedra Papel Tijera!</h1>
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 opciones">
      <p>¡Bienvenido! elige una opción.</p>
      <div class="container-opciones">
       <form name="formElecciones">
        <label for="piedra">Piedra</label>
        <input type="radio" id="piedra" name="opciones" value="0" />
        <label for="papel">Papel</label>
        <input type="radio" id="papel" name="opciones" value="1" />
        <label for="tijera">Tijera</label>
        <input type="radio" id="tijera" name="opciones" value="2" />
       </form>
       <br>
       <a class="btn btn-primary" id="elegir" onclick="jugar();">Elegir</a>
       <h3>Tu elección fué:</h3>
       <h3><strong id="eleccion-usuario"></strong></h3>
      </div>
     </div>
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 maquina">
      <h3>La maquina eligio:</h3>
      <h3><strong id="eleccion-maquina"></strong></h3>
     </div>
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 resultado">
      <h2 id="resultado-final"></h2>
     </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"></div>
   </div>
  </div>
 </body>
</html>

Después el script de JavaScript

// creamos la funcion jugar que es la que llamaremos desde el boton elegir dentro del atributo onclick.
// hay otras maneras de hacerlo pero por ahora usaremos ese atributo tan simple aunque los puristas digan que ensuciamos el html.
function jugar()
{
  /* declaramos las variables que usaremos trate de ser los más claro posible en sus nombres para que se entienda que hacen.
  en las variables solo almacenamos valores, la primera a la vez que se declara se le asignan valores convirtiendola en un array o vector unidimensional.
  no se preocupen si no entienen ahora que es un array. A las dos últimas solo se las declara pero no se asigna ningún valor a ellas, por el momento. */
  var opciones=["Piedra","Papel","Tijera"];
  var eleccion;
  var eleccionMaquina;

  /* Esta es una sentencia condicional para evaluar que radio button esta seleccionado. */
  if(document.formElecciones.opciones[0].checked)
  {
    /* Si esta seleccionado el primero, que es piedra, le asignamos a la variable eleccion el valor 0. Recuerden que en programación todo esta indexado a 0 por lo cual
    la cuenta empieza siempre por 0. */
    eleccion=0;
    /* Con esta propiedad seguimos la ruta del DOM y utilizamos innerText para escribir la opción en el elemento html con id eleccion-usuario fijense que pasamos el
    array opciones y como parametro para determinar que elemento queremos traer le pasamos la variable elección que tiene valor 0 por lo cual nos devolvera el primer
    elemento del array que sería piedra. */
    document.getElementById('eleccion-usuario').innerText=opciones[eleccion];
    /* Luego creamos una variable usuario y le asignamos dicho valor. La declae ahora para que vean que no es necesario declararlas al principio, también se pueden
    declarar aquí pero es una buena practica declarar todas las variables que utilizaremos al principio de todo el código. */
    var usuario=opciones[eleccion];
  }
  /* Esto es un sino, es decir sino es lo primero entonces evaluamos si esta elegida la opcion uno que sería papel, algo a tener en cuenta es que javascript trata a los
  elementos del DOM, que tienen el mismo nombre como arrays, es decir hace lo mismo que hicimos arriba con nuestra variable opciones. */
  else if(document.formElecciones.opciones[1].checked)
  {
    /* Sucede lo mismo que arriba asignamos a eleccion el valor 1 y escribimos en el elemento html con id elección-usuario y asignamos el valor a usuario. */
    eleccion=1;
    document.getElementById('eleccion-usuario').innerText=opciones[eleccion];
    var usuario=opciones[eleccion];
  }
  /* Nuevamente un sino con los mismo pasos explicados anteriormente. */
  else if(document.formElecciones.opciones[2].checked)
  {
    eleccion=2
    document.getElementById('eleccion-usuario').innerText=opciones[eleccion];
    var usuario=opciones[eleccion];
  }
  /* le último sino que por si el usuario hace click en el boton elegir sin haber seleccionado una opción. */
  else
  {
    alert("No has seleccionado ninguna opcion :(");
  }

  /* Creamos una funcion que cree un numero aleatorio esto es javascript puro, por decirlo de laguna manera; lo pueden encontrar en

                  " https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/random "

  aquí veran que esto es una ecuación matemática, la funcion random() genera un numero aleatorio entre 0 y 1, la funcion floo() redondea ese numero hacia abajo, es
  decir 2.9 lo convierte en 2. En la ecuación que veran en la página que les deje, veran que no suman 1 como lo hacemos aquí eso es porque la equación brindará un
  numero aletorio entre el mínimo incluido y el máximo excluido, es decir si nosotros necesitamos un numeor aleatorio entre 0 y 2 tendríamos que pasarle como minimo 0 y como máximo 3 para que se mantenga en ese rango, como esto puede ser confuso lo que hacemos es pasarle 0 y 2 pero dentro de la ecuación sumarle 1 para que se mantenga
  dentro de ese rango (0 y 2) porque de otra manera nos excluiría el dos y dario un numero aleatorio entre 0 y 1. */
  function aleatorio(min, max)
  {
    var alea=Math.floor(Math.random()*(max-min+1)+min);
    /* devolvemos la variable */
    return alea;
  }

  /* Creamos la eleción de la maquina, le asignamos a la varible elección máquina el valor de opciones con la funcion aleatorio(0,2) pasandole como valor mínimo el 0 y
  máximo el 2 */
  eleccionMaquina=opciones[aleatorio(0,2)];
  /* Escribimos la elección de la maquina en el elemento html con id eleccion-maquina */
  document.getElementById('eleccion-maquina').innerText=eleccionMaquina;

  /* ahora construimos la lógica del juego
  Si la eleccion de la maquina es igual a  opciones[0] que es piedra entramos en este bloque: */
  if(eleccionMaquina == opciones[0])
  {
    /* Ahora evaluamos la opción del usuario, si es igual a opciones[0] obviamente los dos eligieron la misma opción, o sea piedra por lo cual empataron. */
    if(usuario == opciones[0])
    {
      /* Escribimos el mensaje en el elemento html con id resultado-final */
      document.getElementById('resultado-final').innerText="Empataron";
    }
    /* Si el usuario no eligio piedra entonces se evalua la siguiente opción y asi sucesivamente con todas las opciones */
    else if(usuario == opciones[1])
    {
      document.getElementById('resultado-final').innerText="Ganaste :)";
    }
    else if(usuario == opciones[2])
    {
      document.getElementById('resultado-final').innerText="Perdiste :(";
    }
    /* Si no eligió ninguna opción mostramos el siguiente mensaje. */
    else
    {
      document.getElementById('resultado-final').innerText="No dejes a la maquina jugando sola :(";
    }
  }
  /* Evaluamos la siguiente posible opción de la maquina y si devuelve verdadero entramos en su bloque con las correspondientes evaluaciones de la opción del usuario. */
  else if(eleccionMaquina == opciones[1])
  {
    if(usuario == opciones[0])
    {
      document.getElementById('resultado-final').innerText="Perdiste :(";
    }
    else if(usuario == opciones[1])
    {
      document.getElementById('resultado-final').innerText="Empataron";
    }
    else if(usuario == opciones[2])
    {
      document.getElementById('resultado-final').innerText="Ganaste :)";
    }
    else
    {
      document.getElementById('resultado-final').innerText="No dejes a la maquina jugando sola :(";
    }
  }
  /* Ultima posible opción de la maquina, como no es posible otra más aquí podriamos poner solo un else{} pero para que quedara todo claro decidí usar el else if(){}
  y omitimos el else{} porque no es posible que la maquina no elija nada en este algoritmo que hemos creado. */
  else if(eleccionMaquina == opciones[2])
  {
    if(usuario == opciones[0])
    {
      document.getElementById('resultado-final').innerText="Ganaste :)";
    }
    else if(usuario == opciones[1])
    {
      document.getElementById('resultado-final').innerText="Perdiste :(";
    }
    else if(usuario == opciones[2])
    {
      document.getElementById('resultado-final').innerText="Empataron";
    }
    else
    {
      document.getElementById('resultado-final').innerText="No dejes a la maquina jugando sola :(";
    }
  }
  /* con esto terminamos todo nuestro script en javascript del algoritmo del juego de piedra papael tijera, tal vez más adelante actualice el post y les deje el
  diagrama de flujo del algoritmo para que entiendan como se analiza el problema en una primera instancia y luego en base a dicho diagrama donde expresamos nuestro
  nuestro algoritmo se procede a programarlo en el lenguaje de programación que más nos guste o que se requiera para el caso en cuestión. Saludos */
}

Por último el CSS

/* Algunos estilos para que la interfas de la aplicacion web no quede tan fea
Los demás estilos se los da bootstrap */

body
{
 color: rgb(85,85,85);
 background-color: rgb(175,180,225);
 font-size: 18px;
}
body .container-fluid .row .content
{
 text-align: center;
}
body .container-fluid .row .content .opciones p
{
 display: inline-block;
}
h1
{
 text-align: center;
}
body .container .opciones button
{
 border-radius: 4px;
 box-shadow: 1px 1px 5px rgb(60,60,60);
 padding: 3px 10px;
}

Por el momento esto sería todo, les pido disculpas por no haber escrito ningún post estas últimas dos semanas, he estado terminando con el semestre en la facultad y ocupado con el trabajo, pero pienso recompensarlos en esta semana.

Me despido como siempre deseándoles éxito en todos sus proyectos. Recuerden dejarnos sus comentarios abajo o en nuestra página de facebook o en twitter comentando que les pareció el articulo.

El zip para descargar

Mediafire 4Shared

Éxitos.

Diego Zapata
Fundador y diseñador Web de El Galeón Argentino
Hola ¿cómo estás?, antes que nada gracias por visitarnos, espero que hayas encontrado lo que buscabas.
Como dice más arriba soy el fundador de “El Galeón Argentino”, se fundó en el año 2012 como una idea loca que tenía en la mente y hasta la fecha nos ha ido muy bien y nos hemos desarrollado mucho.
Lo que nos ayuda a crecer y mejorar cada día es que nos encanta lo que hacemos; aprovechando la ocasión te adelanto que nos encantaría trabajar contigo en algún proyecto que tengas en mente, por más loco que sea, y hacerlo realidad, pues no hay nada más lindo que ver como las ideas toman forma.
Espero que tanto nuestras publicaciones como los tutoriales que subimos a nuestro canal en YouTube sean de tu agrado pero sobre todo de mucha utilidad y valor.
Creo que no queda nada más por agregar, salvo recordarte que nos encantaría volver a saber de ti y sobre todo trabajar juntos como un equipo en el proyecto que tengas, hasta ese momento me despido deseándote mucho éxito en tus proyectos.

Los comentarios en este artículo están cerrados

El Galeón en Facebook

Copyright © 2012 - 2015 elgaleonargentino.com.ar - Todos los derechos reservados.