2

Estoy trabajando en un juego en HTML5 de memoria llamado SIMON en el que se presenta un tablero con 4 pads de colores (verde, rojo, amarillo y azul), un switch de encendido y 2 botones para jugar en distintos modos.

El usuario debe hacer click en el número de pads que se indiquen según el round y en el orden correcto, si no, se debe repetir el round. Todavía no he terminado la sección de JS.

Mi pregunta es la siguiente: He escrito una función que ilumina y reproduce el pad correspondiente y verifica el click, pero sólo para el primer round. Estoy confundido sobre cómo hacerlo para los rounds siguientes (10 ó 15 rounds máximo) en donde la función se ejecuta varias veces y debe haber una demora/espera para que el usuario haga click.

Llevo un par de meses en esto, pero no he podido plasmarlo. ¿Debería usar funciones recursivas para definir la función principal del juego? ¿Almacenar los clicks en un array/objeto? ¿Hacer varias funciones pequeñas como módulos para llamarlas después y simplificar el código?

Este es mi código (también disponible en CodePen):

$(document).ready(function() {

  var randColors = [];
  var player = [];
  var normalClicks = [];
  //This variable will be used to check
  //if the game is powered on or off
  var powerCheck = 0;
  // This objects are going to be useful 
  // to identify and shorten many things.
  var greenPad = {
    color: "green",
    gradColor: "green-grad",
    audio: document.getElementById("audio1"),
    item: "greenCanvas"
  },  
      redPad = {
        color: "red",
        gradColor: "red-grad",
        audio: document.getElementById("audio2"),
        item: "redCanvas"
      },
      yellowPad = {
        color: "yellow",
        gradColor: "yellow-grad",
        audio: document.getElementById("audio3"),
        item: "yellowCanvas"
      },
      bluePad = {
        color: "blue",
        gradColor: "blue-grad",
        audio: document.getElementById("audio4"),
        item: "blueCanvas"
      };

  // Illuminate and play a pad's sound  
  function illuminate (col) {

    if (col === "green") {
      console.log("color was green");
      greenPad.audio.play();
      $("#green").addClass("green-grad");
      setTimeout(function() {
        $("#green").removeClass("green-grad");
      }, 500);
    }

    if (col === "blue") {
      console.log("color was blue");
      bluePad.audio.play();
      $("#blue").addClass("blue-grad");
      setTimeout(function() {
        $("#blue").removeClass("blue-grad");
      }, 500);
    }

    if (col === "red") {
      console.log("color was red");
      redPad.audio.play();
      $("#red").addClass("red-grad");
      setTimeout(function() {
        $("#red").removeClass("red-grad");
      }, 500);
    }

    if (col === "yellow") {
      console.log("color was yellow");
      yellowPad.audio.play();
      $("#yellow").addClass("yellow-grad");
      setTimeout(function() {
        $("#yellow").removeClass("yellow-grad");
      }, 500);
    }
  }    


  $( ".onoffswitch-label" ).click( function() {
    powerCheck = powerCheck + 1;
    console.log( "powerCheck = " + powerCheck );

    // If powerCheck is an odd number, it means
    // that the game has been powered on,
    // and now the user can start playing.
    if ( powerCheck % 2 === 0 ) {
      console.log( "Turned Off" );
      randColors = [];

      $( ".count" ).removeClass( "led-on" );
      //Add "disabled" status to normal 
      //mode (Play) and strict mode buttons again.
      $( ".btn" ).addClass( "disabled" );
      //$(".btn").prop( "disabled", true );
      $( "canvas" ).prop( "disabled", true );
      //$("canvas").addClass("disabled");
      //Reset counter to "00"
      $( "#counter" ).text( "00" );
    } else {

      //The game has been turned on
      console.log( "Turned On" );
      randColors = [];

      // Generate random color secuence
      function randomColorsGenerator() {
        while ( randColors.length < 10 ) {
          if ( Math.random() * 4 < 1 ) {
            randColors.push( "red" );
          } else
            if ( Math.random() * 4 >= 1 && Math.random() * 4 < 2 ) {
              randColors.push( "blue" );
            } else
              if ( Math.random() * 4 >= 2 && Math.random() * 4 < 3 ) {
                randColors.push( "yellow" );
              } else {
                randColors.push( "green" );
              }
        }
        console.log( "Actual color sequence is (" + randColors + ")" );
      }

      //Change color of led display numbers
      $( ".count" ).addClass( "led-on" );
      //Remove "disabled" status from normal 
      //mode (Play) and strict mode buttons
      $( ".btn" ).removeClass( "disabled" );
      //document.getElementByClassName(".btn").disabled = false;
      //document.getElementsByName("canvas").disabled = false;


      //POST (Power On Sound Test)
      //This is optional.
      function post() {
        greenPad.audio.play();
        $( "#green" ).addClass( "green-grad" );
        setTimeout(function() {
          $( "#green" ).removeClass( "green-grad" );
          $( "#red" ).addClass( "red-grad" );
          redPad.audio.play();
          setTimeout( function() {
            $( "#red" ).removeClass( "red-grad" );
            $( "#blue" ).addClass( "blue-grad" );
            bluePad.audio.play();
            setTimeout( function() {
              $( "#blue" ).removeClass( "blue-grad" );
              $( "#yellow" ).addClass( "yellow-grad" );
              yellowPad.audio.play();
              setTimeout( function() {
                $( "#yellow" ).removeClass( "yellow-grad" );
              }, 300);
            }, 300);
          }, 300);
        }, 300);
      }
      // Execute the POST function
      post();
      //End of test

      //Press Play to begin
      $( ".btn-success" ).click( function() {

        // But begin only if the game is powered on
        if ( powerCheck % 2 === 0 ) {
          console.log( "The game is powered off" );
          alert( "To start your game you have to first turn it on " );
        } else {

          // If the game is powered on,
          // Normal Mode begins 
          console.log( "Simon has started in Normal Mode" );
          // Reset counter to "00"
          $( "#counter" ).text(0);
          // Generate a new random array of colors
          randomColorsGenerator();
          // Increment display number by 1
          function incrDisplay() {
            var x = $( "#counter" ).text();
            $("#counter").text( Number(x) + 1 );
          }
          incrDisplay();

          // This function defines Normal Mode gameplay 
          function normal() {


            // Temporary commented
            /*
            for ( var i=0; i<randColors.length; i++ ) {
              illuminate( randColors[i] );
              $( "canvas" ).click(function(event) {
                console.log(event.target.id + " was clicked.");
                if ( event.target.id === randColors[i] ) {
                  console.log( "You did great" );
                  incrDisplay();

                } else {
                  console.log( "Ups! Try Again" );
                  // at this point, the display won't increment by 1
                  // 
                }
              });
            }
            */
          }
          normal();

          // Illuminate 1st element
          illuminate(randColors[0]); 
          // Log 1st click
          $( "canvas" ).click( function(event) {
            console.log(event.target.id + " was clicked.")
            // If the click is the expected color
            if (event.target.id === randColors[0]) {
              // Output message
              console.log("You did great");
              // and go to next step
              incrDisplay();
              illuminate(randColors[0]);
              setTimeout (function() {
                illuminate(randColors[1]);
              }, 300)
              // In case of a mistake, repeat last step
            } else {
              console.log("Ups! Try Again");
            }
          });

        }

      });

      //Or Play in Strict Mode
      $(".btn-danger").click(function() {
        console.log("Simon has started in Strict Mode");
      });

    }

  });

});
/*Generic CSS (Aplies to all devices)*/
@import 'https://fonts.googleapis.com/css?family=Alfa+Slab+One|Black+Ops+One';

body {
  /*
  CSS3 Patterns Gallery. (Carbon) 
  by Atle Mo (design), Sébastien Grosjean (code)
  */
  background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0, linear-gradient(27deg, #222 5px, transparent 5px) 0 10px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient(#1d1d1d 36%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
  background-color: #131313;
  background-size: 20px 20px;
}

.inline {
  display: inline-block;
}

/*Wrapper*/
#frame {
  background-color: #333333;
  height:414px;
  width: 414px;
  margin: -207px 0 0 -207px;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 5px;
  border-radius: 50%;  
}
/*End*/

#controls {
  width: 250px;
  height: 250px;
  position: absolute;
  margin: -125px 0 0 -125px;
  top: 50%; left:50%;
  border: 4px solid #333333;
  border-radius: 50%;
  background: white;
  text-align: center;
}

/*Simon title inside white circle*/
.brand {
  font-family: 'Alfa Slab One', cursive;
  color: #222;
  font-size: 4rem;
  margin-top: 15%;
  text-align: center;
}
/*End*/

/* Display/Counter */
.display {
  width:  70px;
  position: relative;
  margin: 7px 15px;
  text-align: center;
}
.count {
  height: 60px;
  font-family: 'Black Ops One', monospace;
  color: #DC0D29;
  padding-top: 10px;
  background-color: #32050C;
  position: relative;
  border: 4px solid #222;
  border-radius: 10px;
  margin: 0 auto;
}
.led-off {
  font-size:3rem;
  color: #430710;
  vertical-align: middle;
}
.led-on {
  font-size:3rem;
  color: #ff0000;
  vertical-align: middle;
}
.label {
  color: #222;
  font-family: 'Oswald', Arial, sans;
  font-size: 0.7em;
  margin-top: 5px;
  text-align: center;
}
.full-red {
  background-color: #FC0102;
}
.clickable {
  pointer-events: auto;
  cursor: pointer;
}
.led {
  width: 6px;
  height: 6px;
  background-color: #32050C;
  border-radius: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  border: 2px solid #222;
  top: -18px;
}
.sw-slot {
  height: 20px;
  width: 40px;
  background-color: #222;
  position: relative;
  top: 5px;
  border-radius: 2px;
  cursor: pointer;
}
/*End*/

/*Giving buttons a rounded shape*/
.btn {
  border-radius: 40%;
}

/* Power On/Off switch*/
/*Inspiration thanks to: proto.io/freebies/onoff/*/
.onoffswitch {
  position: relative;
  width: 70px;
  user-select:none;
  margin: 30px auto;
}
.onoffswitch-checkbox {
  display: none;
}
.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #999999;
  border-radius: 20px;
}
.onoffswitch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 25px;
  padding: 0;
  line-height: 25px;
  font-size: 12px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}
.onoffswitch-inner:before {
  content: "ON";
  padding-left: 15px;
  background-color: #34A7C1;
  color: #FFFFFF;
  text-align: left;
}
.onoffswitch-inner:after {
  content: "OFF";
  padding-right: 10px;
  background-color: #EEEEEE;
  color: #999999;
  text-align: right;
}
.onoffswitch-switch {
  display: block;
  width: 30px;
  margin: -2.5px;
  background: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 41px;
  border: 2px solid #999999;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  right: 0px;
}
/*End of Power On/Off Switch*/

/*Canvas color and shape*/
canvas {
  width: 200px;
  height:200px;
}
#green {
  background-color: #27ae60;
  border-top-left-radius: 100%
}
.green-grad {
  background: radial-gradient(circle, white, #27ae60);
  border-top-left-radius: 100%
}
#red {
  background-color: #e74c3c;
  border-top-right-radius: 100%;
}
.red-grad {
  background: radial-gradient(circle, white, #e74c3c);
  border-top-right-radius: 100%;
}
#yellow {
  background-color: #f1c40f;
  border-bottom-left-radius: 100%;
}
.yellow-grad {
  background: radial-gradient(circle, white, #f1c40f);
  border-bottom-left-radius: 100%;
}
#blue {
  background-color: #3498db;
  border-bottom-right-radius: 100%;
}
.blue-grad {
  background: radial-gradient(circle, white, #3498db);
  border-bottom-right-radius: 100%;
}
/* End */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="frame">
  <div id="4canvas">

    <div id="controls">
      <h1 class="brand">Simon<sup>®</sup></h1>

      <div>
        <!-- Start Button (Bootstrap) -->
        <button type="submit" class="btn btn-success btn-lg disabled" data-toggle="button" aria-pressed="false" autocomplete="off">
          <span class="glyphicon glyphicon-play"></span>
        </button>
        <!-- End -->

        <!-- LCD Display -->
        <div class="display inline">
          <h1 id="counter" class="count led-off">00</h1>
        </div>
        <!-- End -->

        <!-- Strict Mode Button (Bootstrap) -->
        <button type="submit" class="btn btn-danger btn-lg disabled" data-toggle="button" aria-pressed="false" autocomplete="off">
          <span class="glyphicon glyphicon-flash"></span>
        </button>
        <!--End of Strict Mode Button-->
      </div>

      <!-- Rounded On/Off switch -->
      <div class="onoffswitch" id="onoff">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
        <label class="onoffswitch-label" for="myonoffswitch">
          <span class="onoffswitch-inner"></span>
          <span class="onoffswitch-switch"></span>
        </label>
      </div>
    </div>

    <div>
      <canvas id="green">
        <audio id="audio1" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></audio>
      </canvas>
      <canvas id="red">
        <audio id="audio2" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></audio>
      </canvas>
    </div>
    <div>
      <canvas id="yellow">
        <audio id="audio3" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></audio>
      </canvas>
      <canvas id="blue">
        <audio id="audio4" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></audio>
      </canvas>
    </div>
  </div>

</div>

4
  • 1
    Deberías intentar separa cada evento, es decir pulsar play, y el evento click del canvas por otro lado. También te haría falta alguna variable ronda.
    – nachfren
    Commented el 22 oct. 2016 a las 15:41
  • 1
    Deberías intentar separa cada evento, es decir pulsar play, y el evento click del canvas por otro lado. También te haría falta alguna variable ronda. Tu metodo randomColorGenerator genera 10 colores asi: (green,green,red,green,green,red,red,blue,green,green). En la ronda 1 solo se pide que pulse un color "green". Si acierta, ronda = 2. Ahora se pide que pulse 2 veces "green", en el evento canvas click debes tener algun contador para saber cuantos click han generado en esa ronda, no se si me explico bien...
    – nachfren
    Commented el 22 oct. 2016 a las 15:47
  • Gracias @mariano. Ya introduje la variable rounds en el código. Estoy intentando hacer una función `` que ilumina/reproduzca los pàds en secuencia (si estoy en el round 7, reproduzca Pad 1 y haga pausa de 300ms, Pad 2 y haga pausa de 300ms, Pad 3 y haga pausa de 300ms, ... , Pad 7 y pausa opcional) y para esto me toca pasarle como parámetro la variable rounds. Esto me suena como si tuviera que utilizar recursión y no se cómo plasmarlo... Commented el 23 oct. 2016 a las 4:30
  • ⬆️⬆️⬆️ c/c @nachfren ⬆️⬆️⬆️
    – Mariano
    Commented el 23 oct. 2016 a las 4:38

1 respuesta 1

3

He quitado código de tú ejemplo para hacerlo más sencillo, el código que te paso no es funcional al 100%, simplemente es para mostrar como puedes emplear la lógica del juego.

CodePen

Como verás no hace falta recursividad ni nada por el estilo, solo necesitamos 2 variables claves que son:

Ronda que nos indica dos cosas, la primera en que nivel estamos y así determinamos cuantos colores se van a mostrar y la segunda conocer cuantos colores debe pulsar el jugador para pasar de nivel.

clickRonda nos sirve para controlar cuantos colores ha pulsado el jugador.

var clickRonda = 0;
$( "canvas" ).click( function(event) {
       
       illuminate(event.target.id); 
       
       if(randColors[clickRonda] == event.target.id) {
           //Si entra aqui, singinfica que se ha pulsado el color correcto
           clickRonda++;
                      
           if(ronda == clickRonda) {
               //El jugador a terminado la ronda, aumentamos el nivel!
               ronda++;
               clickRonda=0;
               reporducirNivel(ronda);
           }
           
       } else {
           
           //Generamos un sonido diferente para indicar que hemos perdido.
           greenPad.audio.play();
           redPad.audio.play();
           yellowPad.audio.play();
           bluePad.audio.play();

            //Generamos un nuevo array de colores. 
           randomColorsGenerator();
           ronda=1;
           clickRonda=0;
           $( "#counter" ).text(0);
       }
       
    
    
});
var indice = 0;
function reporducirNivel(ronda) {
    $( "#counter" ).text(ronda);
    
    var tiempo = 600;
    for(var i = 0; i<ronda; i++){
        setTimeout(illuminate, (i+1)*tiempo, randColors[i]);
    }
}

Supongamos que tu array de colores randColors contiene:

0, 1, 2, 3...10

(red,blue,green,red,blue,green,green,green,red,green)

Ahora digamos que acabamos de empezar la Ronda 2, es decir ronda=2 y clickRonda=0 y ya se ha reproducido los colores red y blue.

Cuando pulsemos sobre el botón rojo se llamará a $( "canvas" ).click se ilumina el botón pulsado por el usuario illuminate(event.target.id); y comprobaremos si se ha pulsado el botón correcto if(randColors[clickRonda] == event.target.id) si es cierto, aumentamos clickRonda=1y se comprueba si hemos terminado la ronda if(ronda == clickRonda) en nuestro ejemplo no es así.

Ahora pulsamos sobre el color azul se repite las comprobaciones anteriores con clickRonda=1 la diferencia en este caso es que la siguiente condición es cierta: if(ronda == clickRonda) aumentamos la ronda y reiniciamos el contador de clickRonda.

Espero que se entienda, un saludo.

1
  • Excelente! Ahora sólo debo modificar unas cuantas cosas como por ejemplo: el código que colocaste es para el modo estricto ya que al primer error se empieza desde el principio y en modo normal se empieza desde el último round correcto. Debo también colocarle un límite diciéndole que se detenga a los 10 rounds, es decir, menor a randColors.length. Además también debo cuadrar los tiempos de los pads y del round. Commented el 24 oct. 2016 a las 6:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.