Simon2

index.html

<div class="circle-outer">
  <div class="row">
    <div class="green btn" id="0">
    </div>
    <div class="red btn" id="1">
    </div>
  </div>
  <div class="row">
    <div class="yellow btn" id="2">
    </div>
    <div class="blue btn" id="3">
    </div>
  </div>
  <div class="circle-inner">
    <h1>Simon</h1>
    <div class="row">
      <h3 class="count" id="turn">--</h3>
      <div class="start">
      </div>
      <div class="strict">
      </div>
      <div class="light">
      </div>
    </div>
    <div class="row">
      <p>Count</p>
      <p>Start</p>
      <p>Strict</p>
    </div>
    <p>Off</p>   
    <div class="switch">
      <div class="toggle">
      </div>
    </div>
    <p>On</p>    
  </div>
</div>

script.js

$(document).ready(function(){
  
  var sounds = [];
  
  sounds[0] = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3");
  sounds[1] = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3");
  sounds[2] = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3");
  sounds[3] = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3");
  
  var switchOn = false;
  
  $(".toggle").on("click", function(){
    
    if (switchOn) {
      $(".count").text("--")
      gameApp.reset();
    }
    
    switchOn = !switchOn;    
    $(this).toggleClass("toggle-on");
    $(".count").toggleClass("count-on");
  });
  
  $(".start").on("click", function() {    
    if (switchOn) {
      $(".btn").css("cursor", "pointer")
      newGame();
    }
  });
  
  $(".strict").on("click", function() {    
    if (switchOn) {
      $(".light").toggleClass("light-on")
    }
  });

  function newGame() {
    
    flashAlert("--");
    gameApp.reset();
    compTurn();
  }

  function flashAlert(message) {
    
    var i = 0;   
    function flashLoop() {
      setTimeout(function() {
          $(".count").removeClass("count-on");
          $(".count").text(message);
          i++;
          
          setTimeout(function() {
            $(".count").addClass("count-on");
          }, 250);
          
          if (i < 3) {
            flashLoop();
          } else {     
            displayCount();
          }          
      }, 500);    
    }
    flashLoop();
  }
  
  var gameApp = {};
  
  gameApp.reset = function() {
    this.moves = [];
    this.count = 0;
    this.index = 0;
    this.running = true;
    this.lock = false;
    this.strict = false;
  }

  function compTurn() {
    
    gameApp.lock = true;     
    gameApp.index = 0;
    gameApp.count++;     
    gameApp.moves.push(Math.floor(Math.random() * 4));
     setTimeout(function() {
      displayMoves();
    }, 1000)
  }

  function displayMoves() {
    
    var i = 0;
    function displayLoop() {     
      setTimeout(function() {

        var move = gameApp.moves[i];
               sounds[move].play();
        
        $("#" + move).addClass('light-up');
        setTimeout(function() {
          $("#" + move).removeClass('light-up');
        }, 500);
        
        i++
        
        if (i < gameApp.moves.length) {
          displayLoop();
        } else {
          
          gameApp.lock = false;
        }
      }, 1000);
    }    
    displayLoop();
  }

  function displayCount() {
    
    var tens = (gameApp.count < 10) ? "0" : "";   
    $("#turn").text(tens + gameApp.count.toString());
  }

  $(".btn").on("click", function() {
    
    if (!gameApp.lock) {
      
      var clickedBtn = $(this).attr("id");
      $("#" + clickedBtn).addClass('light-up');
      setTimeout(function() {
        $("#" + clickedBtn).removeClass('light-up');
      }, 250);     
      
      var correctBtn = gameApp.moves[gameApp.index].toString();
      if (clickedBtn === correctBtn) {
        gameApp.index++;
        
        if (gameApp.index === 15) {
          flashAlert("W");
          $(".btn").addClass('light-up')
          setTimeout(function() {
            $(".btn").removeClass('light-up');
          }, 250);  
          gameApp.reset();
        }
      
      } else if (clickedBtn !== correctBtn) {
        flashAlert("!!");
        gameApp.reset();
      }
      
      if (gameApp.index === gameApp.moves.length) { 
        displayCount();
        compTurn();
      } 
    }
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

simon2.markdown

Simon2

A Pen by Zoran Stanic on CodePen.

License.

style.css

body {
  font-family: "Times New Roman", Times, serif;
  background-color:black;
  background-size: cover;
  height: 100%;
  margin: 0;
  padding: 0;
}

.circle-outer {
  width: 500px;
  height: 500px;
  border-radius: 100%;
  background-color: #333;
  margin: 200px auto;
  position: relative;
  box-shadow: 2px 2px 20px;
}

.btn {
  width: 215px;
  height: 215px;
  position: relative;
}

.green {
  background-color: green;
  opacity: 0.5;
  border-radius: 100% 0 0 0;
  display: inline-block;
  border: 15px solid #333;
  margin: 10px -10px -10px 10px;
}

.red {
  background-color: red;
  opacity: 0.5;
  border-radius: 0 100% 0 0;
  display: inline-block;
  border: 15px solid #333;
  margin-bottom: -10px;
}

.yellow {
  background-color: yellow;
  opacity: 0.5;
  border-radius: 0 0 0 100%;
  display: inline-block;
  border: 15px solid #333;
  margin: 0 -10px 0 10px;
}

.blue {
  background-color: blue;
  opacity: 0.5;
  border-radius: 0 0 100% 0;
  display: inline-block;
  border: 15px solid #333;
}

.light-up {
  opacity: 0.8;
}

.circle-inner {
  width: 225px;
  height: 225px;
  top: 50%;
  left: 50%;
  border-radius: 100%;
  background-color: #e6e6e6;
  border: 20px solid #333;
  position: absolute;
  margin: -132px -132px;
  text-align: center;
}

.circle-inner h1 {
  margin: 30px 0 10px 0;  
  font-size: 50px;
  font-weight: 900;
}

.circle-inner p {
  margin: 5px 10px;
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
}

.count {
  width: 50px;
  margin: -5px 10px;
  display: inline-block;
  color: #900000;
  background-color: #480000;
  border-radius: 10px;
  border: 4px solid #333;
  font-size: 24px;
  letter-spacing: 3px;
}

.start {
  width: 20px;
  height: 20px;
  margin: -5px 10px;
  display: inline-block;
  position: relative;
  background-color: #990000;
  border-radius: 100%;
  border: 4px solid #333;
  box-shadow: 1px 1px 5px;
}

.start:hover,
.strict:hover,
.switch:hover {
  cursor: pointer;
}

.start:active {
  top: 1px;
  box-shadow: 1px 1px 2px;
}

.strict {
  width: 20px;
  height: 20px;
  margin: -5px 15px -5px 15px;
  display: inline-block;
  position: relative;
  background-color: #999900;
  border-radius: 100%;
  border: 4px solid #333;
  box-shadow: 1px 1px 5px;
}

.light {
  width: 4px;
  height: 4px;
  display: inline-block; 
  position: relative;
  border: 2px solid #333;  
  bottom: 26px;
  right: 36px;
  border-radius: 100%;
  background-color: #480000;  
}

.light-on {
  background-color: red;
}

.strict:active {
  top: 1px;
  box-shadow: 1px 1px 2px;
}

.switch {
  width: 50px;
  height: 25px;
  display: inline-block;  
  position: relative;
  top: 8px;
  background-color: #333;
  border-radius: 4px;
}

.toggle {
  width: 19px;
  height: 19px;
  position: relative;
  background-color: #6666ff;
  border: 3px solid #333;
  border-radius: 4px;
}

.toggle-on {
  left: 25px;
}

.count-on {
  color: red;
}