Simon Game is really kicking my butt...help!

#1

Hello, fellow campers!

I have been working on my Simon game for some time and there are a few issues I cannot fix…I really hope somebody can give me at least a hint about what I am doing wrong here.:sweat:
So, here’s my codepen: https://codepen.io/mariamarica/pen/zzLgZB .

My issues are:

  1. I cannot make the computer repeat the pattern when the player makes a mistake in strict mode; I tried everything but i just keep breaking all the code…
    2)The level counter seems to show the new level before the buttons finish their animation. I thought i could fix it with setTimeout() but still not working;
  2. I want to add an event listener only to the buttons, so that the user can only click on them, but I could not do it. The only way that worked was document.addEventListener(“click”, function(e) {
    userClick = e.target.id; …}), but this way the user can click anything on the page. Is there a more elegant way of permitting clicking only on buttons?

I would really appreciate some input, because I am really stuck for a couple of days…

Thanks!!!
Maria

#2

I would try adding event listeners to all the buttons separately.
Unless you put a function on the buttons in the HTML
eg… onclick="guess(redButton)"

#3

for tic tac toe i did this

   if(playerTurn && gameOver === false) {
   var clicked = $(this),
       numPicked =  $(this).attr("id");```
so i had 9 divs all with class of squares and each had a id of 1-9 (ids were text eg id="2"
so first line activates when one of the squares was clicked and not any other div in my page
then the line numPicked = $(this).attr(''id") gives me which specific div was picked
so you could just add another class eg square like below and change above to 

``` $('.squares').click(function() {
     var  colorPicked =  $(this).attr("id");
if(colorPicked === pattern[position])

    <div class="row">
      <div class="square col-xs-6 col-md-6 button" id="green"></div>
      <div class="square col-xs-6 col-md-6 button" id="red"></div>
    </div>
    <div class="row">
      <div class="square col-xs-6 col-md-6 button" id="yellow"></div>
      <div class="square col-xs-6 col-md-6 button" id="blue"></div>
    </div>```
#4

Thank you, Johnny, I guess I have no other choice but to do that indeed

#5

@JohnL3 Thanks, but I was really hoping I could do this project in Vanilla JS only :confused:

#6

Thank you, Johnny, I guess I have no other choice but to do that indeed

Well I gave you 2 options so you have 2 choices :slight_smile:
I have looked at some other peoples attempts and I think you should try this if you are still stuck.

PS. I haven’t attempted this challenge yet.

#7

I just finished mine if you want to take a look. My counter updates the round, before it plays back sequence… Not sure why you think that is a problem? And yes, handling the timing of sounds and button animations was a real challenge in this one.

#8