Problem with setInterval. Simon Says

Question

Problem with setInterval. Simon Says

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I find the following problem with the SimonSays :

I want to make the effect of coloring the box of a highlighted color that you have to press, and the second one to turn to a more subdued color. Through changing id with setAttribute . I get to highlight it (change id to highlighted), but when trying to return it to the% original% co, it ignores me completely.

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>

javascript html setinterval

asked by Jose Antonio Moral 13.12.2016 в 14:09

source

2 answers

Problems with retrofit and picasso Run to my project

score 0 · Answer 1

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);

}

As noted, add that I also increased the interval time to 2000

score 0 · Answer 2

I think the problem is in this part of the code:

devolverColorInicial(posiciones[x])

Basically you first "turn off" the button, but then turn on the same button again that is in the "x" position of the array (in this line).

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

If you put a -1 to the variable "x" you can achieve an effect like the one you want (or at least I think), since it would turn off the one in the previous position (x-1) and turn on the position " x " This could solve the problem you mention:

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);

You can also create a variable to count the seconds of the interval. Then in every second check with a condition if the counter is even or odd, if it is even turn the button, if it is odd you turn it off and increase the variable "x" to light with the next button and also increase the counter variable every second .