Simon Game

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

Thumbnail
This awesome code was written by mykatz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mykatz ©
  • HTML
  • CSS
  • JavaScript
    <div class="main"> 
  <div id="green" class="button"> </div> 
  <div id="red" class="button"> </div>
  <div id="yellow" class="button"> </div>
  <div id="blue" class="button"> </div> 
  <div id="middle"> 
    <h1> Simon </h1>
    <div id="count"> 1 </div>
    <button id="start"> Start </button> <button id="strict" class=""> Strict </button> <br> <br> <br>
    <i class="fa fa-refresh" aria-hidden="true"></i>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/mykatz/simon-game-BZvKgg */
    body{
  background-image: url("http://i.imgur.com/llnXErB.jpg");
  user-select: none;
}

h1{
  font-family: 'Alfa Slab One', cursive;
  font-size: 3.5rem;
  margin-bottom: 0.5rem;
}

.main{
  height: 40rem;
  width: 40rem;
  top: 5vh;
  background-color: black;
  position: relative;
  border-radius: 100%;
  margin: auto;
}

#green{
  background-color: green;
  border-radius: 100% 0% 0% 0%;
}

#red{
  background-color: #e50000;
  border-radius: 0% 100% 0% 0%;
}

#yellow{
  background-color: #cccc00;
  border-radius: 0% 0% 0% 100%;
}

#blue{
  background-color: #00007f;
  border-radius: 0% 0% 100% 0%;
}

.button{
  height: 18rem;
  width: 18rem;
  float: left;
  border: 1em solid #eaeaea;
}

#middle{
  height: 20rem;
  width: 20rem;
  border-radius: 100%;
  border: 5px solid white;
  background-color: #eaeaea;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10rem;
  margin-left: -10rem;
  text-align: center;
}

#count{
  margin: auto;
  font-size: 2rem;
  height: 2rem;
  width: 15rem;
  background: green;
  font-family: 'VT323', monospace;
  border: 5px solid white;
  margin-bottom: 1.5rem;
}

#start, #strict{
  padding: 10px 10px;
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #d9534f;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  transition: filter 0.5s ease;
}

#start:hover, #strict:hover{
  filter: brightness(90%);
}

#start:active, #strict:active{
  filter: brightness(90%);
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

#start{
  margin-right: 5rem;
  background-color: #4CAF50;
}

/* CSS classes for changing buttons */ 
.pressed{
  box-shadow: 0 9px red !important;
}
.active{
  filter: brightness(200%);
}

.fa{
  font-size: 2rem;
  cursor: pointer;
}


/*Downloaded from https://www.codeseek.co/mykatz/simon-game-BZvKgg */
    $(document).ready(function(){
  var hasStarted = false;
  var inputReady = false;
  var isStrict = false;
  var current = 0;
  var order = [];
  var buttonIDs = ["#green","#red","#yellow","#blue"];
  var sounds = [
    "https://s3.amazonaws.com/freecodecamp/simonSound1.mp3",
    "https://s3.amazonaws.com/freecodecamp/simonSound2.mp3",
    "https://s3.amazonaws.com/freecodecamp/simonSound3.mp3",
    "https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"
  ];
  var audio;
  
  function toggleOn(int){
    $(buttonIDs[order[int]]).addClass("active");
    audio = new Audio(sounds[order[int]]);
    audio.play();
    window.setTimeout(toggleOff, 500,int);
  }
  
  function toggleOff(int){
    $(buttonIDs[order[int]]).removeClass("active");
    if(int != order.length-1 && inputReady === false){window.setTimeout(toggleOn,150,int+1);}
    else if(inputReady === false){inputReady = true; current = 0;}
  }
  
  function game(){
    if(parseInt($("#count").html()) == 21){
      alert("You Win!");
      reset();
    }
    order.push(Math.round(Math.random() * 3))
    toggleOn(0);
  }
  
  function reset(){
    hasStarted = false;
    inputReady = false;
    current = 0;
    order = [];
    $("#count").html("0");
  }
  
  $(".button").on("click", function(){
    if(inputReady === true){
      if($(this).attr("id") === buttonIDs[order[current]].substring(1)){ current++;}
      else{
        if(isStrict){
          alert("Incorrect!  Resetting...")
          reset();
        }
        else{
          inputReady = false;
          window.setTimeout(toggleOn, 1000, 0);
        }
      }
      if(current == order.length){inputReady = false; $("#count").html(parseInt($("#count").html()) + 1); window.setTimeout(game, 1000);}
    }
  });
  
  $(".button").mousedown(function(){
    if(inputReady === true){
      
      audio = new Audio(sounds[buttonIDs.indexOf("#"+$(this).attr("id"))]);
      audio.play();
      $(this).addClass("active");
      
    }
  });
  
 $(".button").mouseup(function(){
   $(this).removeClass("active");
 }); 
  
  $("#start").on("click",function() {
    if(hasStarted === false){game(); hasStarted = true;}
  });
  
  $("#strict").on("click", function(){
    $(this).toggleClass("pressed");
    isStrict = !isStrict;
  });
  
  $(".fa").on("click", function(){
    reset();
    $("#green").removeClass("active");
    $("#red").removeClass("active");
    $("#blue").removeClass("active");
    $("#yellow").removeClass("active");
  });
  
});

Comments