Lógica if-else en piedra papel tijera

Curso Gratis de Programación Básica 2022

Contenido del curso

No sé dónde empezar

Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

Estilos con CSS

Optimización de código

Mapa con canvas

Backend: videojuego multijugador

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:01

Lógica if-else en piedra papel tijera

Curso Gratis de Programación Básica 2022

Clase 9 de 84

Clase 9 / 84

Recursos

Aprender a pensar como un algoritmo empieza con un juego que ya conoces: piedra, papel o tijera. Si quieres entender cómo se traducen las decisiones humanas a código con condicionales if y else, aquí descubrirás la lógica paso a paso para construir tu primer combate jugador contra computadora en JavaScript.

Este recorrido es ideal para quienes dan sus primeros pasos en programación y quieren ver cómo una idea cotidiana se convierte en líneas de código funcionales.

Cómo se piensa el algoritmo de piedra, papel o tijera

Antes de escribir una sola línea, conviene desmenuzar el problema. La trampa está en creer que hay nueve escenarios posibles cuando, en realidad, solo necesitas tres tipos de resultado: empate, victoria o derrota.

La lógica arranca con una pregunta sencilla: ¿qué es lo primero que debes descartar sin importar lo que elijas? El empate. Si tú y el PC eligen lo mismo, no hace falta evaluar nada más.

¿Por qué se evalúa primero el empate en este algoritmo? Porque depende solo de comparar dos valores iguales. Resolverlo de entrada simplifica el resto del código y evita revisar reglas innecesarias [02:13].

Una vez fuera el empate, basta con identificar los escenarios donde tú ganas. Si ninguno se cumple, por descarte, perdiste. Esa es la magia de pensar en condiciones excluyentes.

Cuáles son los escenarios de victoria del jugador

Las reglas del juego se traducen en dos combinaciones ganadoras claras y una tercera que suele olvidarse:

Tú eliges piedra (1) y el PC elige tijera (3): piedra mata tijera, ganas.
Tú eliges papel (2) y el PC elige piedra (1): papel envuelve piedra, ganas.
Tú eliges tijera (3) y el PC elige papel (2): tijera corta papel, ganas.

Si descartas el empate y ninguna de estas tres condiciones se cumple, automáticamente perdiste. No hay un cuarto camino.

Cómo se traduce la lógica a código con if y else

El primer ajuste estético consiste en mejorar los mensajes con emojis: rock para piedra, paper para papel y scissor para tijera. Los emojis funcionan dentro de cadenas de texto en JavaScript y vuelven la interfaz más amigable [04:30].

Luego se duplica la lógica de elección para el PC, reutilizando la misma estructura if que define al jugador. Aquí aparece un concepto central: la variable, ese contenedor que guarda la elección de cada participante para compararlas después.

Cómo se usa el operador AND para combinar condiciones

Para verificar dos cosas al mismo tiempo, JavaScript usa el operador lógico AND, escrito como && (doble ampersand). Por ejemplo:

javascript if (jugador === 1 && pc === 3) { alert("ganaste"); }

Esa línea solo se ejecuta cuando ambas condiciones son verdaderas: el jugador eligió piedra y el PC eligió tijera. Si una falla, el bloque se ignora.

¿Qué hace el operador && en JavaScript? Une dos condiciones y devuelve verdadero solo si ambas se cumplen. Es clave para combinar reglas dentro de un mismo if [07:45].

El bloque final usa else como red de seguridad: si no fue empate ni ninguna victoria, se muestra alert("perdiste"). Así cubres todos los desenlaces posibles con un solo cierre.

Por qué olvidar un caso es parte natural de programar

Durante las pruebas, aparece un bug clásico: cuando el jugador elige tijera y el PC elige papel, el programa no responde. El motivo es simple, faltó programar el tercer escenario de victoria. Se cubrieron piedra y papel, pero no tijera.

La solución es copiar el bloque condicional, ajustar los valores a jugador === 3 && pc === 2 y guardarlo. Con eso, el algoritmo queda completo.

Esta historia ilustra una verdad incómoda y liberadora del oficio: programar es aprender a manejar la frustración sin rendirte [13:20]. Vas a tener una idea, probarla, encontrarte con un fallo y ajustar. Ese ciclo es el corazón del desarrollo.

Existe una sola forma correcta de resolver este problema

No. El mismo juego puede escribirse con if anidados, con cadenas de else if, con varios if independientes o incluso con estructuras más avanzadas como switch o arreglos. La elección depende de tu estilo y del contexto.

La belleza está justamente ahí: nunca hay un solo camino correcto en programación. La versión que tú diseñes, si funciona y se entiende, probablemente sea válida.

Un detalle pendiente para subir el nivel es que el PC elija de forma aleatoria, no siempre la misma opción. Esa es la siguiente capa: incorporar azar para que el juego se vuelva impredecible.

¿Qué versión se te ocurre a ti? Anímate a reescribir el algoritmo con una estructura distinta y compártela en los comentarios para comparar enfoques con otros estudiantes.

Francisco Karriere

Hace 4 años

🪨📜✂️🐝🖖 Les comparto el codigo de la versión de Piedra, Papel, Tijera, Lagarto Spock con consulta de volver a jugar y tambien pide ingresar el valor nuevamente si este fue puesto erróneo. Espero les guste, los leo en sus comentarios 😊.

<script>
      let player = 0;
      let pc = Math.floor(Math.random() * 5) + 1;

      function setPlayer() {
        return prompt(
          "Elije una opción: 1 = piedra 🪨, 2 = papel 📜, 3 = tijera ✂️, 4 = lagarto 🐝, 5 = spock 🖖"
        );
      }

      player = setPlayer();

      if (player == 1) {
        alert("Elegiste piedra 🪨");
      } else if (player == 2) {
        alert("Elegiste papel 📜");
      } else if (player == 3) {
        alert("Elegiste tijera ✂️");
      } else if (player == 4) {
        alert("Elegiste lagarto 🐝");
      } else if (player == 5) {
        alert("Elegiste spock 🖖");
      } else {
        alert("Elige una opción válida");
        player = setPlayer();
      }

      if (pc == 1) {
        alert("El PC eligió piedra 🪨");
      } else if (pc == 2) {
        alert("El PC eligió papel 📜");
      } else if (pc == 3) {
        alert("El PC eligió tijera ✂️");
      } else if (pc == 4) {
        alert("El PC eligió lagarto 🐝");
      } else if (pc == 5) {
        alert("El PC eligió spock 🖖");
      } else {
        alert("El PC eligió una opción no válida");
      }

      if (player == pc) {
        alert("Empate");
      } else if ((player == 1 && pc == 2) || (player == 1 && pc == 5)) {
        alert("Gana el PC");
      } else if ((player == 1 && pc == 3) || (player == 1 && pc == 4)) {
        alert("Gana el jugador");
      } else if ((player == 2 && pc == 1) || (player == 2 && pc == 5)) {
        alert("Gana el jugador");
      } else if ((player == 2 && pc == 3) || (player == 2 && pc == 4)) {
        alert("Gana el PC");
      } else if ((player == 3 && pc == 1) || (player == 3 && pc == 5)) {
        alert("Gana el PC");
      } else if ((player == 3 && pc == 2) || (player == 3 && pc == 4)) {
        alert("Gana el jugador");
      } else if ((player == 4 && pc == 1) || (player == 4 && pc == 3)) {
        alert("Gana el PC");
      } else if ((player == 4 && pc == 2) || (player == 4 && pc == 5)) {
        alert("Gana el jugador");
      } else if ((player == 5 && pc == 1) || (player == 5 && pc == 3)) {
        alert("Gana el jugador");
      } else if ((player == 5 && pc == 2) || (player == 5 && pc == 4)) {
        alert("Gana el PC");
      } else {
        alert("Elige una opción válida");
        player = setPlayer();
      }

      let answer = confirm("quieres jugar de nuevo?");
      if (answer == true) {
        window.location.reload();
      } else {
        alert("gracias por jugar");
      }
    </script>

Luis Alberto Sandoval Salazar

Hace 4 años

buena ahí Sheldon JAJA

Ortelio Hernández Viñas

Hace 4 años

Hay cosas ahi que no entiendo aun... pero gracias a ti me robé lo de crear un let con confirm que no sabia que existía y poder reiniciar el juego😁

Comentarios (1321)1321 comentarios

Julio Duarte

Matías Diego Balcázar Ureña

Freddy Vega

Team Platzi

Augusto Huerta

Mateo Zapata Marin

Felipe Villegas

al mn

addd edada

luisa Garcia

Julian Sosa

Diego Fabrizzio Tumba Espinoza

Cinthia Victoria Domínguez Ruda

William Alfredo Bermudez Leal

Darley Delgadillo

Javier Alvarado

Camilo Manrique

Ricardo Arévalo

Sebastián Caraballo Marzola

Sonia Silva Contreras

Claudia Patricia Lemus Espinosa

María Angélica Arriagada Salazar

Olga Berenice Hernández Cruz

Juan Daniel Narvaez Guerrero

Carlos Vázquez

Federico Castillo Rangel

Juan David Reyes

Jhon Ronny Lacruz Vera

Karen Elizabeth

David Zapata

Sergio Sanchez

claudio enrique cabal rios

Juan Carlos Sosa

Diana Lucía

Willer Alexander Bencomo Manrique

Enrique Neri

Mariana Rivero

Alex Quiroz

Aldana Maldonado

Jonathan Cumini

Hace 3 años

Gloria Elizabeth Hernandez Herrera_ND

ALBERTO PÉREZ

Adrian Ismael Rodriguez Ramirez

Guadalupe Salto

Erik Ucenik

Juan Omar Palma álvarez

Diego Garcia

Shay Fernando Guzman Vara

jose ceron

José Taborda

Fundamentos de Programación

Programa tu primer videojuego desde cero

Tu primera variable en la consola del navegador

Crea tu primer archivo HTML desde cero

Estructura básica de HTML: head y body

Estructura de árbol en HTML y JavaScript

Instala VS Code y configura tu primer HTML

Variables con let, prompt y alert

Condicionales if y else en JavaScript

Lógica if-else en piedra papel tijera

Números aleatorios con Math.random y Math.floor

Creación y uso de funciones en programación

Cómo funcionan los ciclos en programación

While en JavaScript: cómo evitar loops infinitos

Rutas relativas para separar JS del HTML

Qué es el DOM y los eventos en JS

Desarrollando un juego con HTML y JavaScript

Cómo usar section, id y span en HTML

Radio buttons para elegir mascota en HTML

Cómo hacer que un botón responda al clic

Detectar el input seleccionado con checked

Detectar la mascota seleccionada con checked

innerHTML para mostrar la mascota elegida

Mascota enemiga aleatoria con JavaScript

Selección de ataques con variables globales en JS

Ataque aleatorio enemigo en JavaScript

createElement y appendChild en el DOM

Lógica de ganaste, perdiste o empataste en JS

Tablas de verdad con AND, OR y NOT

Vidas dinámicas con innerHTML en JavaScript

Validar vidas en cero con JavaScript

Reiniciar juego con location.reload

Mostrar y ocultar secciones con JavaScript

Estilos con CSS

Selectores, propiedades y valores en CSS

block, inline e inline-block en CSS

Centrar elementos en CSS con Flexbox

Modelo de caja en CSS explicado

Diseño y Estilo de Páginas Web con HTML y CSS

Cómo estilizar botones con CSS y Google Fonts

Estilos CSS para Mejorar la Interfaz de un Juego

Estiliza botones de ataque con Flexbox

Separación de mensajes y estilos en JavaScript y HTML

CSS Grid para organizar ataques en columnas

Diseño responsivo con media queries CSS

CSS :checked para resaltar selección activa

Optimización de código

Refactoriza tu JavaScript antes de escalar

let vs const al refactorizar funciones

Clases y objetos en JavaScript explicados

Clases y objetos en JavaScript con Mokepones

Uso de Arreglos para Almacenar Objetos en JavaScript

Ataques de Mokepon con arrays y push

Renderizar arrays en HTML con forEach

Cómo evitar null al inyectar HTML dinámico

Eliminar hardcode con fuente de verdad

Selección aleatoria de mascotas con arrays

Botones de ataque dinámicos con for loop

Botones de ataque dinámicos con forEach

Eventos de clic en botones dinámicos con JS

Secuencia de ataques aleatorios del enemigo

Lógica de combate por turnos en JavaScript

Lógica de victorias en un juego JavaScript

Optimización y Corrección de Errores en Juegos Web con JavaScript

Mapa con canvas

Dibuja imágenes en canvas con JavaScript

Mover personajes en canvas con JavaScript

Movimiento continuo en canvas con setInterval

Eventos de Teclado para Controlar Personajes en Juegos

Fondo del canvas y mascota dinámica en JS

Métodos de clase para pintar enemigos en Canvas

Cómo detectar colisiones entre objetos en JS

Conectar colisiones con ataques en JS

Ajuste Responsivo de Mapas en Pantallas con JavaScript

Estilos responsive para el mapa con CSS

Backend: videojuego multijugador

Cómo funciona la arquitectura cliente servidor

Instalación de Node.js en Windows para desarrollo backend

Hola Mundo con Node.js y npm

Servidor web con Express.js desde cero