Simon Game in JavaScript

I've made a JavaScript, HTML and CSS version of the memory game 'Simon' from the 70s. The design of the board is not too impressive (I wanted to focus first on the JavaScript part) but I also appreciate feedback on it of course. If you want to see the game already in action, it's available here.



var computerMovements = [];
var answers = [];
var rounds = 0;
//strict mode allows one mistake per round. false if 'relaxed' mode
var strict = true;
//in strict mode, there is no last chance
var lastChance = false;

var addColor = function(arr) {
var colorsArray = ["green", "red", "yellow", "blue"];
return arr.push(colorsArray[Math.floor(Math.random() * colorsArray.length)]);
};

var flashLights = function(arr) {
var i = 0;

var interval = setInterval(function() {
$("#" + arr[i]).fadeTo("slow", 0).fadeTo("slow", 1);
$("#sound-" + arr[i])[0].play();
i++;
if (i >= arr.length) {
clearInterval(interval);
}
}, 1500);
};

var resetAnswers = function() {
answers = [];
};

var updateRounds = function() {
rounds++;
$("#show-rounds").html(rounds);
};

var resetGame = function() {
rounds = 0;
computerMovements = [];
if (strict === false) {
lastChance = true;
}
resetAnswers();
};

var playerTurn = function() {
//during the game we don't want the player to switch between strict and relaxed
$("#mode").click(function() {
return false;
});

//winning condition
if (rounds === 20) {
alert("You, you, you're good you!");
resetGame();
}

updateRounds();
addColor(computerMovements);
flashLights(computerMovements);

$(".button").off("click").on("click", function() {
$("#sound-" + $(this).attr("id"))[0].play();
answers.push($(this).attr("id"));

for (var i = 0; i
#container {
background-color: gray;
width: 160px;
height: 160px;
margin: 0 auto;
text-align: center;
text-align: justify;
}

#green {
background-color: green;
width: 70px;
height: 70px;
float: left;
}

#red {

JavaScript

The code looks nice and short. I like the comments on the strict and lastChance variables since they explain the game to readers who are not familiar with the game.

Instead of var name = function(...) {}, it is more common to write function name(...) {}.

The function flashLights is always called with computerMovements as its argument. Therefore, you can remove the arr parameter and replace it with computerMovements.

The code below the //during the game comment does not do what the comment says; you can still change the mode during a game. To avoid this, you have to call $("#mode").off("click").

The code if (strict === false && lastChance === true) { can be written shorter, as if (!strict && lastChance) {.

Comparing two arrays by transforming both into JSON format is a nice trick. But that whole if block should be outside the for loop.

In the // wrong answer section, you have some redundant checks:

• when lastChance is true, strict is guaranteed to be false, so you don't need to check this.

• the condition before the Epic fail alert is completely redundant. The first part is already covered by the outside if statement, and the second part is coverted by the if ... then part.

The code of the function that changes the mode can be written a lot simpler:

$("#mode").click(function() {
  strict = !strict;
  lastChance = !strict;
  $("#mode").html(strict ? "Mode: Strict" : "Mode: Relaxed");
});

CSS

The last rule is empty and therefore can be removed.

HTML

The ` element should be near the ` element.

StackExchange Code Review Q#162096, answer score: 3