cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <audio id="error-audio">
  <source src="https://rawgit.com/bomholtm/fcc/master/_assets/CODEPEN/simon_game/error.mp3" type="audio/mpeg"/>
  <source src="https://rawgit.com/bomholtm/fcc/master/_assets/CODEPEN/simon_game/error.ogg" type="audio/ogg"/>
</audio>
<audio id="green-audio">
  <source src="https://rawgit.com/bomholtm/fcc/master/_assets/CODEPEN/simon_game/green.mp3" type="audio/mpeg"/>
  <source src="https://rawgit.com/bomholtm/fcc/master/_assets/CODEPEN/simon_game/green.ogg" type="audio/ogg"/>
</audio>
<audio id="red-audio">
  <source src="https://rawgit.com/bomholtm/fcc/master/_assets/CODEPEN/simon_game/red.mp3" type="audio/mpeg"/>
  <source src="https://rawgit.com/bomholtm/fcc/master/_assets/CODEPEN/simon_game/red.ogg" type="audio/ogg"/>
</audio>
<audio id="yellow-audio">
  <source src="https://rawgit.com/bomholtm/fcc/master/_assets/CODEPEN/simon_game/yellow.mp3" type="audio/mpeg"/>
  <source src="https://rawgit.com/bomholtm/fcc/master/_assets/CODEPEN/simon_game/yellow.ogg" type="audio/ogg"/>
</audio>
<audio id="blue-audio">
  <source src="https://rawgit.com/bomholtm/fcc/master/_assets/CODEPEN/simon_game/blue.mp3" type="audio/mpeg"/>
  <source src="https://rawgit.com/bomholtm/fcc/master/_assets/CODEPEN/simon_game/blue.ogg" type="audio/ogg"/>
</audio>

<div class="wrapper">
  <div class="container">
    
    <div class="outer">
      <div class="row">
        <span id="green" class="col"></span>
        <div id="red" class="col"></div>
      </div>
      <div class="row">
        <div id="yellow" class="col"></div>
        <div id="blue" class="col"></div>
      </div>
      <div class="inner">
        <p class="counter"></p>
      </div>
    </div>
    
    <div class="controls">
      <a id="start" class="btn">start game</a>
      <a id="stop" class="btn">stop game</a>
      <a id="restart" class="btn disabled">restart game</a>
      <div class="checkbox">
        <input type="checkbox" id="strict" />
        <label for="strict"></label>
        <span>strict</span>
      </div>
    </div>
    
  </div>
</div>


            
          
!
            
              @import url("https://fonts.googleapis.com/css?family=Roboto")

::selection
  background: transparent

body
  background-color: #EEE
  font-family: "Roboto", sans-serif
  user-select: none
  -webkit-tap-highlight-color: transparent
  
.wrapper
  height: calc(100vh - 72px)
  min-height: 500px
  padding: 15px
  position: relative
  @media (min-width:768px)
    min-height: 630px
  
  .container
    height: 470px
    width: 290px
    position: absolute
    margin: auto
    top: 0
    right: 0
    bottom: 0
    left: 0
    @media (min-width:768px)
      height: 600px
      width: 420px
    
    .outer
      position: relative
      height: 290px
      width: 290px
      margin-bottom: 60px
      @media (min-width:768px)
        height: 420px
        width: 420px
      
      .col
        cursor: default
        float: left
        height: 141px
        width: 141px
        @media (min-width:768px)
          height: 202px
          width: 202px
        
      #green
        background-color: #4CAF50
        border-top-left-radius: 100%
        margin: 0 4px 4px 0
        @media (min-width:768px)
          margin: 0 8px 8px 0
          
      #red
        background-color: #F44336
        border-top-right-radius: 100%
        margin: 0 0 4px 4px
        @media (min-width:768px)
          margin: 0 0 8px 8px
          
      #yellow
        background-color: #FFEB3B
        border-bottom-left-radius: 100%
        margin: 4px 4px 0 0
        @media (min-width:768px)
          margin: 8px 8px 0 0
          
      #blue
        background-color: #2196F3
        border-bottom-right-radius: 100%
        margin: 4px 0 0 4px
        @media (min-width:768px)
          margin: 8px 0 0 8px
        
      .inner
        pointer-events: none
        height: 145px
        width: 145px
        background-color: #EEE
        border-radius: 50%
        position: absolute
        top: 50%
        left: 50%
        transform: translate(-50%,-50%)
        margin: 0 auto
        @media (min-width:768px)
          height: 210px
          width: 210px
          
        .counter
          display: none
          color: #212121
          font-size: 24px
          margin: 0
          text-align: center
          vertical-align: middle
          line-height: 145px
          @media (min-width:768px)
            font-size: 32px
            line-height: 210px
        
    .controls
      width: 160px
      margin: 0 auto
      
      .btn
        text-decoration: none
        display: block
        color: #212121
        cursor: pointer
        background-color: #E0E0E0
        font-size: 14px
        text-align: center
        letter-spacing: 0.5px
        border: none
        border-radius: 2px
        height: 36px
        width: 100%
        line-height: 36px
        margin: 15px 0
        text-transform: uppercase
        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)
        
      #stop
        display: none
        
      .disabled
        pointer-events: none
        background-color: #DFDFDF
        box-shadow: none
        color: #9F9F9F
        cursor: default
        
      .checkbox
        width: 15px
        position: relative
        
        label
          cursor: pointer
          position: absolute
          width: 15px
          height: 15px
          top: 0
          left: 0
          background: #F5F5F5
          border: 2px solid #424242
          border-radius: 2px
          &:after
            opacity: 0
            content: ""
            position: absolute
            width: 10px
            height: 5px
            background: transparent
            top: 2px
            left: 1px
            border: 3px solid #F5F5F5
            border-top: none
            border-right: none
            transform: rotate(-45deg)
          
        [type=checkbox]:checked + label
          background-color: #424242
          
        [type=checkbox]:checked + label:after
          opacity: 1
          
        span
          color: #212121
          font-size: 14px
          line-height: 20px
          position: absolute
          top: 0
          left: 25px
          
footer
  background-color: #E0E0E0
  bottom: 0
  font-family: "Roboto", sans-serif
  font-weight: 500
  height: 42px
  width: 100%
  text-align: center
  
  a
    color: #A8A8A8
    line-height: 42px
    position: relative
    top: 2px
    text-decoration: none
    &:focus, &:hover, &:visited
      color: #A8A8A8
    
    .fa-lg
      vertical-align: text-top
      margin-right: 4px
      
            
          
!
            
              $(document).ready(function(){
  var strict, turn = false;
  var pattern = {
    color: ["green", "red", "yellow", "blue"],
    count: 0,
    computer: [],
    player: [],
  };
  var highlight;

  function clearGame(){
    pattern.count = 0;
    pattern.computer = [];
  }
  function clearUser(){
    pattern.player = [];
  }
  function addCount(){
    pattern.count++;
    setTimeout(function(){
      $(".counter").html(pattern.count);
    }, 1000);
  }
  function flashMessage(msg){
    $(".counter").html(msg);
    var lf = function(){
      $(".counter").hide();
      var HnFl = setTimeout(function(){
        $(".counter").show();
      }, 250);
    };
    var cnt = 0;
    lf();
    flHn = setInterval(function(){
      lf();
      cnt++;
      if(cnt === 2){
        clearInterval(flHn);
      }
    }, 500);
  }

  function startGame(){
    clearGame();
    $(".counter").html("––");
    flashMessage("––");
    setTimeout(function(){
      addCount();
      generateGamePattern();
    }, 500);
  }
  
  function generateGamePattern(){
    pattern.computer.push(pattern.color[Math.floor(Math.random() * 4)]);
    showGamePattern();
  }
  function showGamePattern(){
    var i = 0;
    highlight = setInterval(function(){
      switch(pattern.computer[i]){
        case "green":
          $("#green").css("background-color", "#7FE283");
          $("#green-audio")[0].play();
          setTimeout(function(){
            $("#green").css("background-color", "#4CAF50");
          }, 500);
          break;
        case "red":
          $("#red").css("background-color", "#FF7669");
          $("#red-audio")[0].play();
          setTimeout(function(){
            $("#red").css("background-color", "#F44336");
          }, 500);
          break;
        case "yellow":
          $("#yellow").css("background-color", "#FFFF6E");
          $("#yellow-audio")[0].play();
          setTimeout(function(){
            $("#yellow").css("background-color", "#FFEB3B");
          }, 500);
          break;
        case "blue":
          $("#blue").css("background-color", "#54C9FF");
          $("#blue-audio")[0].play();
          setTimeout(function(){
            $("#blue").css("background-color", "#2196F3");
          }, 500);
          break;
      }
      i++;
      if(i >= pattern.computer.length){
        clearInterval(highlight);
        turn = true;
        $(".col").css("cursor", "pointer");
      }
    }, 1000);
    clearUser();
  }
  function checkUserPattern(col){
    if(pattern.player[pattern.player.length - 1] !== pattern.computer[pattern.player.length - 1]){
      if(strict){
        turn = false;
        $(".col").css("cursor", "default");
        flashMessage("!!");
        $(col + "-audio")[0].pause();
        $(col + "-audio")[0].currentTime = 0;
        $("#error-audio")[0].play();
        setTimeout(function(){
          startGame();
        }, 1000);
      }else{
        turn = false;
        $(".col").css("cursor", "default");
        flashMessage("!!");
        $(col + "-audio")[0].pause();
        $(col + "-audio")[0].currentTime = 0;
        $("#error-audio")[0].play();
        setTimeout(function(){
          showGamePattern();
          setTimeout(function(){
            $(".counter").html(pattern.count);
          }, 1000);
        }, 1000);
      }
    }else{
      var check = pattern.computer.length === pattern.player.length;
      if(check){
        if(pattern.count == 20){
          alert("Congratulations, You Won!");
        }else{
          turn = false;
          $(".col").css("cursor", "default");
          addCount();
          generateGamePattern();
        }
      }
    }
  }

  $("#green").click(function(){
    if(turn){
      $("#green").css("background-color", "#7FE283");
      $("#green-audio")[0].play();
      setTimeout(function(){
        $("#green").css("background-color", "#4CAF50");
      }, 500);
      pattern.player.push("green");
      checkUserPattern("#green");
    }
	});
  $("#red").click(function(){
    if(turn){
      $("#red").css("background-color", "#FF7669");
      $("#red-audio")[0].play();
      setTimeout(function(){
        $("#red").css("background-color", "#F44336");
      }, 500);
      pattern.player.push("red");
      checkUserPattern("#red");
    }
	});
  $("#yellow").click(function(){
    if(turn){
      $("#yellow").css("background-color", "#FFFF6E");
      $("#yellow-audio")[0].play();
      setTimeout(function(){
        $("#yellow").css("background-color", "#FFEB3B");
      }, 500);
      pattern.player.push("yellow");
      checkUserPattern("#yellow");
    }
	});
  $("#blue").click(function(){
    if(turn){
      $("#blue").css("background-color", "#54C9FF");
      $("#blue-audio")[0].play();
      setTimeout(function(){
        $("#blue").css("background-color", "#2196F3");
      }, 500);
      pattern.player.push("blue");
      checkUserPattern("#blue");
    }
	});
  
  $("#start").click(function(){
    $("#green-audio")[0].volume = 0;
    $("#red-audio")[0].volume = 0;
    $("#yellow-audio")[0].volume = 0;
    $("#blue-audio")[0].volume = 0;
    $("#green-audio")[0].play();
    $("#red-audio")[0].play();
    $("#yellow-audio")[0].play();
    $("#blue-audio")[0].play();
    $("#green-audio")[0].pause();
    $("#red-audio")[0].pause();
    $("#yellow-audio")[0].pause();
    $("#blue-audio")[0].pause();
    $("#green-audio")[0].currentTime = 0;
    $("#red-audio")[0].currentTime = 0;
    $("#yellow-audio")[0].currentTime = 0;
    $("#blue-audio")[0].currentTime = 0;
    $("#green-audio")[0].volume = 1;
    $("#red-audio")[0].volume = 1;
    $("#yellow-audio")[0].volume = 1;
    $("#blue-audio")[0].volume = 1;
    $("#start").hide();
    $("#stop").css("display", "block");
    $("#restart").removeClass("disabled");
    $(".counter").show();
    startGame();
	});
  $("#stop").click(function(){
    $("#stop").hide();
    $("#start").show();
    $("#restart").addClass("disabled");
    $(".counter").hide();
    clearInterval(highlight);
	});
  $("#restart").click(function(){
    clearInterval(highlight);
    startGame();
	});
  $("#strict").change(function(){
    if($(this).is(":checked")){
      strict = true;
    }else{
      strict = false;
    }
  }); 
});

            
          
!
999px
Loading ..................

Console