Simon Game

index.html

<div class="container">
  <h1 class="text-center">Simon Game</h1>
  <div class="row">
    <div class="col-md-12">
      <div class="messages">
          <h2>You Win</h2>
      </div>
    </div>
  </div>
  <div class="row">
    <div id="red" class="col-xs-6 note">
    </div>
    <div id="blue" class="col-xs-6 note">
    </div>
    <div id="green" class="col-xs-6 note">
    </div>
    <div id="yellow" class="col-xs-6 note">
    </div>
  </div>
  
  <div class="row">
    <div class="col-sm-4">
      <button class="btn start-button">Start</button>
    </div>
    <div class="col-sm-4">
      <button class="btn strict-button">Strict Mode</button>
    </div>
    
    <div class="col-sm-4">
      <button class="btn reset-button">Reset</button>
    </div>
  </div>
  
  <div class="row">
    <div class="col-xs-12">
      <div class="progress-segment">
        <div class="bar-segment">
        </div>
      </div> <!-- End Segment -->      
    </div><!-- End Col -->
    
  </div>
  
</div>

script.js

$(document).ready(function(){
  var redBeep = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3");
  var blueBeep = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3");
  var greenBeep = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3");
  var yellowBeep = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3");
  var wrongClick = new Audio("http://www.soundjay.com/button/sounds/beep-03.mp3");
  var computerBeeps = [redBeep, blueBeep, greenBeep, yellowBeep];
  var storeCompBeeps = [];
  var storeUserBeeps = [];
  var delayBeep = 1600;
  var strictMode = false;
  var progressBar = 0;
  var backColors = ["#F44336", "#2196F3", "#4CAF50", "#FFEB3B"];
  var noStrictWrong = false;
  var reset = false;
  
  $(".strict-button").on("click", function() {
    strictMode = !strictMode;
    if(strictMode === true) {
      $(this).fadeTo("slow", 0.4);
    } else {
      $(this).fadeTo("slow", 1);
    }
  });
  
    
  $(".start-button").on("click", randomBeeps);
  
  function randomBeeps() {
    $(".start-button").unbind("click", randomBeeps);
    $(".messages").slideUp();
    if(noStrictWrong === false || reset === true) {
      var randIndex = Math.floor(Math.random() * computerBeeps.length);
      storeCompBeeps.push(computerBeeps[randIndex]);  
      reset = false;
    } else {
      noStrictWrong = false;      
    }
    
    if(storeCompBeeps.length === 5 || storeCompBeeps.length === 9 || storeCompBeeps.length === 13) {
      delayBeep -= 250;
    }
    playTheSecuence();
  } 
  
  $("#red").click({param: redBeep}, colorBeepClick);  
  $("#blue").click({param: blueBeep}, colorBeepClick); 
  $("#green").click({param: greenBeep}, colorBeepClick);  
  $("#yellow").click({param: yellowBeep}, colorBeepClick);
  
  function playTheSecuence() {
    var index = 0;    
    var intervalSetting = setInterval(intervalCode, delayBeep);   
    function intervalCode() {      
      if (index >= storeCompBeeps.length){
        clearInterval(intervalSetting);
      } else {
        storeCompBeeps[index].play();
        if(storeCompBeeps[index] === redBeep) {
          $("#red").fadeTo(300, 0.5, function(){
            $(this).fadeTo(300, 1);
          });
        } else if(storeCompBeeps[index] === blueBeep) {
         $("#blue").fadeTo(300, 0.5, function(){
            $(this).fadeTo(300, 1);
          });
        } else if(storeCompBeeps[index] === greenBeep) {
          $("#green").fadeTo(300, 0.5, function(){
            $(this).fadeTo(300, 1);
          });
        } else {
           $("#yellow").fadeTo(300, 0.5, function(){
            $(this).fadeTo(300, 1);
          });
        }
        index++;
      }
    }
  }
  
  function addBeepAndPlay() {
    if(storeUserBeeps.length < 20) {
      if(storeUserBeeps.length === storeCompBeeps.length) {
        storeUserBeeps = [];
        randomBeeps();
        progressBar = storeCompBeeps.length * 5;
        $(".bar-segment").animate({
          width: progressBar + "%"
        }, function(){
          var numColor = Math.floor(Math.random() * backColors.length);
          $(".bar-segment").prepend("<div class='step'><div class='fill-up'>" + (storeCompBeeps.length - 1) + "</div></div>");
          $(".fill-up:last-child").css({
            backgroundColor: backColors[numColor]
          }).animate({
            height: "30px"
          }, 1000, "easeOutBounce");
        });
      }       
    } else {
      $(".messages h2").html("You Win!");
      $(".start-button").html("Play Again");
      $(".messages").slideDown(1000, "easeOutBounce");
      resetSimonGame();
    }
  }
  
  
  function resetSimonGame() {    
    $(".start-button").on("click", randomBeeps);
    if(strictMode === true || reset === true) {
      $(".bar-segment").html("").animate({
        width: "0"
      });
      storeCompBeeps = [];    
      clearInterval(intervalSetting);
    }
    storeUserBeeps = [];
  }  
  
  function colorBeepClick(colorBeep) {
    colorBeep.data.param.play();
    storeUserBeeps.push(colorBeep.data.param);    
    if(storeUserBeeps[storeUserBeeps.length - 1] !== storeCompBeeps[storeUserBeeps.length - 1]) {     
      wrongClick.play();
      $(".messages").slideDown(1000, "easeOutCirc");
      if(strictMode === true) {      
        $(".messages h2").html("Strict Mode: You Loose!");
        $(".start-button").html("Start Again");
      } else {
        $(".messages h2").html("Wrong Click");
        $(".start-button").html("Continue Playing");
        noStrictWrong = true;
      }
      resetSimonGame();
    }    
    addBeepAndPlay();
  }
  
  $(".reset-button").on("click", function(){
    reset = true;
    $(".messages").slideDown();
    $(".start-button").html("Start");
    $(".messages h2").html("Click the start button to start the game again");
    resetSimonGame();    
  });
  
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

simon-game.markdown

Simon Game

A Pen by Eduardo Sanchez on CodePen.

License.

style.css

body {
  background-color: #212121;
  font-family: oswald;
}

.container {
  max-width: 700px;
  overflow: hidden;
}

#red, #blue, #green, #yellow {
  height: 250px;
}

#red {
  background-color: #F44336;
}

#blue {
  background-color: #2196F3;
}

#green {
  background-color: #4CAF50;
}

#yellow {
  background-color: #FFEB3B;
}

.messages {
  display: none;
  width: 110%;
  height: 500px;
  margin-left: -5%;
  position: absolute;
  z-index: 9999;
  background-color: rgba(255, 255, 255, .6);
}

.messages h2 {
  text-align: center;
  position: relative;
  top: 50%;  
  transform: translateY(-100%);
  color: #F44336;
}

.progress-segment, .bar-segment {
  height: 10px;
  margin: 40px 0;
}

.bar-segment {
  background-color: #4CAF50; 
  width: 0px;
}

.step {
  float: right;
  width: 5%;
  height: 30px;
  text-align: center; 
  overflow: hidden;
  margin-top: -10px;
  margin-left: 15px;  
}

.fill-up {
  position: absolute;
  background-color: #4CAF50;
  width: 30px;
  height: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  padding: 5px;
}

.btn {
  width: 100%;
  background-color: #2196F3;
  color: #fff;
  margin: 30px 0;
}

.note {
  cursor: pointer;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />