Simon Game 3

In this example below you will see how to do a Simon Game 3 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by dana_mn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dana_mn ©
  • HTML
  • CSS
  • JavaScript
    <div class='alert'></div>
<div class="strict-alert"></div>
<div class="background">
  <div class="color" id="green"></div>
  <div class="color" id="red"></div>
  <div class="color" id="blue"></div>
  <div class="color" id="yellow"></div>
  <div id="center">
    <div class="title"> 
        simon<sup id="reg">&reg;</sup> 
    </div>
    <div class="btn-container">
      <div class="btn-div" id="start-div">
        <button class="btn" id="start-btn" > </button>
        <p class="label" id="start-label">start</p>
      </div>
      <div class="btn-div" id="strict-div">
        <button class="btn" id="strict-btn"> </button>
        <p class="label" id="strict-label">strict</p>
      </div>
    </div>
    <div class="level-container">
      <div id="level-display">
        01
      </div>
      <p class="label" id="level-label">level</p>
    </div>
  </div> <!--center-->
</div>  <!--background-->

/*Downloaded from https://www.codeseek.co/dana_mn/simon-game-3-grqxEQ */
    .alert {
  height: 40px;
  margin-top:30px;
  margin-bottom:0;
  text-align:center;
  font-size: 1.6em;
  color: crimson;
}

.background {
  background-color:black;
  border-radius:50%;
  width:400px;
  height:400px;
  margin:40px auto;
  position:relative;
  box-shadow: 10px 10px 10px grey;
}
.color {
  position:absolute;
  width:180px;
  height: 180px;
  cursor: pointer; cursor: hand;
  opacity:0.5;
}
.color-lit {
  opacity:1;
}
#green {
  top:15px;
  left: 15px;
  background-color:green;
  border-top-left-radius:100%;
}
#red {
  top:15px;
  left: 205px;
  background-color:red;
  border-top-right-radius:100%;
}
#blue {
  top:205px;
  left: 205px;
  background-color:blue;
  border-bottom-right-radius:100%;
}
#yellow {
  top:205px;
  left: 15px;
  background-color:yellow;
  border-bottom-left-radius:100%;
  cursor: pointer; cursor: hand;
}
#center {
  position:absolute;
  top:100px;
  left: 100px;
  width:200px;
  height:200px;
  background-color:black;
  border-radius:100%;
  z-index:10;
}
.title {
  color:white;
  text-align: center;
  margin: 30px 0px 0px 0px;
  font-family: 'Limelight', cursive;
  font-size:2.6em;
  font-weight:900;
  pointer-events:none;
  }
#reg {
  font-size:18px;
  margin:0px;
  padding:0px;
}

/*buttons*/
.btn-container{
  display:flex;
  order:1px solid red;
  justify-content:center;
}
.btn-div {
  width:45px;
  height:auto;
  text-align:center;
  order:1px solid white;
  margin:0px 20px;
}

.btn {
  background-color: yellow;
  height:25px;
  width:25px;
  border-radius:50%;
  border:3px solid #4D5780;
  box-shadow:1px 1px 2px #6E7DB8;
  cursor: pointer; cursor: hand; 
}
#strict-btn {
  background-color: #660000;
}
.label {
  color:white;
  text-transform:uppercase;
  font-family: 'BenchNine', sans-serif;
  margin:3px 0px 0px;
}
.level-container{
  width: 50px;
  margin:auto;
  text-align:center;
}
#level-display {
  border: 3px solid #800000;
  height:27px;
  width: 46px;
  border-radius:12%;
  color:white;
  font-family: 'Audiowide', cursive;
  font-size: 1.2em;
  padding:0px;
}
.strict-on {
  background-color:red !important;
}
.btn:focus {
  outline:none;
}


/*Downloaded from https://www.codeseek.co/dana_mn/simon-game-3-grqxEQ */
    // to do: - disable buttons while pattern plays
// 

var main = function () {
  var pattern = [];
  var level = 1;
  var index = 0;
  var playingPattern= false;
  var strictOn = false;
  
  var objGreen = document.createElement("audio");
        objGreen.src='https://s3.amazonaws.com/freecodecamp/simonSound1.mp3';
        objGreen.volume=0.90;
        objGreen.autoPlay=false;
        objGreen.preLoad=true;  
  var objRed = document.createElement("audio");
        objRed.src='https://s3.amazonaws.com/freecodecamp/simonSound2.mp3';
        objRed.volume=0.90;
        objRed.autoPlay=false;
        objRed.preLoad=true;
  var objBlue = document.createElement("audio");
        objBlue.src='https://s3.amazonaws.com/freecodecamp/simonSound3.mp3';
        objBlue.volume=0.90;
        objBlue.autoPlay=false;
        objBlue.preLoad=true;
  var objYellow = document.createElement("audio");
        objYellow.src='https://s3.amazonaws.com/freecodecamp/simonSound4.mp3';
        objYellow.volume=0.90;
        objYellow.autoPlay=false;
        objYellow.preLoad=true;
  
   
  
  function createRandomPattern() {
    var randomColor; 
    var randomNr = Math.floor(Math.random() * 4);
        
    switch (randomNr) {
      case 0:
        randomColor = "green";
        break;
      case 1:
        randomColor = "red";
        break;
      case 2:
        randomColor = "yellow";
        break;
      case 3:
        randomColor = "blue";
        break;
    }
    pattern.push(randomColor);
    
  }
  
  function lightColor(color) {    
    $("#"+color).toggleClass("color-lit");
    setTimeout (function ()  {
      $("#"+color).toggleClass("color-lit");

    }, 800);
    
    if (color == 'green') {
      objGreen.play();
    } else if (color == 'red') {
      objRed.play();
    } else if (color == 'blue') {
      objBlue.play();
    } else if (color == 'yellow') {
      objYellow.play();
    }
  }
  
  function playPattern(){
    var loop = pattern.length;
    playingPattern=true;
    var looper = function () {
    lightColor(pattern[pattern.length-loop]);
    $(".alert").html("Pay attention to the pattern!");
    
    if (loop >1) {
      loop--;
    } else {
      setTimeout (function ()  {
      playingPattern=false;
      $(".alert").html("Repeat the pattern!");
    }, 1500);
      return;
    }    
    setTimeout (looper, 1000);  
  }
  looper();
  }
  
  
  $('.color').click (function getClickedColor() {
    var clickedColor;
    if (playingPattern) {
      event.preventDefault();
      return;
    } else {
    
    if ($(this).is("#blue")) {
      clickedColor = "blue";
      lightColor('blue');
    } else if ($(this).is("#green")) {
      clickedColor = "green";
      lightColor('green');
    } else if ($(this).is("#red")) {
      clickedColor = "red";
      lightColor('red');
    } else if ($(this).is("#yellow")) {
      clickedColor = "yellow";
      lightColor('yellow');
    }
    
    if (clickedColor == pattern[index]) {
      index++;
    } else {
      playingPattern=true;
     
      
      if (!strictOn) { 
         $(".alert").html("Wrong. Try again!");
      setTimeout ( function ()  {
          $(".alert").html("");
      }, 1500); 
          setTimeout (playPattern, 1500);
          index = 0;
      } else {
         $(".alert").html("Wrong. Back to level 1!");
      setTimeout ( function ()  {
          $(".alert").html("");
      }, 1500); 
          level = 1;
          $("#level-display").html('01');
          pattern=[];
          createRandomPattern();
          setTimeout (playPattern, 1500); 
      }   
        
    }
    
    if (index == level) { 
      setTimeout (function () {
          level++;
          index = 0;

          var displayLevel;
          if (level < 10) {
              displayLevel = "0"+parseInt(level);
          } else {
              displayLevel = level;
          }
          $("#level-display").html(displayLevel);

          createRandomPattern();
          playPattern();
      }, 2000);
    }
    }
  }) 
  //click

  
 $("#start-btn").click ( function(){
   pattern=[]; 
   $(".alert").html("Let's start!");
   setTimeout ( function ()  {
          $(".alert").html("");
   }, 2000); 
   level = 1;
   $("#level-display").html('01');
   createRandomPattern();
   setTimeout(playPattern, 1500);
 })
  
 
 $("#strict-btn").click ( function(){ 
   $(this).toggleClass("strict-on");
   strictOn = !strictOn;
 })
 

  
}
$(document).ready(main)

Comments