CursosEmpresasBlogLiveConfPrecios

Programación de Piedra, Papel o Tijera en JavaScript

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

Clase anteriorSiguiente clase
Resumen

Ya construimos la base de nuestro juego de piedra, papel o tijera. Ahora pongámoslo a funcionar. Esta es la segunda parte del ejercicio de programar un juego de piedra, papel o tijera que planteamos la clase anterior. Visita la clase si deseas ver cómo llegamos hasta aquí 😉

¿Dónde nos quedamos?

Aquí nos quedamos. Compáralo con tu código, o construye el tuyo para continuar la clase 🙂

💡 Ojo, no copies y pegues si no lo has hecho aún. Al contrario, aprovecha la oportunidad para practicar 😉

Sin embargo, si tienes problemas para visualizarlo por el tamaño de la ventana, prueba copiandolo y pegandolo en un archivo HTML diferente al tuyo en Visual Studio Code. Ahí deberías poder verlo bien 👍

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Algoritmo piedra, papel o tijera</title>
        <script>
            //OBTENIENDO LA ELECCIÓN DEL JUGADOR
            let eleccionDelJugador = 0;
            eleccionDelJugador = prompt( "Elige: 1 para piedra, 2 para papel, 3 para tijera" );
            // alert( "Elegiste " + jugador );

            //INFORMANDO LA ELECCIÓN DEL JUGADOR
            if ( eleccionDelJugador == 1 ) {
                alert( "Elegiste piedra" );
            } 
            else if ( eleccionDelJugador == 2 ) {
                alert( "Elegiste papel" )
            } 
            else if ( eleccionDelJugador == 3 ) {
                alert( "Elegiste tijera" )
            } 
            else {
                alert( "Elegiste otra cosa, así no puedes jugar >-<" )
            }
        </script>
    </head>
    <body>
        <h1>Piedra, papel o tijera</h1>
    </body>
</html>

La elección de la computadora

Necesitamos un oponente para este juego, así que primero debemos trabajar en la elección de la computadora.

Lógico quieres que la computadora elija una opción al azar para el juego. Pero eso lo construiremos en la clase de aleatoriedad 😉 Mientras tanto, usa comentarios y espacios para crear un apartado dónde escribiremos este código más tarde; y escribe en una línea que la computadora. Elige una de las tres opciones (puede ser la que tú quieras, con los números que empleamos para la elección del jugador).

¿Ya lo hiciste? Inténtalo por tu cuenta, y luego compáralo con el código aquí abajo 😉

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Algoritmo piedra, papel o tijera</title>
        <script>
            //OBTENIENDO LA ELECCIÓN DEL JUGADOR
            let eleccionDelJugador = 0;
            eleccionDelJugador = prompt( "Elige: 1 para piedra, 2 para papel, 3 para tijera" );
            // alert( "Elegiste " + jugador );

            //INFORMANDO LA ELECCIÓN DEL JUGADOR
            if ( eleccionDelJugador == 1 ) {
                alert( "Elegiste piedra" );
            } 
            else if ( eleccionDelJugador == 2 ) {
                alert( "Elegiste papel" )
            } 
            else if ( eleccionDelJugador == 3 ) {
                alert( "Elegiste tijera" )
            } 
            else {
                alert( "Elegiste otra cosa, así no puedes jugar >-<" )
            }

            //OBTENIENDO LA ELECCIÓN DEL COMPUTADOR
            let eleccionDelComputador = 1;
			
        </script>
    </head>
    <body>
        <h1>Piedra, papel o tijera</h1>
    </body>
</html>

Anunciando la elección del computador

Antes de proceder, planteemos un momento como queremos que se produzca el juego:

  1. El juego pide su elección al jugador, y luego le informa cuál fue su elección.
  2. El juego asigna una elección a la computadora, y luego le informa al jugador la elección de la computadora.
  3. El juego evalúa ambas elecciones, decide el ganador, y muestra un mensaje informando el veredicto.

Por lo tanto, ahora que la computadora ya eligió, crea un apartado que informe la elección de la computadora con un alert() 🙂 crea un apartado para esto, y recicla el código que usaste para informar la elección del jugador para que muestre ahora la elección del computador 😉

💡 ¡Por cierto! También puedes usar emojis en los mensajes. Puedes utilizarlos desde la emojipedia o, si estás en windows, puedes pulsar Win+”.” para abrir la ventana de emojis 🙂

Hazlo tú y pruébalo en el navegador para validar que esté funcionando bien. Luego compáralo con el código de abajo antes de continuar 😉

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Algoritmo piedra, papel o tijera</title>
        <script>
            //OBTENIENDO LA ELECCIÓN DEL JUGADOR
            let eleccionDelJugador = 0;
            eleccionDelJugador = prompt( "Elige: 1 para 🥌, 2 para 📄, 3 para ✂️" );
            // alert( "Elegiste " + jugador );

            //INFORMANDO LA ELECCIÓN DEL JUGADOR
            if ( eleccionDelJugador == 1 ) {
                alert( "Elegiste 🥌" );
            } 
            else if ( eleccionDelJugador == 2 ) {
                alert( "Elegiste 📄" )
            } 
            else if ( eleccionDelJugador == 3 ) {
                alert( "Elegiste ✂️" )
            } 
            else {
                alert( "Elegiste otra cosa, así no puedes jugar 😣" )
            }

            //OBTENIENDO LA ELECCIÓN DEL COMPUTADOR
            let eleccionDelComputador = 1;
			
            //INFORMANDO LA ELECCION DEL COMPUTADOR
            if ( eleccionDelComputador == 1 ) {
                alert( "La computadora eligió 🥌" );
            } 
            else if ( eleccionDelComputador == 2 ) {
                alert( "La computadora eligió 📄" )
            } 
            else if ( eleccionDelComputador == 3 ) {
                alert( "La computadora eligió ✂️" )
            } 
            else {
                alert( "Cometí un error programando la elección del computador 🙃" )
            }
			
        </script>
    </head>
    <body>
        <h1>Piedra, papel o tijera</h1>
    </body>
</html>

¿Quién gana y quién pierde?

Crea un nuevo apartado para saber si ganas o pierdes. Allí debes escribir condiciones para evaluar:

  • Cuándo empatas.
  • Cuándo ganas.
  • Cuándo pierdes.

Luego de evaluar esto, utiliza un alert() para informarle al jugador si ganó, empató o perdió 👍

💡 Ojo, puedes evaluar varias condiciones a la vez en un solo if si separas las condiciones con un &&. Por ejemplo:

if ( eleccionDelJugador = 1 && eleccionDelComputador = 3 ) {
    alert( "¡GANASTE! 🥳" );
}

Empieza escribiendo la condición de empate (que es la más fácil) y luego escribe las demás. Inténtalo, pruébalo en el navegador, cambia la elección del computador para validar que en serio todo funciona, y luego compara tu código con el ejemplo de abajo 👍

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Algoritmo piedra, papel o tijera</title>
        <script>
            //OBTENIENDO LA ELECCIÓN DEL JUGADOR
            let eleccionDelJugador = 0;
            eleccionDelJugador = prompt( "Elige: 1 para 🥌, 2 para 📄, 3 para ✂️" );
            // alert( "Elegiste " + jugador );

            //INFORMANDO LA ELECCIÓN DEL JUGADOR
            if ( eleccionDelJugador == 1 ) {
                alert( "Elegiste 🥌" );
            } 
            else if ( eleccionDelJugador == 2 ) {
                alert( "Elegiste 📄" )
            } 
            else if ( eleccionDelJugador == 3 ) {
                alert( "Elegiste ✂️" )
            } 
            else {
                alert( "Elegiste otra cosa, así no puedes jugar 😣" )
            }

            //OBTENIENDO LA ELECCIÓN DEL COMPUTADOR
            let eleccionDelComputador = 1;
			
            //INFORMANDO LA ELECCION DEL COMPUTADOR
            if ( eleccionDelComputador == 1 ) {
                alert( "La computadora eligió 🥌" );
            } 
            else if ( eleccionDelComputador == 2 ) {
                alert( "La computadora eligió 📄" )
            } 
            else if ( eleccionDelComputador == 3 ) {
                alert( "La computadora eligió ✂️" )
            } 
            else {
                alert( "Cometí un error programando la elección del computador 🙃" )
            }
			
            //DECIDIENDO EL GANADOR
            if ( eleccionDelJugador == eleccionDelComputador ) {
                alert( "¡EMPATE! 🤼" );
            }
            else if ( eleccionDelJugador == 1 && eleccionDelComputador == 3 ) {
                alert( "¡GANASTE! 🥳" );
            }
            else if ( eleccionDelJugador == 2 && eleccionDelComputador == 1 ) {
                alert( "¡GANASTE! 🥳" );
            }
            else if ( eleccionDelJugador == 3 && eleccionDelComputador == 2 ) {
                alert( "¡GANASTE! 🥳" );
            }
            else {
                alert( "PERDISTE... 😢" );
            }

        </script>
    </head>
    <body>
        <h1>Piedra, papel o tijera</h1>
    </body>
</html>

¿Te divertiste?

Existen muchos caminos para llegar a la misma solución. Puedes abordar el problema de varias formas y personalizarlo a tu gusto. Si te dio error en algún lado, no te preocupes. Resolver errores en el código es la mitad del trabajo de un programador. Desarrolla tu tolerancia a la frustración, y tómalo como parte del oficio.

Experimenta un poco con tu código, personalízalo y cuando estés listo continúa a la clase de aleatoriedad para que aprendas a hacer que la computadora elija por si misma lo que va a jugar 😁

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