Ayuda práctica para el reto de Piedra, Papel o Tijeras

Este tutorial está dirigido a quienes están iniciando en JavaScript y/o no pueden hacer el juego interactivo con HTML y CSS sea por falta de conocimientos o tiempo

¡Hola! seguramente ahora que estás resolviendo el reto del juego de piedra, papel o tijeras estás encontrándote con algunos obstáculos.

Por ejemplo: ¿Cómo hará el usuario para ingresar su elección? o, ¿Cómo haré que la máquina escoja entre piedra, papel y tijeras al azar?

En este tutorial no tengo como propósito darte la solución al reto, sino darte algunas ayudas para que puedas hacerlo más rápido.

Primero: Manejo básico de la consola

Es esencial trabajar fluidamente con la consola de nuestro navegador. Por eso quiero brindarte algunos atajos de teclado básicos para que la uses de manera más eficiente:

Google Chrome

Tools for Web Developers - Referencia de combinaciones de teclas

Firefox

MDN web docs - Web console keyboard shortcuts

Segundo: Ideas para interactuar con el usuario

Está bien, la consola es perfecta para mostrar información, pero ¿para pedirla? ¿Cómo hago para que el usuario ingrese un valor?

Bueno, si no tienes problema en hacer todo desde la consola, la respuesta es sencilla: Imaginemos que ya tienes todo listo y tienes una función llamada jugar() que se encarga recibir la elección del usuario, ejecutar la lógica y mostrar los resultados en la misma consola. Lo único que habría que hacer es escribir en consola, por ejemplo: jugar('papel') y presionar enter.

Sin embargo, estarás de acuerdo conmigo en que no es muy amigable esta opción. Bueno aquí te van otras ideas para interactuar con el usuario.

Usar popups en JavaScript

En JavaScript tienes tres maneras de presentar popup boxes, diálogos o ventanitas emergentes: alert(), prompt() y confirm(). Los nombres te dan una pista de lo que hacen, pero déjame explicarte un poco sobre cada una.

Comencemos con la más elemental: alert()

alert() simplemente mostrará el mensaje que le pases como parámetro.

alert('¡Estamos aprendiendo JavaScript!');

Además no devuelve ningún valor, es decir si haces esto:

var mensajito = alert('¡Estamos aprendiendo JavaScript!');

Tu variable mensajito será igual a undefined.

Pide datos con prompt()

prompt() no solo muestra un mensaje sino que también le permite al usuario ingresar un valor. Al darle aceptar, prompt() devolverá el valor escrito por el usuario, o null si cancela.

Mira este ejemplo donde necesitamos un número del 1 al 9:

var digito = prompt('Ingresa un número del 1 al 9');

En este caso si el usuario fue obediente, la variable digito deberá ser igual a un número cualquiera que vaya del 1 al 9. Recuerda hacer algo para validar el dato ingresado, pues si en este caso el usuario ingresa un número de varios dígitos, un string o nada, obviamente tendrás resultados indeseados.

Pide confirmación con confirm()

confirm() Mostrará un mensaje, que como se sugiere, será uno pidiendo confirmación.

var validaEnvio = confirm('En tu mensaje usas la palabra adjunto, sin embargo no has adjuntado ningún archivo, ¿Deseas enviarlo así?');

confirm() devolverá true si se presiona Aceptar o false si se presiona cancelar. Por lo que validaEnvio en el ejemplo anterior solo podrá valer uno de estos dos valores.

Con alert(), prompt() y confirm() podrás interactuar fácilmente con el usuario. Quizá el que menos te sirva para el reto sea confirm() pero no está de más que lo conocieras, no?.

JavaScript Popup Boxes - w3schools (En inglés)

Tercero: Generar valores aleatorios

Para esto usaremos la función Math.random() la cual nos devolverá un flotante (número decimal) que va del 0 al 0.9999… Esto nos permitirá escalarlo y trabajar con los números que deseemos, veamos como:

Imaginemos que necesitamos un número aleatorio del 0 al 9 y almacenarlo en la variable digitoAleatorio.

Si Math.random() nos devuelve un número entre 0 y 0.999… ¿Cómo hacemos para obtener solo números del 0 al 9?

Bueno, ¿qué podríamos hacer para escalar esta cifra? ¿Qué tal si lo multiplicamos? Pero, ¿Por cuál número? Si lo multiplicamos por 1 obtendremos el mismo número que arrojó Math.random(), 1 no nos sirve. Por dos, el número mínimo que tendríamos sería 0 y el máximo 1.9999…, creo que ya ves lo que pasa. Ahora, si multiplicamos por 10 el número mínimo que obtendremos será 0 y el máximo 9.9999… Esto está mejor, pues ya cubrimos todos los números del 0 al 9.

Ahora solo nos queda redondear nuestro resultado. Algo que hacemos también con funciones de Math. Fíjate en estas tres formas de redondear y piensa cuál sería la que nos sirve en nuestro ejemplo:

• Math.ceil() Redondea hacia arriba. Ej: Math.ceil(14.3) devolverá 15
• Math.round() Redondea al más cercano. Ej: Math.round(21.6) devolverá 22 / Math.round(21.2) devolverá 21
• Math.floor() Redondea hacia abajo. Ej: Math.floor(35.8) devolverá 35

Si el número mayor que obtendremos en la operación anterior será 9.999… y el número mayor que requerimos es 9, tendremos que redondear hacia abajo, es decir usar Math.floor

Cómo quedaría nuestro código:

var digitoAleatorio = Math.floor( Math.random() * 10 );

Con esto podemos generar 10 números aleatorios del 0 al 9. En otras palabras, si solo queremos generar un número entre 3 opciones, en lugar de multiplicar por 10, multiplicaremos por 3, pudiendo obtener 0, 1 y 2.

Math - JavaScript|MDN

Mis últimos tips
Recuerda que puedes hacer más amigable tu juego usando emojis, tanto en consola como en los popups.

Además si ya sabes algo de CSS puedes darle un poco de estilo a tu texto en consola. Solo debes añadir %c antes del texto en el primer parámetro y pasar el estilo CSS en el segundo parámetro, te dejo un ejemplo que puedes probar en la consola de tu navegador:

console.log('%c¡Acepto el reto! 💪', 'color:red;font-size:20px;font-weight:bold')

Creo que aparte de lo que has aprendido hasta ahora en este curso, estos tips básicos te servirán para resolver este desafío. A medida que vayas avanzando tendrás nuevas herramientas que podrás usar para mejorarlo.

Espero que el tutorial te resulte útil no solo para resolver el desafío, si no también para adentrarte más en JavaScript y el uso de la consola.