Here is the JS Fiddle: https://jsfiddle.net/4jo9hvpk/
The code is fully functional. Could someone point out any mistakes in style? Any redundancies? I want to work on making my code look better and being more efficient.
$(document).ready(function(){
var button = $(".buttons");
var allButtons = [$("#red"), $("#blue"), $("#green"), $("#yellow")];
var sequence, playerTurn, wins, strict, seqPosition;
startGame();
// post: initializes the variables and starts the game
function startGame() {
strict = confirm("Would you like to play the difficult mode?");
sequence = []; // current random sequence of buttons
playerTurn = false;
wins = 0;
computerTurn();
}
// post: picks a random button and adds its position to the sequence;
// if the player has won 20 times, ends the game and starts over
function computerTurn() {
seqPosition = 0; // position of player in sequence
$("#count").html(wins);
if (wins === 20) {
alert("You win!");
startGame();
} else {
sequence.push(Math.floor(Math.random() * 4)); // randomly pick 0, 1, 2, or 3
playSequence();
}
}
// post: goes through each button and changes its color and plays the sound
function playSequence() {
playSound(allButtons[sequence[0]]);
var i = 0
var progress = false;
loop();
// post: if sequence has been played completely, exits the function;
// plays sound for, and changes color of, button in sequence
function loop(){
i++;
if(i == sequence.length)
return;
setTimeout(function(){
playSound(allButtons[sequence[i]])
loop();
}, 1000);
};
playerTurn = true;
}
// pre: takes a button as a parameter
// post: changes the color of the button and plays the appropriate sound
function playSound(btn) {
btn.toggleClass("act");
var link;
switch (parseInt(btn.attr("val"))) {
case 0:
link = "https://s3.amazonaws.com/freecodecamp/simonSound1.mp3";
break;
case 1:
link = "https://s3.amazonaws.com/freecodecamp/simonSound2.mp3";
break;
case 2:
link = "https://s3.amazonaws.com/freecodecamp/simonSound3.mp3";
break;
case 3:
link = "https://s3.amazonaws.com/freecodecamp/simonSound4.mp3";
break;
}
var audio = new Audio(link);
audio.play();
setTimeout(function(){
btn.toggleClass("act")
}, 700);
}
// post: if in strict mode, restarts the game if the player makes a mistake;
// if not in strict mode, replays the sequence if player makes a mistake;
// lets the player replay the sequence and then gives control back to the computer
button.on("click", function(){
if (playerTurn) {
var btnVal = parseInt($(this).attr("val"));
if (btnVal === sequence[seqPosition]) {
playSound(allButtons[sequence[seqPosition]]);
seqPosition++;
setTimeout(function(){
if (seqPosition === sequence.length) {
playerTurn = false;
wins++;
computerTurn();
}
}, 1000);
} else {
playerTurn = false;
if (strict) {
alert("You lose!");
startGame();
} else {
seqPosition = 0;
var audio = new Audio("horn.mp3");
audio.play();
setTimeout(function(){
playSequence();
}, 1000);
}
}
}
});
});
body {
text-align: center;
}
h1 {
font-size: 3em;
}
.buttons {
cursor: pointer;
height: 200px;
width: 200px;
}
.act {
background-color: black !important;
}
#red {
background-color: red;
}
#red:active {
background-color: black;
}
#blue {
background-color: blue;
}
#blue:active {
background-color: black;
}
#green {
background-color: green;
}
#green:active {
background-color: black;
}
#yellow {
background-color: yellow;
}
#yellow:active {
background-color: black;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-1">
<h1>Simon Game</h1>
<div class="buttons" id="red" val="0"></div>
<div class="buttons" id="blue" val="1"></div>
<div class="buttons" id="green" val="2"></div>
<div class="buttons" id="yellow" val="3"></div>
</div>
</div>
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-1"><h4>Count: <span id="count">0</span></h4></div>
</div>
</div>