Crear juego piedra, papel o tijera en Angular

Pasos que debemos seguir sobre cómo crear el tan popular juego “Piedra, papel o tijera”

Comenzamos con un nuevo artículo en el que os voy a mostrar a crear un sencillo juego con Angular y lo que vamos a crear es mítico juego “Piedra, papel o tijera” que conocemos muy bien y seguramente muchos/as de nosotros/as hemos jugado cuando estábamos en etapas escolares de primaria.

Imagen representativa del juego con las tres posibles opciones

Si no recordáis cómo se jugaba, es muy sencillo. Tenemos 3 elementos, piedra papel o tijera y en cada jugada cada participante (normalmente es uno contra uno) saca uno de esos 3 elementos, con el objetivo de vencer a su contrincante.

Las combinaciones son las siguientes:

• Papel vence a piedra.
• Piedra vence a tijeras.
• Tijeras vence a papel.

Si queréis más información del juego y otros temas relacionados, os invito a que os animéis a acceder a la información de Wikipedia del juego: https://es.wikipedia.org/wiki/Piedra,_papel_o_tijera

Sabiendo lo anterior, vamos a comenzar a trabajar en el juego y lo primero que vamos a tener en cuenta son los requisitos antes de empezar con ello.

1.- Requisitos previos al desarrollo del juego

• NodeJS y NPM instalados, a ser posible la versión LTS: Descarga
• Angular CLI
• Ganas de aprender a hacer un juego sencillo con Angular.

2.- Comenzamos creando nuestro proyecto Angular

Creamos el proyecto sin configuración de rutas y con la configuración de la hoja de estilos CSS.

ng new rock-paper-scissors --routing=false --style=css

3.- Descargar las imágenes del juego y añadirlas

Una vez que ya hemos creado el proyecto, descargamos las tres imágenes que necesitamos para las diferentes opciones del juego donde vamos a ejecutar nuestras jugadas con piedra, papel y tijera y las añadimos en el html del componente y le especificamos un tamaño de 100px de ancho.

Descargamos las imágenes desde aquí.

Aplicamos el siguiente código CSS en el app.component.css y el HTML en el app.component.html.

Una vez aplicado y guardado los cambios, tenemos que tener algo de este estilo:

Imagen inicial del estado de nuestro juego

4.- Mejorando el estilo y apariencia

Aplicando varios cambios en el style.css donde especificamos cómo estará lo que es el contenedor principal del body con su estilo, conseguiremos dejarlo sin márgenes, ni relleno para aplicarle un fondo de color personalizado

Quedará de la siguiente manera, donde queda evidente que tenemos que mejorar mucho el tema de las opciones de juego.

Imagen actual con lo especificado en los estilos

Añadiendo varios cambios en el apartado del app.component.css en relación a las opciones del juego.

• Borde en las opciones.
• Centrar el contenido de manera horizontal mediante Flexbox.
• Aplicarle un fondo a la imagen para visualizar mejor.

Aplicando estos cambios en el app.component.css:

Quedará de la siguiente manera:

Imagen actual después de aplicar estilos a las opciones de las jugadas

Como véis, es evidente que ha mejorado mucho la apariencia quedando muchísimo mejor.

Eso sí, cada uno/a de vosotros/as puede seleccionar los colores y estilos que queráis, esto es una propuesta personal que gustará o no.

5.- Añadiendo acciones de las opciones del juego

En este caso vamos a aplicar los selectores hover y active en las opciones del juego. Aplicaremos lo siguiente:

6.- Añadiendo el título principal del juego

Añadimos primero el HTML del código que os pongo a continuación junto con las reglas CSS concretas para estilizar esa parte:

Con ello, conseguiremos el siguiente resultado:

Imagen actual después de añadir un título

Ahora que ya tenemos el título y las opciones correctamente añadidas con sus estilos, vamos a terminar con el tema de la apariencia del juego añadiendo un marcador donde se irá contabilizando las puntuaciones “usuario-computadora”.

7.- Añadiendo marcador

En este caso, para añadir el marcador, sin aplicar estilos, debemos de ir al fichero app.component.html y añadir lo siguiente:

Lo que se verá en nuestra aplicación, será algo como lo siguiente:

Imagen del estado del juego después de añadir el marcador

8.- Estilos en el marcador

Comenzamos a darle un estilo bonito para darle más sentido a todo el trabajo que hemos realizado anteriormente con el título y las opciones del juego.

Añadimos en el fichero app.component.css lo siguiente:

Con esto que acabamos de añadir, la apariencia ha mejorado bastante y ¡ya queda poco para terminar con la parte gráfica!

Imagen después de aplicar los estilos en el marcador

9.- Añadir información con instrucciones y textos necesarios

Ahora, para terminar con la parte visual y centrarnos en la lógica del juego, añadiremos debajo de las opciones un mensaje “Selecciona tu jugada” y encima añadimos un apartado donde añadiremos el mensaje de la jugada realizada con la computador y el resultado.

Vamos a app.component.ts y creamos una propiedad “result” de tipo string, una que será un objeto donde se almacenará tanto la puntuación total del usuario y de la computadora. Inicializamos los valores:

Ahora que ya tenemos todo preparado en el componente, vamos a añadir esos valores en el template para que se refleje lo que tenemos en la lógica de nuestro componente:

Aplicamos los siguientes estilos en el app.component.css para que tome un buen aspecto:

Quedará de la siguiente manera:

Juego preparado para meterle la lógica necesario para jugar

10.- Comenzando con la lógica — Selección de la computadora

En este caso vamos a definir la función que se encargará de realizar la selección de la opción de la jugada por parte de la computadora y esto lo realizaremos mediante una función aleatoria (random).

Creamos el servicio donde vamos a tener toda la lógica de nuestro juego.

ng g s game — skipTests

Se creará un fichero llamado “game.service.ts” donde introducimos la primera función que nos dará la jugada aleatoria de la computadora:

11.- Efectuando jugada con las opciones del jugador / computador

Ahora lo que vamos a definir es el resultado después de que el usuario haga su selección. Cuando se haga la selección por parte del usuario, se pondrá en marcha la función juego donde creamos un string que será una jugada que utilizaremos para determinar si el usuario ha ganado, ha perdido o ha empatado con la máquina.

Tenemos las siguientes combinaciones

Gana usuario:

• rs: Roca vs tijera.
• sp: Tijera vs papel.
• pr: Papel vs roca

Pierde usuario:

• rp: Roca vs papel.
• ps: Papel vs Tijera.
• sr: Tijera vs roca

Empatan los jugadores:

• rs: Roca vs Roca.
• ss: Tijera vs tijera.
• pp: Papel vs papel

Esto será traducido dentro del game.service.ts:

12.- Hacemos selección y efectuar jugada

Ahora que ya hemos definido el resultado de la selección del jugador contra la computadora vamos a habilitar la opción para enviar lo que hemos elegido para realizar la jugada ya definida en el punto anterior.

Añadimos la función play dentro del app.component.ts con un parámetro de tipo string que será la selección del usuario y la añadimos en el componente.

El código será así:

Añadimos el código quedando así el template HTML:

Si hacemos click en las diferentes opciones, nos mostrará en este momento la selección del usuario

Jugada que enviamos los usuarios

13.- Comunicar con el servicio del juego

Inyectamos el servicio del juego (game.service.ts) en el constructor y cuando recibimos esa jugada, llamamos a la función “game” del servicio que hemos definido anteriormente enviando la selección del usuario.

El resultado cuando seleccionemos los usuarios nuestra jugada, combinando con la opción aleatoria que se obtiene desde la computadora:

Ejecución de la jugada del usuario y computadora a la vez antes de hacer la verificación

14.- Obteniendo el resultado de nuestra jugada

Ahora llegados al punto donde ya hemos realizado la jugada obteniendo la combinación de la jugada completa con la opción de la computadora, tenemos que recibir 3 posibles respuestas, ganamos, perdemos y empatamos.

Modificamos la función “game” y añadimos para que guarde el mensaje del estado de la jugada, cuántos punto suma el usuario y cuantos la computadora, dependiendo de si gana, pierde o se empata.

Añadir en game.service.ts lo siguiente:

Recogemos el resultado y le asignamos los valores para que se reflejen los cambios en el template:

15.- Resultado final

Después de ir haciendo todos los pasos, ¡el juego ya estará disponible en su versión más básica! Ahora lo que nos queda es disfrutar del juego y aplicarle mejoras, que espero que lo hagáis en el código que colgaré para contribuir y mejorar el juego.

Resultado final del juego

16.- Código del juego final

Os dejo el repositorio para que aportéis vuestras contribuciones.

game-and-game-devs/rock-paper-scissors