Hoy te mostraré otro juego programado en JavaScript. Se trata de “Simón dice” (Simon says) también conocido simplemente como Simón; donde se repite una secuencia y el jugador debe imitarla. Según la wikipedia:
Simon es un juego electrónico creado por Ralph Baer y Howard J. Morrison en 1978. Tuvo un gran éxito durante los 80. Tiene forma de disco, en una de sus caras se puede ver cuatro cuadrantes, cada uno con un color: verde, rojo, azul y amarillo en su versión original. Su nombre se debe por el conocido juego tradicional del mismo nombre: Simón dice, de donde se inspira.
Es un juego físico pero lo he creado de manera virtual. En caso de que sigas sin entender, el juego es como el siguiente:
A lo largo del post te mostraré cómo está conformado el juego, explicando su programación. También te dejaré el código fuente y la demostración para que puedas jugar simón dice en la web.
Algoritmo
El algoritmo es simple. Tenemos un arreglo, en cada turno del CPU (es decir, después de que el usuario acierta) agregamos un nuevo valor para que se vaya haciendo más grande.
Después, reproducimos esta secuencia para que el usuario la vea y la intente reproducir. Ahora el usuario hará clic en los botones, cada que hace clic se aumenta un contador que indica en qué paso de la secuencia va el jugador.
Este contador sirve como índice del arreglo que tiene la secuencia que el CPU ha elegido; en cada clic se comprueba si el botón que ha elegido el jugador es el mismo que está en el arreglo en esa posición. En caso de que sí, el juego continúa, y si no, se le indica al jugador que ha perdido.
Cuando el contador alcanza la longitud de la secuencia menos 1 significa que el jugador ha reproducido la secuencia completamente, así que se aumenta su puntaje y es el turno del CPU para que agregue otro valor e inicie todo de nuevo.
Tecnologías usadas
En este caso solo utilicé la librería d3.js para dibujar el círculo a través de SVG. Lo demás es JavaScript puro. Para el diseño he usado Bootstrap 4.
Para las alertas he usado SweetAlert 2. Básicamente las alertas dan la bienvenida al juego e indican al jugador cuando ha perdido.
Assets de sonidos
El juego reproduce cuatro sonidos distintos dependiendo del color que se presione. Por lo tanto usamos la función que expuse anteriormente para reproducir sonidos con JavaScript. La carga de los mismos se ve así:
Obviamente tú puedes cambiar los sonidos por otros, renombrarlos, etcétera. Por cierto, quiero dejar claro que los sonidos fueron recortados a partir de un sonido que encontré en freesound.org
Diseño de la página para jugar
La página en sí es muy simple. Solo se define una barra de navegación, el contenedor del SVG y el pie. La parte importante es el contenedor pues ahí se va a dibujar el juego, y también es importante la carga de game.js.
El contenedor está definido en la línea 65.
A partir de aquí comenzaré a explicar el código.
Variables y constantes
Comenzamos definiendo algunas variables que se van a usar durante el juego. Por ejemplo, partidoEn16 me ayuda a dibujar los arcos o círculos usando 1 dieciseisavo como medida, aunque al final no necesité tanta precisión.
Lo demás es definición del radio de los círculos, además de algunas banderas como puedeJugar que indica si el juego debería reaccionar a los clics del usuario.
La variable gamma es el multiplicador para cuando el color se hace brillante. El puntaje es el puntaje del usuario, que se aumenta cuando sigue la secuencia correcta.
El contador sirve para saber en cuál paso de la secuencia va el usuario (cuando la está imitando) y la secuencia es un arreglo de colores aleatorios.
Los colores son colores simples, es decir, no tienen nada de especial; pero es importante que los definamos como lo que regresa la función d3.color para que más tarde podamos agregarles brillo y dar el efecto de que el botón “enciende”.
Dibujando círculos y partes de círculos
Nota: una alternativa sería poner 4 simples botones en una tabla; de este modo evitarías dibujar el círculo y sus partes, ya que gran parte del código es para dibujar el juego.
Una cosa importante sobre los arcos y sus ángulos es que si queremos un círculo completo, el ángulo de cierre debe ser de 2 PI. En caso de que queramos uno a la mitad, sería de PI. Y finalmente para dibujar un cuarto de círculo se usa PI entre 2.
De todo eso se encarga d3. Básicamente es un círculo negro de fondo, después se dibujan los 4 botones usando un cuarto de círculo, se dibuja otro círculo negro en el centro pero con un radio menor y encima de este se coloca el puntaje.
Otra cosa importante a resaltar es el atributo transform que hace que los elementos sean posicionados. En este caso (por ejemplo línea 79) estoy usando las plantillas de cadena para evitar concatenar.
Animaciones de botones
El juego hace que el botón encienda (su color es más brillante), reproduce un sonido, espera ciertos milisegundos, revierte el color del botón y pausa el sonido.
Voy a explicar esa función. Lo que hace es buscar cuál sonido debe reproducir según el botón. El sonido es rebobinado para que se empiece a reproducir desde cero. Después reproduce el sonido y le coloca un color más brillante al botón (línea 16) usando el método brighter propio del color de d3.
Después espera cierta duración con la función sleep (setTimeout con promesas); devuelve el color original, vuelve a esperar, pausa el sonido y finalmente establece la bandera de puedeJugar en true.
Funcionamiento del juego
El funcionamiento del juego es simple. Se divide en dos partes; la primera es el turno del CPU en donde se le agrega un botón aleatorio a la secuencia, y después se reproduce en el juego para que el jugador la observe. Durante todo este tiempo el jugador no puede hacer clic en ningún botón.
La segunda parte es cuando el jugador hace clic en un botón (previamente se comprueba que pueda jugar). En este caso, si el jugador acierta en la secuencia, se reproduce el sonido del botón y, si no, se le indica al jugador que ha perdido.
Es también en esta segunda parte cuando se aumenta el puntaje y el contador de la secuencia, pues solo se le da el turno al CPU cuando el jugador ha repetido toda la secuencia sin equivocarse.
También necesitamos otras funciones auxiliares para este juego de Simón dice en JavaScript. Por ejemplo, elegir un botón aleatorio, comparar si dos botones son iguales, etcétera.
Otro método importante es el de reiniciar el juego, mismo que limpia la secuencia, reinicia puntajes, contadores y refresca el puntaje.
Finalmente, todo el juego es reiniciado al presionar un botón. Cuando esto pasa, el botón se deshabilita. El mismo se vuelve a habilitar cuando el jugador pierde y reinicia el juego.
Poniendo todo junto
No colocaré aquí el código fuente; pues lo encuentras en mi GitHub. Lo encontrarás ahí para que, en caso de que le dé mantenimiento en el futuro, te descargues la última versión del juego.
Puedes probar el juego de Simón dice en JavaScript en este enlace: https://parzibyte.github.io/simon-game-javascript/
También puedes mirar mi vídeo de YouTube y suscribirte:
Por cierto, solo hay un pequeño problema y es que el juego no es totalmente responsivo, pues el círculo mide 400 pixeles, así que en pantallas pequeñas se añade un scroll para que el círculo quepa. Recuerda que si no te gusta, eres bienvenido a hacer una contribución al código 😉
También te invito a ver otros juegos que he programado, o más tutoriales de JavaScript.
