Piedra papel Tijera con jQuery, en ciclos DAW y DAM

No es de extrañar que jQuery sea una de las librerías más utilizadas para la web. Su gran potencia, facilidad de aprendizaje y legibilidad hacen de ella una herramienta muy atractiva aunque peligrosa si no se usa moderadamente.

La librería jQuery permite manipular un documento html de forma simple creando nuevos tags o modificando sus estilos permitiendo seleccionar cualquier elemento del HTML a partir de selectores CSS. Con la sintaxis JSON establecemos las propiedades de las funciones de jQuery para modificar la web a nuestro antojo.

Utilizando éstas tecnologías web junto con la programación básica en JavaScript, se ha  programado el juego de Piedra, Papel, Tijera en un entorno web, obteniendo un código legible y comprensible. El ejercicio lo encontraréis dividido en

1-ESTRUCTURA HTML

2-INICIAR EL JUEGO

3-EL PRIMER JUGADOR SELECCIONA PIEDRA|PAPEL|TIJERA

4-EL SEGUNDO JUGADOR SELECCIONA PIEDRA|PAPEL|TIJERA

5-ESTRUCTURA DE DATOS PARA CONOCER EL GANADOR

6-ANIMACIONES EN JQUERY

 

 

1-ESTRUCTURA HTML

Antes que nada, necesitamos el HTML para estructurar la parte visible:

<div id=”taulell”>

<div id=”jugador1″>

<h3>PLAYER 1</h3>

<img id=”rock1″ src=”rock.png” alt=”rock”/>

<img id=”paper1″ src=”paper.png” alt=”paper”/>

<img id=”scissor1″ src=”scissor.png” alt=”scissors”/>

</div>

<div  id=”resultats”>

<div>VS</div>

<div> <button id=”fight”>!FIGHT!</button> </div>

<div id=”player1Win”>PLAYER 1 WIN!</div>

<div id=”player2Win”>PLAYER 2 WIN!</div>

<div id=”draw”>DRAW</div>

</div>

<div  id=”jugador2″>

<h3>PLAYER 2</h3>

<img id=”rock2″ src=”rock.png” alt=”rock”/>

<img id=”paper2″ src=”paper.png” alt=”paper”/>

<img id=”scissor2″ src=”scissor.png” alt=”scissors”/>

</div>

</div>

 

2-INICIAR EL JUEGO

En el JS indicaremos con jQuery que una vez se haya cargado  la web queremos que al clicar sobre ¡FIGHT! se inicie el juego

$(document).ready(inicio);

function inicio() {

$(“#fight”).click(iniciarJuego);

}

Al inciar el juego cambiamos el color de fondo de PLAYER 1, ocultamos el botón ¡FIGHT! y las imágenes del segundo jugador.  Vinculamos con jQuery los eventos para qué al situar el ratón encima de cualquier imagen correspondiente con una opción se realice una animación  y que si se clica una opción del primer jugador, se seleccione la opción clicada.

function iniciarJuego() {

$(“#jugador1>h3”).css({“backgroundColor“: “blue”});

 

$(“#fight,#jugador2>img”).hide();

 

$(“#jugador1>img,#jugador2>img”).mouseenter(animarOpcion);

//animarOpcion lo veremos al final

$(“#jugador1>img”).click(selecionaJugador);

}

 

3-EL PRIMER JUGADOR SELECCIONA PIEDRA|PAPEL|TIJERA

Al clicar una opción para el primer jugador lo primero que hacemos es almacenar en una variable global el id correspondiente con la opción clicada (gracias a ésta id más adelante podremos saber quién gana).  Seguidamente detenemos todas las animaciones y ocultamos las imágenes correspondientes al primer jugador y mostramos las imágenes de las opciones del segundo jugador. Cambiamos el color de fondo de los títulos para saber a qué jugador le toca jugar y añadimos un evento para qué al clicar en el 2n jugador se seleccione la opción clicada.

 

var opcionJugador1;

function selecionaJugador() {

opcionJugador1 = $(this).attr(“id”);

 

$(“#jugador1>img”).off().hide();

$(“#jugador2>img”).show();

 

$(“#jugador1>h3”).css({“backgroundColor“: “transparent”});

$(“#jugador2>h3”).css({“backgroundColor“: “blue”});

 

$(“#jugador2>img”).click(seleccionaJugador2);

}

 

4-EL SEGUNDO JUGADOR SELECCIONA PIEDRA|PAPEL|TIJERA

Al clicar en una opción del 2o jugador obtenemos de nuevo la opción clicada a partir de su atributo id. Ocultamos a continuación las opciones del 2º jugador, obtenemos quién ha ganado y mostramos el mensaje del ganador correspondiente así como las opciones que han seleccionado.

 

 function seleccionaJugador2() {

var opcionJugador2 = $(this).attr(“id”);

$(“#jugador2>img”).hide();

 

//para saber el ganador utilizamos una estructura de datos

    var ganador = resultats[opcionJugador1][opcionJugador2];

 

//mostramos quien ha ganado y las opciones seleccionadas

$(“#” + ganador).fadeIn();

$(“#” + opcionJugador1).show();

$(“#” + opcionJugador2).show();

}

 

5-ESTRUCTURA DE DATOS PARA CONOCER EL GANADOR

Como hemos visto, el ganador lo obtenemos con la siguiente sentencia:

var ganador = resultats[opcionJugador1][opcionJugador2];

 

Cuando necesitamos conocer las relaciones entre distintos datos la estructura de datos en la que los almacenamos nos puede ahorrar código de programación organizando los datos según sus interrelaciones. Por ejemplo, si queremos saber quién es el ganador en un juego de piedra/papel/tijera, podemos estructurar todas las posibles combinaciones y sus resultados en una tabla:

Piedra jugador1 Papel jugador1 Tijeras jugador 1
Piedra jugador 2 Empate Jugador 1 gana Jugador 2 gana
Papel jugador 2 Jugador 2 gana Empate Jugador 1 gana
Tijeras jugador2 Jugador 1 gana Jugador 2 gana Empate

 

En el ejercicio, hemos representado ésta  estructura de datos utilizando notación JSON:

var resultats = {rock1: {rock2: “draw”,

paper2: “player2Win”,

scissor2: “player1Win”

},

paper1: {rock2: “player1Win”,

paper2: “draw”,

scissor2: “player2Win”

},

scissor1: {rock2: “player2Win”,

paper2: “player1Win”,

scissor2: “draw”

}

};

A partir de la estructura anterior, si queremos conocer quién es el ganador cuando opcionJugador1 = “rock1” y opcionJugador2 = “scissor2” , obtendremos que el ganador es “player1Win” .

var ganador = resultats[opcionJugador1][opcionJugador2];

6-ANIMACIONES EN JQUERY

En éste ejercicio queríamos utilizar jQuery para que al situar el ratón encima de una imagen correspondiente a una opción (piedra|papel|tijera) se animaran las imágenes de forma distinta. En concreto la imagen con el ratón encima ha de aumentar su tamaño y el resto lo han de disminuir.

Una posible solución consiste en primero seleccionar las imágenes hermanas de la que tenga el ratón encima, detener sus animaciones y  animarlas para reducir su tamaño. Y después animar la imagen con el ratón encima para que aumente su tamaño.

Con $(this) obtenemos el elemento que ha lanzado el evento (en éste caso, la imagen con el ratón encima), con .siblings(“img”) obtenemos sus imágenes hermanas, con .stop() detenemos la animación que tenga y con .animate() realizamos una nueva animación.

 

function animarOpcion() {

$(this).siblings(“img”)

.stop()

.animate({“width“: “100px”, “height“: “100px”}

, {duration: 1000});

 

$(this).animate({“width“: “140px”, “height“: “140px”}

, {duration: 1000});

}

 

 

 

Musica del video: You’re Magic by Soft and Furious is licensed under a CC0 1.0 Universal License.

http://freemusicarchive.org/music/Soft_and_Furious/Best_Of__Pick_Your_Player/Soft_and_Furious_-_Best_Of_-_Pick_Your_Player_-_12_Youre_Magic

 

Acerca del autor