Created a game of Simon using HTML, CSS, and JavaScript

$(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>