Having trouble with Simon Says comparing arrays

Having trouble with Simon Says comparing arrays
0.0 0

#1

Hi all,

I’m having a tough time comparing my two simon arrays. One is the human, the other is the computer moves.
The comparison function currently works, but it has to wait until the human moves array length === computer moves array length. I would like the comparison to work in real time on each click.

I have tried a million different things, from for loops, to while loops, do while loops. Basically the logic I want to achieve is simple, but I feel like I’m missing something!?!?!

I’m comparing each array item to each array item, using the every function. This function is fired on every human click.
Here is the code in question:

function compareClicks() {
  
  let computerSequence = gameConfig.moves.computer,
      humanSequence    = gameConfig.moves.human,
      copiedSequence   = computerSequence;
  
  
  const comparison = computerSequence.every((tile, index) => {
    return tile === humanSequence[index];
  });
  
  / * EXPERIMENTAL CODE HERE
  for (let i = 0; i < copiedSequence.length; i++) {
    if (humanSequence[i] === copiedSequence[i] && humanSequence.length <= copiedSequence.length) {
      copiedSequence.shift();
    }
    break;
    copiedSequence = [];
  }

 END EXPERIMENTAL CODE, ALL OTHER CODE WORKS */
  
  if (humanSequence.length === computerSequence.length) {
    if (comparison) {
      addToSequence();
      playSequence();
      gameConfig.moves.human = [];
    } else {
      if (gameConfig.mode === 'strict') {
        alert("mismatch, you lose");
        restartGame();
      } else {
        alert('Woops! Try again!');
        playSequence();
        gameConfig.moves.human = [];
      }
    }
  }
}

heres my pen: http://codepen.io/JackEdwardLyons/pen/PWvQBN?editors=0010


#2

I take it you want to compare the click human pressed to check if its in the computerSequence and if it is continue if its not then break … rather then wait till human pressed complete sequence to check if they are the same

    console.log('true here');
  }else {
    console.log('false here');
  }```

this will log true in console if the button clicked is in the computor array and false if its not ... so you should be able to add the code to break out if you get a false entry .....
below is where i put it in your code to check if it worked 

```function compareClicks() {
  let computerSequence = gameConfig.moves.computer,
      humanSequence    = gameConfig.moves.human;
  
  const comparison = computerSequence.every((tile, index) => {
    return tile === humanSequence[index];
  });
  console.log(computerSequence)
  if(computerSequence.includes(humanSequence[humanSequence.length-1])){
    console.log('true here');
  }else {
    console.log('false here');
  }```

#3

Thanks for the help! It’s certainly is on the right track but it still doesn’t work beyond one click. Which is the problem I was having with all the sorts of loops and stuff I had tried previously :frowning:


#4

what i would do is in the else part of code i gave you restart … in the true part check array[length-1] eg if(humanSequence[humanSequence.length-1] === computerSequence[humanSequence,length-1]
if they are the same your fine if not then restart

problem is when i try to compare it shows a whole section of html as being stored in the arrays

i was expecting to see some simple number or string eg … a b c … to represent note played when button clicked … so would be easy to compare but this is what i see
[button#1.mui-btn.mui-btn–raised.simon-btn.mui-btn–yellow,
button#2.mui-btn.mui-btn–raised.simon-btn.mui-btn–green.js-click,
button#2.mui-btn.mui-btn–raised.simon-btn.mui-btn–green.js-click]
each of which has a little arrow to open out to more info
making comparison difficult for me at the moment


#5

did a bit more debugging and added a couple of things
can now get button id for button clicked eg click button id 0 can add 0 to a new human array so will have this [0]
also got id out of comp moves so can have comp arry like [0] so
which gives me a comp array for say four moves like [0,0,1,2]
human one is more tricky … but trickiest part is comparing on each human button click … but if i get a chance ill dig a bit more


#6

Yeah, initially I have been push DOM elements into the arrays. Which is probably not ideal practice, but I was thinking it shouldn’t matter too much because the comparison function still works regardless, it was more about checking each click in real time, without the comparison function calling an error because the length of each array elements are not the same…


#7

For so long I thought something this simple would work, but it gets tripped up after round 1

for (let i = 0; i < copiedSequence.length; i++) {
if ( humanSequence[i] !== copiedSequence[i]) {
  if (gameConfig.mode === 'strict') {
    alert("mismatch, you lose");
    restartGame();
  } else {
    alert('Woops! Try again!');
    playSequence();
    gameConfig.moves.human = [];
  }
} else {
  addToSequence();
  playSequence();
  gameConfig.moves.human = [];
}

}


#8

ok got a bit further can now check on each move … so if the order is the same game continues but if something is pressed in wrong order it goes to restart game … then things go wrong lol
finishing up now for a couple of hours or maybe till tomorrow … will check back and give more help if needed
adding link to my codepen that i forked from yours with code i changed … some is irrelevant … main part to look at is the new button click function i added at line 64
hopefully you can understand it … should be easier if you step through it in the debugger in chrome like i do when trying to sort it out


#9

Actually it works … when you hit the wrong button in the sequence … i have it restart …
but you then have to pick a game mode and then start … i just didnt realise this as it was letting me restart and click buttons without pressing normal then start.
so maybe add a little code that dosent let you hit a button after restart unless its the sequence normal/strict restart


#10

Interesting man, I’ll take a deeper look. Thanks for caring :slight_smile:
I know theoretically it passes and is a valid game with my current logic, but yeah I really wanted to get to the bottom of this!

Thank you, i’ll have dig into it and see how i go.

Jack


#11

Here is some refactoring I did.

The e.target.offsetParent is because of the MUI library when a button is clicked it adds a span element to create the waves effect. But yeah, what do you think?

// real time checking on each click
    if (typeof clickedId === 'number') {
      if( clicks < compMoves.length && clickedId != compMoves[clicks]) {
         // do an initial comparison, if user fails simply break from the statement and begin again
         checkGameMode();
         return;
       } else {
         clicks++;
       }
      } else {
        clicks = 0;
    }