CursosEmpresasBlogLiveConfPrecios

Programación de Piedra, Papel o Tijera en JavaScript

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

Resumen

Ahora que conoces lo más básico de programar ¿te animas a crear un pequeño juego de piedra papel o tijera con tu navegador?

Esta clase requiere que sepas lo fundamental sobre crear archivos HTML y escribir código JavaScript. Si aún no lo sabes, entonces visita la primera clase del curso y empieza desde allí 🙂 Esta es la clase número 9 del curso gratis de programación básica de Platzi 💚

Tips para aprender a programar

Ahora, antes de empezar, déjame darte algunos tips que seguro te ayudarán 😉

Escribe comentarios con “//”

La computadora ignora todo lo que escribas después de un “//” en una línea de código. Así que puedes usar esto para dejar mensajes útiles para ti (o tus compañeros) a lo largo del código.

Por ejemplo:

//RECOGIENDO LA ELECCIÓN DEL JUGADOR
let eleccionJugador = prompt(); // Aquí el jugador elije piedra, papel o tijera

Nombra variables

Se recomienda fuertemente usar nombres que dejen claro el propósito de la variable. Evita usar nombres sencillos como “a”, porque puedes olvidar que es lo que hace cuando trabajas con muchas variables a la vez.

La práctica más común es utilizar nombres compuestos por varias palabras en Camel Case (sin espacios, empezando en minúscula, y colocando en mayúscula la inicial de todas las palabras después de la primera).

Ojo, recuerda no emplear acentos ni “ñ” en tu código para evitar errores de lectura.

Por ejemplo:

eleccionUsuario
nombreUsuario
primerApellidoUsuario
fechaNacimientoUsuario

Utiliza condicionales

Si lo piensas bien, el juego de piedra, papel y tijera requiere de condiciones como “si el jugador elije piedra y la computadora elije piedra, entonces el jugador gana”.

Para hacer eso en JavaScript debes seguir una formula sencilla:

if ( variableAComparar == ValorDeComparacion ) {
    //Código a ejecutar si la condición se cumple
}
else if ( variableAComparar == ValorDeComparacion2 ) {
    //Código a ejecutar si la condición 1 no se cumple, pero la segunda sí
}
else ( variableAComparar == ValorDeComparacion3 ) {
    //Código a ejecutar si ninguna condición se cumple
}

En resumen:

  1. Usas if para evaluar la primera condición. else if, para evaluar más condiciones si la primera no se cumple, y else para decir lo que ocurrirá si ninguna otra condición se cumple.
  2. Entre los paréntesis escribes la condición que deseas evaluar. Por lo general se compara una variable con un valor.
  3. Recuerda que = se utiliza para asignar valores a las variables. Si deseas comparar variables con valores dentro de un if, entonces debes emplear un ==. También puedes emplear un ===si quieres comparar tanto el valor como el tipo de dato (número, string, o *boolean).
  4. El código que escribas entre {} es el código que se va a ejecutar si la condición entre paréntesis se cumple.

💡 Los datos tipo Boolean son datos “Verdadero o falso”. Puedes escribirlos como true / false o 1 / 0. Por lo regular son muy útiles 👍

Escribiendo el algoritmo

Esto lo vamos a hacer en dos partes. Y lo primero es crear el archivo HTML dónde vamos a escribir nuestro código, abrirlo en nuestro editor de código, y escribir la base en HTML.

Intenta hacerlo sin ayuda 😉 Y si te pierdes, aquí te dejo el código que deberías preparar de primeras.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Algoritmo piedra, papel o tijera</title>
        <script>
	      
        </script>
    </head>
    <body>
        <h1>Piedra, papel o tijera</h1>
    </body>
</html>

Luego escribiremos un código que nos permita saber si el jugador elije piedra papel o tijera. Intenta crear una variable que capture la elección del jugador usando un prompt(). Explícale que escriba 1 para piedra, 2 para papel o 3 para tijera, y luego recuérdale el número que eligió con un alert().

Intenta hacerlo sin ver la solución. Cuando termines, compara lo que obtuviste con el código de abajo y sigue leyendo:

<!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);
        </script>
    </head>
    <body>
        <h1>Piedra, papel o tijera</h1>
    </body>
</html>

Bien, ahora probemos con la condición. Primero convierte el recordatorio en un comentario. Vamos a crear un recordatorio más preciso, uno que le diga al usuario si eligió piedra, papel, tijera, o algo más.

Para hacerlo, inicia una condición dónde vas a hacer tres comparaciones. Primero usa un if para evaluar si el jugador eligió piedra. Si lo hizo, envíale un alert() indicándole que eligió piedra. Luego usa un par de else if para evaluar si eligió papel o tijeras, y envíale un alert() en cada uno informándole de su decisión.

Finalmente, emplea un else para evitar que el jugador quiera pasarse de listo al escribir algo que no sea 1, 2 o 3. En ese caso, envíale un alert() indicándole que elija 1, 2 o 3 (o juegale una broma. Es tu juego después de todo 😉).

Intenta hacerlo por tu cuenta. Y cuando termines, compáralo con el código de abajo antes de continuar.

¡Recuerda probar tu código en el navegador y pulirlo hasta que funcione!

<!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>

Dejémoslo hasta aquí por ahora. Intenta reproducir este código por tu cuenta ahora que sabes cómo funciona. Y cuando estés listo, acompáñame a terminar este pequeño juego en: Algoritmo avanzado de piedra, papel o tijera

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