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…
1 Like