Stuck on some Simon issues

I’m having trouble with it not turning a different color when it is the same color twice and when the user misses one it doesn’t restart. Any tips?

You seem to be missing a

document.getElementById("score").innerHTML=SCORE;

To reset the score when in STRICT mode, not sure of the intended behavior… Playing different colors when 2 of the same seems to work ok.
also the block

      if(score!==0){
        SCORE++;  
      }

references a score variable that doesn’t seem to exist… but seems like the if is somewhat a workaround for something…
My advice would be to separate:

  • playing simon’s sequence… basically once when users starts, when user repeats last simon’s sequence correctly and when user makes a mistake.)
  • adding a new color to simon’s sequence… (when user repeats last simon’s sequence correctly)
  • checking the user’s sequence vs simon’s. (whenever a button is pressed)

Something like the following could work… it’s not very refined… but I think it works as intended.

let SIMONS_SEQUENCE = [];
let USERS_SEQUENCE = [];
let SCORE = 0; 
let STRICT =  false;
let START = false;
//buttons
const START_BUTTON = document.querySelector(".btn-start");
const STRICT_BUTTON = document.querySelector(".btn-strict");
//colors 
const GREEN = document.getElementById("green");
const RED = document.getElementById("red");
const YELLOW = document.getElementById("yellow");
const BLUE = document.getElementById("blue");
const ALL_COLORS = document.querySelectorAll("#colors > article");
let PLAY_INTERVAL=500;

START_BUTTON.addEventListener("click", startGame);

STRICT_BUTTON.addEventListener("click", strictClick);

//.addEventListener("click", checkColors);
ALL_COLORS.forEach(ALL_COLORS => ALL_COLORS.addEventListener("click", checkColors));

const AUDIO_GREEN=new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
const AUDIO_RED=new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
const AUDIO_YELLOW=new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
const AUDIO_BLUE=new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');
const AUDIO_WRONG=new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/176972/331912__kevinvg207__wrong-buzzer.mp3');

function startGame() {
  if (START===false) {
    clear();
    playColors();
  }
  START = !START;
  updateGui();
}

function clear() {
  SCORE = 0;
  USERS_SEQUENCE = [];
  SIMONS_SEQUENCE = [];
  addRandomColorToSequence();
}

function addRandomColorToSequence() {
  SIMONS_SEQUENCE.push(Math.floor(Math.random() * 4));
}

function updateGui() {
  document.getElementById("score").innerHTML = START ? SCORE : "--";
  START_BUTTON.style.background = START ? "#FF0200" : "#FFCC00";
  STRICT_BUTTON.style.background = STRICT ? "#FF0200" : "#FFCC00";
}

function strictClick(){
  STRICT = !STRICT;
  updateGui();
}

function checkButtons(){
  if(USERS_SEQUENCE[USERS_SEQUENCE.length - 1] !== SIMONS_SEQUENCE[USERS_SEQUENCE.length - 1]) {
    USERS_SEQUENCE = [];
    AUDIO_WRONG.play();
    if (STRICT) {
      clear();
      updateGui();
    }
    playColors();
  } else {
    PLAY_COLOR_FUNCTIONS[USERS_SEQUENCE[USERS_SEQUENCE.length - 1]]();
    if (USERS_SEQUENCE.length === SIMONS_SEQUENCE.length) {
      SCORE++;
      USERS_SEQUENCE = [];
      if (SCORE === 3) {
        youWin();
      } else {
        addRandomColorToSequence()
        updateGui();
        playColors();
      }
    }
  }
}

const COLOR_VALUES = {"green": 0, "red": 1, "yellow": 2, "blue": 3};

function checkColors(){
  if(START){
    USERS_SEQUENCE.push(COLOR_VALUES[this.id]);
    checkButtons();
  }
}

function youWin(){
  clear();
  START = false;
  updateGui();
  document.getElementById("score").innerHTML= "You Won!";
}

const PLAY_COLOR_FUNCTIONS = [playGreen, playRed, playYellow, playBlue];

function playColor(i) {
  PLAY_COLOR_FUNCTIONS[SIMONS_SEQUENCE[i]](); // Will invoke function based on color.. see PLAY_COLOR_FUNCTIONS above
  if (i + 1 < SIMONS_SEQUENCE.length) {
    setTimeout(function() { playColor(i + 1); }, 500);
  }
}

function playColors(){
  setTimeout(function() {playColor(0)}, 1000);
}

function playGreen(){
  GREEN.classList.add("green-lighten");
  AUDIO_GREEN.play();
  setTimeout(function(){
    GREEN.classList.remove("green-lighten");
  }, PLAY_INTERVAL);  
}

function playRed(){
  RED.classList.add("red-lighten");
  AUDIO_RED.play();
  setTimeout(function(){
    RED.classList.remove("red-lighten");
  }, PLAY_INTERVAL);  
}

function playYellow(){
  YELLOW.classList.add("yellow-lighten");
  AUDIO_YELLOW.play();
  setTimeout(function(){
    YELLOW.classList.remove("yellow-lighten");
  }, PLAY_INTERVAL);  
}

function playBlue(){
  BLUE.classList.add("blue-lighten");
  AUDIO_BLUE.play();
  setTimeout(function(){
    BLUE.classList.remove("blue-lighten");
  }, PLAY_INTERVAL);  
}

As a side note, ALL_CAPS variables are customary for constant values in many languages… I didn’t really fix style issues in the proposed code… but it’d be advisable to do so… :wink:

1 Like