Problem with array comparison

Asked

Viewed 66 times

0

People were making a script for a little game called Simon, but I have a problem checking if the items the player clicked are the same as the game sent. Even if I hit or miss he always returns that I missed, if anyone can help I thank.

// 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>
<div class="simon">
  <ul id="table">
  </ul>
  <span>Você perdeu! <br> Sua pontuação: <br> 50</span>
  <button id="start">Start</button>
</div>

javascript
  • 1

    The way it is is not possible to execute. There are no major descriptions about the problem. All if existing in the code are not comparing strings and the code is not easy to read, so you need to help more so that we can help you.

  • what a game this is?

  • If possible you can browse the full code here: http://codepen.io/inginex/pen/MeWVyZ

  • Sorry the array in question is this: "// Checks whether the player misses if ((memory_values.length == memory_tmp.length) && (memory_values != memory_tmp)){ console.log('Values:' + memory_values); console.log('Temp:' + memory_tmp); // If it returns, end of game reset(); } Else if ((memory_values == memory_tmp) && (memory_values.length == memory_tmp.length)){ round(); } }"

1 answer

0

@Ingi you can’t compare arrays as strings, the most you can do is make a JSON.stringify() of the two arrays and compare the result string OR loop through the two arrays and check whether an item is equal to its counter-part 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 inside.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.