Algoritmo avanzado de piedra, papel o tijera

Curso Gratis de Programación Básica

Fundamentos de Programación

Bienvenida a Platzi: ¿qué necesitas para tomar el curso?

¿Cómo aprender programación?

Crea tu primer sitio web

Sitios web con HTML

Estructura de árbol en HTML

Instalando tu primer editor de código

Cómo declarar variables y usar prompt

Algoritmo de piedra, papel o tijera

Algoritmo avanzado de piedra, papel o tijera

Aleatoriedad

Refactor del código usando funciones

Ciclos

Gana 3 veces

Archivos de HTML y JavaScript

¿Qué es el DOM?

Quiz: Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

Maquetación con HTML

Sección de elegir mascota

¿Dónde ubicar la etiqueta script? Conectando HTML con JavaScript

Escuchando eventos con JavaScript

addEventListener

Manipulación del DOM

Enemigos aleatorios

Ataques en JavaScript

Ataques aleatorios del enemigo

Imprimiendo ataques del enemigo

¿Ganaste, perdiste o empataste?

Tablas de verdad

Creando el contador de vidas

¿Quién ganó el juego?

Reiniciando el juego

Ocultando elementos HTML con JS para mejorar la UX del juego

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

Anatomía de CSS

Tipos de display

Flexbox

Modelo de caja

Imágenes para los Mokepones

Estilos del botón

Adaptando HTML al diseño del juego

Layout: título y ataques

Adaptando JavaScript al diseño del juego

CSS Grid

Responsive Design

Detalles finales

Quiz: Estilos con CSS

Optimización de código

Revisión de código

Don't repeat yourself (DRY)

Clases y objetos

Clases y objetos de Mokepon

Arrays o arreglos

Objetos vs. arreglos

Ciclos: manipulando el DOM con iteradores

Declaración lenta de variables

Una sola fuente de la verdad

Mascotas aleatorias con arreglos

Ataques dinámicos por cada mascota: extraer

Renderizado dinámico en HTML

Eventos de click dinámicos

Secuencia de ataques del enemigo

Iniciando el combate

Resolviendo el reto de condicionales

Optimizando el frontend del juego

Quiz: Optimización de código

Mapa con canvas

Introducción a canvas: dibujando con JavaScript

Moviendo a Capipepo hacia la derecha

Movimiento hacia todas las direcciones

Movimientos con el teclado

Imágenes y personajes de fondo

Métodos en las clases

Obstáculos y colisiones

Combate entre mokepones colisionados

Mapa responsive

Botones bonitos y viewport

Quiz: Mapa con canvas

Backend: videojuego multijugador

¿Qué es backend?

Instalación de Node.js y NPM

Terminal de comandos y Node.js

Servidor web con Express.js

HTTP, localhost, servidores y puertos

Express.js y fetch: API REST con JavaScript

JSON y POST: mokepon online

Transmisión de coordenadas

Mokepones dinámicos en el mapa

Optimizando el mapa del juego

Batalla entre jugadores

Consumiendo la API de ataques del enemigo

Quiz: Backend: videojuego multijugador

Próximos pasos

Probando el juego en varios dispositivos

¿Y ahora qué curso tomar?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

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:

El juego pide su elección al jugador, y luego le informa cuál fue su elección.
El juego asigna una elección a la computadora, y luego le informa al jugador la elección de la computadora.
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).

Aportes 769

Preguntas 368

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Julio Duarte

Si ya tienes una cuenta,

Curso Gratis de Programación Básica

Algoritmo avanzado de piedra, papel o tijera

¿Dónde nos quedamos?

La elección de la computadora

Anunciando la elección del computador

¿Quién gana y quién pierde?

Para tenerlo presente:

9 - Algoritmo avanzado de piedra, papel o tijera