Programar tu primer videojuego con piedra, papel o tijera en JavaScript es la forma más clara de entender cómo funcionan las condicionales if, else if y else. Aprenderás a capturar la elección del jugador, comparar valores y ejecutar bloques de código según cada caso. Ideal para quien empieza en programación web.

¿Cómo se estructura el archivo HTML del juego?

Antes de tocar la lógica, necesitas un archivo base. Crea un nuevo archivo y guárdalo como piedra-papel-tijera.html, todo en minúscula y sin espacios, porque es buena práctica.

Dentro construye la estructura clásica con DOCTYPE html, head y body. En el head agrega un title con el nombre del juego y un meta charset="UTF-8" para que tildes y eñes se vean bien. En el body coloca un h1 que diga Piedra, papel o tijera [1:45].

La etiqueta DOCTYPE es peculiar: lleva signo de admiración al inicio y existe para mantener compatibilidad con navegadores antiguos.

¿Cómo capturar la elección del jugador con prompt?

Dentro del head abre una etiqueta script y declara dos variables con let. Una para el jugador y otra para la PC.

html

<script> // 1 es piedra, 2 es papel, 3 es tijera let jugador = 0; let pc = 2; jugador = prompt("Elige: 1 para piedra, 2 para papel, 3 para tijera"); alert("Elegiste " + jugador); </script>

El prompt muestra una caja de diálogo y guarda lo que el usuario escribe. El alert lo devuelve en pantalla. Fíjate en el espacio antes de la variable, porque sin él el texto sale pegado [6:30].

¿Qué es un comentario en JavaScript? Es una línea que empieza con doble slash // y que el navegador ignora al ejecutar. Sirve para dejar notas a quien programa, como recordar que 1 es piedra, 2 es papel y 3 es tijera.

¿Cómo usar if para evaluar condiciones?

Una condicional es un bloque de código que solo se ejecuta cuando una condición se cumple. En inglés sí se dice if, y esa es la palabra clave.

javascript if (jugador == 1) { alert("Elegiste piedra"); }

Las llaves { } delimitan el bloque que depende de la condición. Si el jugador escribe 1, aparece piedra. Si escribe cualquier otra cosa, no pasa nada [8:50].

¿Por qué se usa doble igual en lugar de uno solo?

Aquí entra una distinción clave. Un solo = es asignación: mete un valor dentro de una variable. El doble == es comparación: pregunta si dos valores son iguales y devuelve verdadero o falso.

Confundirlos es uno de los errores más comunes al empezar. Si escribes jugador = 1 dentro del if, le estás asignando 1 al jugador en vez de comparar.

¿Cómo encadenar varias condiciones con else if y else?

Podrías escribir tres if separados, uno para piedra, otro para papel y otro para tijera. Funciona, pero es feo y poco eficiente. Lo elegante es usar una cascada.

javascript if (jugador == 1) { alert("Elegiste piedra"); } else if (jugador == 2) { alert("Elegiste papel"); } else if (jugador == 3) { alert("Elegiste tijera"); } else { alert("Elegiste perder"); }

El else if solo se evalúa cuando la condición anterior fue falsa. El else final atrapa todo lo demás: si el jugador escribe 0, una letra o un número negativo, cae ahí [12:40].

¿Cuándo usar else if y cuándo else? Usa else if cuando necesitas evaluar otra condición específica. Usa else para todos los casos que no encajan en ninguna condición previa, sin necesidad de comparar nada más.

¿Por qué un else suelto puede dar resultados incorrectos?

En una primera versión, el código tenía if jugador == 1, else if jugador == 2 y un else directo para tijera. El problema: si el jugador escribía 0, una palabra o cualquier valor distinto de 1 o 2, el navegador lo trataba como tijera.

La solución es ser explícito. Agrega else if (jugador == 3) para tijera y deja el else final como mensaje de error: elegiste perder. Así el código solo responde con una opción válida cuando el input es válido [14:20].

¿Qué aprendiste sobre variables, prompt y flujo de control?

En pocos minutos cubriste piezas centrales de JavaScript:

• Declaración de variables con let para guardar el valor del jugador y de la PC.
• Captura de input con prompt y salida con alert.
• Concatenación de cadenas con el operador + y espacios intencionales para evitar texto pegado.
• Comentarios con // para documentar el código sin afectar la ejecución.
• Condicionales if, else if y else para crear flujos de decisión completos.
• Diferencia entre = (asignación) y == (comparación).

También conociste un truco práctico de Visual Studio Code: activar View > Word Wrap para que las líneas largas se acomoden a la pantalla, recordando que siguen siendo una sola línea de código [6:55].

¿Ya tienes tu archivo piedra-papel-tijera.html corriendo? Cuéntame en los comentarios qué resultado te dio cuando escribiste algo distinto a 1, 2 o 3.