Array comparison problem

0

Personal was doing a script for a little game called Simon, but I have a problem when checking if the items that the player clicked are the same as the game sent. Even if I hit or miss, it always returns that I was wrong, if anyone can help, thank you.

// Numeros de sequencias
var memory_sequence = [0, 1, 2, 3];
var colors = ["red", "blue", "yellow", "green"];
// Sequencia gerada temporariamente
var memory_tmp = [];
// Sequencia gerada pelo player
var memory_values = [];
var rounds = 0;

document.getElementById('start').onclick = function(){newGame()};

function newGame(){
  var output = '';
  for (var i = 0; i < memory_sequence.length; i++){
    output += '<li class="'+colors[i]+'" data-tile="'+i+'" onclick="checkGame(\''+i+'\')"></li>';
  } 
  document.getElementById('table').innerHTML = output;
  $('#start').hide();
  $('span').hide();
  round();
}


function round(){
  rounds += 1;
  if (rounds == 1){
    memory_tmp.push(0, 1);
    animate(memory_tmp);
  }
  else if (rounds == 2){
    memory_values = [];
    memory_tmp.push(2);
    animate(memory_tmp);
  }
  else if (rounds == 3){
    memory_values = [];
    memory_tmp.push(3);
    animate(memory_tmp);
  }
  else if (rounds > 3){
    var rand = Math.floor(Math.random() * memory_tmp.length);
    memory_tmp.push(rand);
    memory_values = [];
    animate(memory_tmp);
  }
}

function animate(memory_tmp){
  var i = 0;
  var interval = setInterval(function(){
    light(memory_tmp[i]);
    
    i++;
    if (i >= memory_tmp.length){
      clearInterval(interval);
    }
  }, 600);
}

function light(tile){
  var $tile = $('[data-tile='+ tile +']').addClass('lightOn');
  window.setTimeout(function(){
    $tile.removeClass('lightOn');
  }, 350);
}

function checkGame(val){
  memory_values.push(val);
  for (var i = 0; i < memory_values.length; i++){
    
    
    // Verifica se o player errou
  if ((memory_values.length == memory_tmp.length) && (memory_values != memory_tmp)){
    console.log('Values:' + memory_values);
    console.log('Temp:' + memory_tmp);
    // Se retornar true, fim do game
    reset();
  } 
 else if ((memory_values == memory_tmp) && (memory_values.length == memory_tmp.length)){
    round();
  }
 }
}

function reset(){
  memory_values = [];
  memory_tmp = [];
  $('li').hide();
  $('span').show();
  $('#start').show();
}
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  list-style-type: none;
}
html, body {
  width: 100%;
  height: 94%;
}

.simon {
  margin: 100px auto;
  width: 300px;
  height: 300px;
}

.red, .blue, .yellow, .green {
  -web-kit-border-radius: 150px 150px 150px 150px;
  border-radius: 150px;
  position: absolute;
}
.red {
  width: 296px;
  height: 290px;
  clip: rect(0px, 300px, 150px, 150px);
  background-color: red;
  opacity: 0.6;
}
.blue {
  width: 296px;
  height: 290px;
  background-color: blue;
  opacity: 0.6;
  clip: rect(0px, 150px, 150px, 0px);
}
.yellow {
  width: 296px;
  height: 290px;
  background-color: yellow;
  opacity: 0.6;
  clip: rect(150px, 150px, 300px, 0px);
}
.green {
  width: 296px;
  height: 290px;
  background-color: green;
  opacity: 0.6;
  clip: rect(150px, 300px, 300px, 150px);
}

.lightOn {
  opacity: 0.8;
  border: 3px solid black;
}

#start {
  width: 250px;
  height: 60px;
  border-radius: 20px;
  margin: 0 25px;
  font-size: 1.6em;
}
#start:hover {
  background-image: linear-gradient(to bottom, #cf2b4f, #980021);
  color: white;
}

span {
  width: 300px;
  height: 300px;
  text-align: center;
  display: none;
  font-size: 2em;
  position: relative;
  left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="simon">
  <ul id="table">
  </ul>
  <span>Você perdeu! <br> Sua pontuação: <br> 50</span>
  <button id="start">Start</button>
</div>
    
asked by anonymous 05.06.2016 / 17:40

1 answer

0

@Ingi you can not compare arrays as strings, the maximum you can do is to make a JSON.stringify() of the two arrays and compare the result string OR loop through the two arrays and check if an item is equal to its counterpart in the other array.

As fast-fix,

if ((memory_values.length == memory_tmp.length) && (memory_values != memory_tmp)){

would have to be

var mem = JSON.stringify(memory_values);
var temp = JSON.stringify(memory_tmp);
if ((memory_values.length == memory_tmp.length) && (mem != temp)){

However, note that it is better to loop the two variables and compare them in there.

    
06.06.2016 / 12:29