Simon Says Game

¡Juega aquí! 🟢 🔴 🔵 🟡

¡Esta es mi versión del clásico juego de Simon Says! Supera los 12 niveles y presume ante tus amigos.

El diseño de este proyecto proyecto le pertenece a megbuch y se uso como base para este proyecto. Está codificado en HTML5, CSS3 y JavaScript básico. A este juego se le agrego control por voz para hacerlo mas accesible y divertido. ​

Cómo jugar

• Haz clic en el botón "JUGAR" para comenzar el juego.
• Se reproducirá la secuencia del ordenador.
• Una vez finalizada la secuencia del ordenador, es el turno del usuario.
• Haga clic en los mosaicos en el orden en que se mostraron.
• Si la secuencia coincide con la de la computadora, pasarás a la siguiente ronda. Cada ronda agregará un mosaico más a la secuencia.

Capturas de pantalla

Pantalla ganadora

Pantalla perdedora

Control por voz

En esta versión del clásico juego de Simon Dice, se ha incorporado una funcionalidad de control por voz para mejorar la interacción y hacer el juego aún más atractivo y moderno. A continuación se describen los pasos que se siguieron para implementar esta característica:

1. Implementación del reconocimiento de voz: Se ha utilizado la API de Web Speech para el reconocimiento de voz, permitiendo al usuario decir los colores en lugar de hacer clic.

   if (!("webkitSpeechRecognition" in window)) {
     alert(
       "Tu navegador no soporta la API de reconocimiento de voz. Prueba con Google Chrome."
     );
   } else {
     var recognition = new webkitSpeechRecognition();
     recognition.lang = "es-ES";
     recognition.continuous = true;
     recognition.interimResults = false;
     recognition.onresult = function (event) {
       var last = event.results.length - 1;
       var colorInSpanish = event.results[last][0].transcript
         .trim()
         .toLowerCase();
       var colorInEnglish = translateColorToEnglish(colorInSpanish);
       if (tiles.includes(colorInEnglish)) {
         handleClick(colorInEnglish);
         info.innerText = "Color: " + colorInSpanish;
       } else {
         info.innerText = "Color no reconocido: " + colorInSpanish;
       }
     };
   }

2. Traducción de colores de español a inglés: Para que el juego procese correctamente los colores dichos en español, se implementó una función de traducción.

   function translateColorToEnglish(colorInSpanish) {
     const translation = {
       verde: "green",
       rojo: "red",
       amarillo: "yellow",
       azul: "blue",
     };
     return translation[colorInSpanish] || colorInSpanish;
   }

3. Procesamiento de secuencias de colores dicha: Se añadió la capacidad de procesar una secuencia completa de colores dicha por el usuario, ajustando la secuencia a la longitud actual del juego.

   function processColorSequence(spokenPhrase) {
     const spokenColors = spokenPhrase
       .split(" ")
       .map((color) => translateColorToEnglish(color));
     if (spokenColors.length > sequence.length) {
       info.innerText =
         "Demasiados colores. La secuencia solo tiene " +
         sequence.length +
         " colores.";
       return;
     }
     spokenColors.forEach((color, index) => {
       setTimeout(() => {
         if (tiles.includes(color)) {
           handleClick(color);
           info.innerText = "Secuencia: " + spokenPhrase.toUpperCase();
         } else {
           info.innerText = "Color no reconocido: " + color.toUpperCase();
         }
       }, index * 1000);
     });
   }