Programación de un Juego de Piedra, Papel o Tijera en JavaScript

Clase 13 de 84 • Curso Gratis de Programación Básica

Clase anteriorSiguiente clase

Resumen

Ya tenemos un juego funcional de piedra papel o tijera, pero ¿qué tal si lo cambiamos para que gane el mejor de tres partidas?

Fundamentos para la práctica

Antes de empezar a hacer modificaciones, repasemos los fundamentos que te permitirán hacerlo:

Operadores de comparación en JavaScript

Hay algunos operadores que te ayudarán a escribir condiciones en tu código:

Operador Significado
== Retorna “verdadero” si un lado es igual al otro (Ojo, NO distingue entre números y strings. Por lo tanto: 3 == “3” //verdadero).
=== Retorna “verdadero” si un lado es estrictamente igual al otro (Ojo, SÍ distingue entre números y strings. Por lo tanto: 3 === “3” //falso).
!= Retorna “verdadero” si un lado es diferente del otro lado (Ojo, NO distingue entre números y strings. Por lo tanto: 3 != “3” //falso).
!== Retorna “verdadero” si un lado es estrictamente diferente del otro lado (Ojo, SÍ distingue entre números y strings. Por lo tanto: 3 != “3” //verdadero).
&& Funciona como un “y” en la condición. Te permite juntar varias condiciones y devuelve “verdadero” solo si todas se cumplen.
< Devuelve “verdadero” si el valor a la izquierda es menor que el valor a la derecha.
<= Devuelve “verdadero” si el valor a la izquierda es menor o igual que el valor a la derecha.
> Devuelve “verdadero” si el valor a la izquierda es mayor que el valor a la derecha.
>= Devuelve “verdadero” si el valor a la izquierda es mayor o igual que el valor a la derecha.

💡 También tienes el operador ||, que funciona como un “o” en la condición. Te permite juntar varias condiciones, y devuelve “verdadero” si alguna de ellas se cumple.

No pudimos incluirlo en la tabla por un problema técnico, pero sientete libre de usarlo también 👍

💡 Aquí te dejo un fragmento de código que puedes copiar y pegar en la consola del navegador. Solo cambia la condición y los operadores para que experimentes como funciona cada operador 👍

if ( X == Y ) {
	console.log( "Verdadero" );
} else {
	console.log( "Falso" );
}

Ciclos While en JavaScript

while es una instrucción en JavaScript (al igual que if) que te permite crear ciclos. Su estructura es la siguiente:

while ( condición ) {
    //Código a ejecutar mientras se cumpla la condición
}

Por ejemplo:

while ( diaDeLaSemana < 6 ) {
    irA( escuela );
    diaDeLaSemana = diaDeLaSemana + 1;
}

//El bloque de código se repetirá hasta que diaDeLaSemana = 6

anímate a experimentar un poco con esto, y luego acompáñame a realizar la práctica de hoy 😉

Cómo implementar ciclos en el juego de piedra, papel y tijera

Empecemos 😁

1. Agrega variables para contar las victorias

Primero agrega un par de variables que te permitan contar cuantas victorias, derrotas y empates ha acumulado el jugador. Y también necesitas modificar el juego para que el jugador los acumule con cada partida.

Para que el juego no se sienta tan largo vamos a detenerlo luego de 2 victorias o 2 derrotas. Así que es buena idea programar una función que le informe al jugador los resultados finales, y podrías agregar una segunda función que reinicie las variables para un próximo juego.

Intenta hacerlo por tu cuenta, y cuando termines compáralo con el ejemplo de aquí abajo 🙂

//FUNCIÓN PARA LAS ALERTAS
function alertaDeElecciones( quienElije , eleccion ) {
    if ( eleccion == 1 ) {
        alert( "El " + quienElije + " eligió 🥌" );
    } else if ( eleccion == 2 ) {
        alert( "El " + quienElije + " eligió 📄" );
    } else if ( eleccion == 3 ) {
        alert( "El " + quienElije + " eligió ✂️" );
    } else {
        alert( "Hubo un error con la elección del " + quienElije + " 🙃" );
    }
}

//FUNCIÓN PARA GENERAR NÚMEROS ALEATORIOS
function numeroAleatorio( min , max ) {
    return Math.floor( Math.random() * ( max - min + 1 ) + min );
}

//FUNCIÓN PARA DECIDIR EL GANADOR
function quienGanaEntre ( eleccionJugador , eleccionOponente ) {
    if ( eleccionJugador == eleccionOponente ) {
        alert( "¡EMPATE! 🤼" );
        empates = empates + 1;
    } else if ( eleccionJugador == 1 && eleccionOponente == 3 ) {
        alert( "¡GANASTE! 🥳" );
        victorias = victorias + 1;
    } else if ( eleccionJugador == 2 && eleccionOponente == 1 ) {
        alert( "¡GANASTE! 🥳" );
        victorias = victorias + 1;
    } else if ( eleccionJugador == 3 && eleccionOponente == 2 ) {
        alert( "¡GANASTE! 🥳" );
        victorias = victorias + 1;
    } else {
        alert( "PERDISTE... 😢" );
        derrotas = derrotas + 1;
    }
}

//FUNCIÓN PARA NOMBRAR AL GANADOR FINAL
function mostrarResultados() {
    alert("Has acumulado " + 
        victorias + " victorias, " + 
        derrotas + " derrotas y " + 
        empates + " empates.");

    if ( victorias == 2 ) {
        alert( "TÚ eres el GANADOR" );
        resetearVariables();
    } else if ( derrotas == 2 ) {
        alert( "EL COMPUTADOR es el GANADOR" );
        resetearVariables();
    } else {
        alert( "Hubo un error... 🙃");
        resetearVariables();
    }
}

//FUNCIÓN PARA RESETEAR VARIABLES DE VICTORIAS
function resetearVariables() {
    victorias = 0;
    derrotas  = 0;
    empates   = 0;
}

//ELECCIÓN DEL JUGADOR
let eleccionDelJugador = 0;
eleccionDelJugador = prompt( "Elige: 1 para 🥌, 2 para 📄, 3 para ✂️" );
alertaDeElecciones( "jugador" , eleccionDelJugador );

//ELECCIÓN DEL COMPUTADOR
let eleccionDelComputador = numeroAleatorio( 1 , 3 );
alertaDeElecciones( "computador" , eleccionDelComputador );

//DECIDIENDO EL GANADOR
let victorias = 0;
let derrotas  = 0;
let empates   = 0;
quienGanaEntre ( eleccionDelJugador , eleccionDelComputador );

2. Implementa el ciclo “while”

Es momento de implementar el ciclo en tu código. Para hacerlo, ten presente la siguiente información:

  • El juego se detiene cuando el jugador acumule dos victorias o dos derrotas.
  • La elección del jugador y del computador debe repetirse en cada ciclo.
  • Al completar el ciclo, debes mostrarle los resultados al jugador y resetear las variables de juego.

Hacer esto requiere que muevas algunas cosas dentro del código. Intenta hacerlo por tu cuenta, y luego lo comparas con el código aquí abajo 😉

//FUNCIÓN PARA LAS ALERTAS
function alertaDeElecciones( quienElije , eleccion ) {
    if ( eleccion == 1 ) {
        alert( "El " + quienElije + " eligió 🥌" );
    } else if ( eleccion == 2 ) {
        alert( "El " + quienElije + " eligió 📄" );
    } else if ( eleccion == 3 ) {
        alert( "El " + quienElije + " eligió ✂️" );
    } else {
        alert( "Hubo un error con la elección del " + quienElije + " 🙃" );
    }
}

//FUNCIÓN PARA GENERAR NÚMEROS ALEATORIOS
function numeroAleatorio( min , max ) {
    return Math.floor( Math.random() * ( max - min + 1 ) + min );
}

//FUNCIÓN PARA DECIDIR EL GANADOR
function quienGanaEntre ( eleccionJugador , eleccionOponente ) {
    if ( eleccionJugador == eleccionOponente ) {
        alert( "¡EMPATE! 🤼" );
        empates = empates + 1;
    } else if ( eleccionJugador == 1 && eleccionOponente == 3 ) {
        alert( "¡GANASTE! 🥳" );
        victorias = victorias + 1;
    } else if ( eleccionJugador == 2 && eleccionOponente == 1 ) {
        alert( "¡GANASTE! 🥳" );
        victorias = victorias + 1;
    } else if ( eleccionJugador == 3 && eleccionOponente == 2 ) {
        alert( "¡GANASTE! 🥳" );
        victorias = victorias + 1;
    } else {
        alert( "PERDISTE... 😢" );
        derrotas = derrotas + 1;
    }
}

//FUNCIÓN PARA NOMBRAR AL GANADOR FINAL
function mostrarResultados() {
    alert("Has acumulado " + 
        victorias + " victorias, " + 
        derrotas + " derrotas y " + 
        empates + " empates.");

    if ( victorias == 2 ) {
        alert( "TÚ eres el GANADOR" );
        resetearVariables();
    } else if ( derrotas == 2 ) {
        alert( "EL COMPUTADOR es el GANADOR" );
        resetearVariables();
    } else {
        alert( "Hubo un error... 🙃");
        resetearVariables();
    }
}

//FUNCIÓN PARA RESETEAR VARIABLES DE VICTORIAS
function resetearVariables() {
    victorias = 0;
    derrotas  = 0;
    empates   = 0;
}

//ELECCIÓN DEL JUGADOR
let eleccionDelJugador = 0;

//ELECCIÓN DEL COMPUTADOR
let eleccionDelComputador = 0;

//DECIDIENDO EL GANADOR
let victorias = 0;
let derrotas  = 0;
let empates   = 0;

while ( victorias < 2 && derrotas < 2 ) {
    eleccionDelJugador    = prompt( "Elige: 1 para 🥌, 2 para 📄, 3 para ✂️" );
    eleccionDelComputador = numeroAleatorio( 1 , 3 );

    alertaDeElecciones( "jugador"    , eleccionDelJugador    );
    alertaDeElecciones( "computador" , eleccionDelComputador );

    quienGanaEntre ( eleccionDelJugador , eleccionDelComputador );
}

mostrarResultados();

Anímate a probarlo algunas veces y sientete orgulloso de lo que haz logrado 🥳 En el futuro te enseñaremos a crear un botón en tu sitio web que puedes configurar para que inicie el juego cuando alguien lo presione 🙂 Pero, mientras tanto, acompañame a aprender cómo funciona la estructura de archivos de un sitio web 😉

Contribución creada por: Jhonkar Sufia (Platzi Contributor).