<audio id="gsound" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></audio>
<audio id="rsound" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></audio>
<audio id="ysound" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></audio>
<audio id="bsound" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></audio>
<audio id="wrongsound" src="http://www.freesound.org/data/previews/331/331912_3248244-lq.mp3"></audio>

<div>
  <div class="left">
    <div class="score">
      <div> score </div>
      <div id="score_count"> -- </div>
    </div>
  </div>
  <div class="center">
    <a class="active_field" id="g"></a>
    <a class="active_field" id="r"></a>
    <a class="active_field" id="b"></a>
    <a class="active_field" id="y"></a>
  </div>
  <div class="right">
    <div id="start">start</div>
    <div id="strict">strict</div>
  </div>
</div>
body {
  background-color: #E3C4C4;
}

a{
display:inline-block;
border-style: solid;
}

a:hover{
  background-color:lightblue;
}

#g{
position:absolute;
top: 50px;
left: 700px;
border-top-left-radius:200px;
height:200px;
width: 200px;
background-color:green;
}

#r{
position:absolute;
top: 50px;
left:900px;
border-top-right-radius:200px;
height:200px;
width: 200px;
background-color: red;
}

#b{
position:absolute;
top:250px;
left:700px;
border-bottom-left-radius:200px;
height:200px;
width: 200px;
background-color: blue;
}

#y{
position:absolute;
top:250px;
left:900px;
border-bottom-right-radius:200px;
height:200px;
width: 200px;
background-color: yellow;
}

.right{
  position:absolute;
  top: 225px;
  left: 1125px;
}

.left{
  position:absolute;
  top: 225px;
  left: 625px;
}

.score {
  text-align: center;
}

#strict {
  margin-top: 10px;
  background-color: #BCC122;
  border-style: solid;
  border-color: black;
  border-radius: 10px;
  color: black;
}

#start {
  background-color: #AD1D1D;
  border-style: solid;
  border-radius: 10px;
}

.score {
  background-color: lightblue;
  border-style: solid;
  border-radius: 10px;
}


//copy pasted ben blood audio buttons.  No clue about audio.

color_grid = {
  "g" : "green",
  "b" : "blue",
  "y" : "yellow",
  "r" : "red"
}

$(document).ready(function() {
    strict_mode=0;
    game_on=0;
    set_up_game();
});

function set_up_game(){
  $("#start").on("click", function(){
    $("#start").css('background-color','red');
    start_game();
  });
  $("#strict").on("click",function(){
    if (strict_mode == 0) {
      strict_mode = 1
      $("#strict").css('background-color','yellow');
    } else {
      strict_mode = 0
      $("#strict").css('background-color','#BCC122');
    }
  });
}

function start_game(){
  if (game_on == 0 ){
      game_on = 1;
      colors=[];
      alert('starting game!');
      computer_turn();
  } else {
    game_on = 0;
    reset_game();
  }

}

function color_change(color_value,timeout){
  setTimeout(
    function(){
      $("#" + color_value + "sound").get(0).play();
      $("#" + color_value).css('background-color','lightblue');
      setTimeout(
      function(){
         $("#" + color_value).css('background-color',color_grid[color_value]);
      },
      1000
      )
    },
    timeout
  )
}

function computer_turn(){
  add_color_sequence();
  play_color_sequence(colors);
  activate_buttons();
}

function add_color_sequence(){
  var possible_colors = ['g','r','y','b']
  var new_color_number = Math.floor(Math.random() * 4)  
  var new_color = possible_colors[new_color_number];
  colors.push(new_color);
  return 0
}

function play_color_sequence(colors){
    setTimeout(function(){
      $("#score_count").html(colors.length).css('color','black');
    },1000)
    for (var i = 0; i < colors.length;i++){
      color = colors[i];
      timeout=(i+1)*2000
      color_change(color,timeout);
    }
}

function activate_buttons(){
  player_choice=[];
  $(".active_field").on("click",function(){
    var new_value=$(this).attr('id');
    color_change(new_value,250);  
    if (new_value == colors[player_choice.length]){
      player_choice.push(new_value);
    } else {
      deactivate_buttons();
      $("#wrongsound").get(0).play();
      $("#score_count").html("!!!").css('color','red');
      if (strict_mode==1){
        colors=[];
        strict_mode_restart();
      } else {
        play_color_sequence(colors);
        activate_buttons();
      } 
    }
    if (player_choice.length == 20){
      alert("You Win!")
      reset_game();
      return 0;
    }
    if (colors.length == player_choice.length){
      deactivate_buttons();
      computer_turn();
    }
    return 0
  })
}

function deactivate_buttons(){
  $(".active_field").off("click");
}

function reset_game(){
  deactivate_buttons();
  $("#score_count").html('--');
  $("#start").css("background-color","#AD1D1D");
  player_choice=[];
  colors=[];
}

function strict_mode_restart(){
  deactivate_buttons();
  player_choice=[];
  colors=[];
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdn.jsdelivr.net/bluebird/latest/bluebird.min.js