0

Me encuentro con el siguiente problema con el SimonSays:

Quiero hacer el efecto de que se coloree el cuadro de un color destacado que tienes que pulsar, y al segundo se vuelva a un color más apagado. A través de cambiar id con el setAttribute. Consigo destacarlo (cambiar id a destacado), pero a la hora de intentar devolverlo al id original, me ignora por completo.

window.onload = function() {
    boton = document.querySelector('input[name=enviar]');

    boton.addEventListener('click', function () {
      var orden = 0;
      var posiciones = generaPosicion();
      resaltarColores(posiciones);

    })
}

function generaPosicion(valor) {
  var numColores = valor || 4;
  var arrPos = new Array();
  var numeroFijoColores = 3;
  for(var i=0, fin = numColores; i<fin;i++){
    arrPos[i] = Math.round(Math.random() * numeroFijoColores );
  }
  return arrPos;
}

function resaltarColores(posiciones) {
  console.log(posiciones)
  var idColoresA = Array('rojoDes', 'azulDes', 'amarilloDes', 'verdeDes');
  var botones = document.getElementsByTagName('button');
  var x = 0, fin = posiciones.length;
  var auxPos;
    var idDes = setInterval(function() {
      devolverColorInicial(posiciones[x]);
      botones[posiciones[x]].setAttribute('id', idColoresA[posiciones[x]]);
      x++;
      if(!botones[posiciones[x]]){
          clearInterval(idDes);
          auxPos = x--;
          if(auxPos!=posiciones.length)
          devolverColorInicial(posiciones[auxPos]);
      }

  }, 1000);


}

function devolverColorInicial(posicionCosas) {

  var idColoresB = Array('rojo', 'azul', 'amarillo', 'verde');
  var botones = document.getElementsByTagName('button');
  console.log(botones[posicionCosas]);
    console.log(idColoresB[posicionCosas]);

  botones[posicionCosas].setAttribute('id', idColoresB[posicionCosas]);
  console.log(botones[posicionCosas]);


}
button {
  height: 100px;
  width: 100px;
}
#col1, #col2, #col3 {
    display: flex;
    justify-content: center;
}
#col3{
  margin-top: 5%;
}
#rojo{
  background-color:rgb(231, 112, 112) ;
}
#azul{
  background-color: rgb(127, 113, 233);
}
#amarillo{
  background-color: rgb(227, 214, 129);
}
#verde{
  background-color: rgb(152, 231, 97);
}

#rojoDes{
  background-color:red;
}
#azulDes{
  background-color: blue;
}
#amarilloDes{
  background-color:yellow;
}
#verdeDes{
  background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style/main.css">
  <script src="script/main.js"></script>
  <title>SimonSays</title>
</head>
<body>
  <div id="col1">
    <button id = "rojo"></button>
    <button id = "azul"></button>
  </div>

  <div id="col2">
    <button id = "amarillo"></button>
    <button id = "verde"></button>
  </div>
  <div id="col3">  <input type="button" name="enviar" value="Inicio"></div>

</body>
</html>

2 respuestas 2

0
function devolverColorInicial(posicionCosas, chivato) {
setTimeout(function() {
var idColores = Array('rojo', 'azul', 'amarillo', 'verde');
var botones = document.getElementsByTagName('button');
botones[posicionCosas].setAttribute('id', idColores[posicionCosas]);
},1000);

}

Como apunte, añadir que aumenté también el tiempo de intervalo a 2000

0

Creo que el problema está en esta parte del código:

devolverColorInicial(posiciones[x])

Básicamente primero "apagas" el botón, pero luego enciendes de nuevo el mismo botón que esta en la posición "x" del arreglo (en esta linea).

botones[posiciones[x]].setAttribute('id', idColoresA[posiciones[x]]);

Si colocas un -1 a la variable "x" puedes lograr un efecto como el que quieres (o al menos eso creo), ya que apagaría el de la posición anterior (x-1) y encendería el de la posición "x". Esto podría resolver el problema que comentas:

var idDes = setInterval(function() {
  if(x > 0){
     devolverColorInicial(posiciones[x-1]);
  }
botones[posiciones[x]].setAttribute('id', idColoresA[posiciones[x]]);
x++;
if(!botones[posiciones[x]]){
//Esta linea apaga el ultimo color al pasar 1 segundo.
setTimeout(devolverColorInicial, 1000, posiciones[x-1]);
   clearInterval(idDes);
      auxPos = x--;
      if(auxPos!=posiciones.length)
      devolverColorInicial(posiciones[auxPos]);
  }
}, 1000);

También puedes crear una variable para contar los segundos del intervalo. Luego en cada segundo verificar con una condición si el contador es par o impar, si es par enciendes el botón, si es impar lo apagas e incrementas la variable "x" para encender con el siguiente botón y también incrementas la variable de contador cada segundo.

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.