Pen Settings

HTML

CSS

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.

+ add another resource

JavaScript

Babel includes JSX processing.

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.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="wrapper">

  <div id="game">
    <div id="buttonGreen" class="btn colorBtn"></div>
    <div id="buttonRed" class="btn colorBtn"></div>
    <div id="center">
      <h1 class="text-center">Simon<sup>&reg;</sup></h1>
      <div class="row">
        <div id="boxCount">
          <div id="successCounter">
            <span></span>
          </div>
          <div>Count</div>
        </div>
        <div id="boxStart">
          <button id="buttonStart" class="btn clickable"></button>
          <div>Start</div>
        </div>
        <div id="boxStrict">
          <div id="ledStrict"></div>
          <button id="buttonStrict" class="btn clickable"></button>
          <div>Strict</div>
        </div>
      </div>
      <div id="switch" class="row">
        <div id="switchOff">
          Off
        </div>
        <div id="switchSlider" class="clickable">
          <div id="switchBar"></div>
        </div>
        <div id="switchOn">
          On
        </div>
      </div>
    </div>
    <div id="buttonYellow" class="btn colorBtn"></div>
    <div id="buttonBlue" class="btn colorBtn"></div>
  </div>

  <footer class="text-center">
    Made with <i class="glyphicon glyphicon-heart"></i> by<br/>
    <a href='/kode29'>Kyle M. Perkins</a>
</div>
  
<audio id="soundGreen" preload>
  <source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"/>
</audio>
<audio id="soundRed" preload>
  <source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" type="audio/mpeg"/>
</audio>
<audio id="soundYellow" preload>
  <source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" type="audio/mpeg"/>
</audio>
<audio id="soundBlue" preload>
  <source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" type="audio/mpeg"/>
</audio>
<audio id="error" preload>
  <source src="http://audiosoundclips.com/wp-content/uploads/2011/12/Beep2.mp3" type="audio/mpeg"/>
  </audio>
  
              
            
!

CSS

              
                /* First time using Sass */

$buttonHoverRed: #ff4c4c
$buttonRed: #900
$buttonHoverGreen: #13ff7c
$buttonGreen: #090
$buttonHoverYellow: #fed93f
$buttonYellow: #990
$buttonHoverBlue: #1c8cff
$buttonBlue: #009
$gameColor: #333
$buttonStart: #FC0102
$buttonStrict: #ff0
$switchBar: #1d7cf2

*
  box-sizing: border-box

#wrapper
  width: 500px
  margin: 5% auto


#game
  height: 520px
  width: 520px
  border-radius: 100%
  padding: 10px
  background-color: $gameColor
  box-shadow: 0 0 15px rgba(0,0,0,.5)
  >div
    height: 250px
    width: 250px
    float: left
    border: 12px $gameColor solid
  .clickable
    cursor: pointer
  .unclickable
    cursor: default
  #buttonGreen
    background-color: $buttonGreen    
    border-top-left-radius: 100%
    &.light
      background-color: $buttonHoverGreen
  #buttonRed
    background-color: $buttonRed
    border-top-right-radius: 100%
    &.light
      background-color: $buttonHoverRed
  #buttonYellow
    background-color: $buttonYellow
    border-bottom-left-radius: 100%
    &.light
      background-color: $buttonHoverYellow
  #buttonBlue
    background-color: $buttonBlue
    border-bottom-right-radius: 100%
    &.light
      background-color: $buttonHoverBlue
  #center
    border-radius: 100%
    position: relative
    top: -125px
    left: 125px
    background-color: #ECE7EE
    margin-bottom: -250px
    padding: 25px    
    text-align: center
    h1
      font-family: "Alfa Slab One", Arial, sans-serif
      font-size: 340%
      sup
        font-size: 35%
        position: relative
        top: -1.15em
    #buttonStart
      background-color: $buttonStart
    #buttonStrict
      background-color: $buttonStrict
    button
      border-radius: 100%
      height: 25px
      width: 25px
      border: 3px solid #666
      box-shadow: 0 3px 5px rgba(0,0,0,.5)
      padding: 0
      &:active
        transform: translate(0, 2px)
      &:focus
        outline: 0
    .row
      text-transform: uppercase
      font: 9pt/1.5em "Oswald", Arial, sans-serif
      text-align: center
    #boxCount
      width: 35%
      #successCounter
        background-color: #300
        border-radius: 5px
        height: 40px
        font: 26pt/0.7em "VT323", "Courier Sans", monospace
        color: #c00
        border: 3px #333 solid
        padding: 6px
        cursor: default
      
    #boxStart, #boxStrict
      width: 32.5%
    #boxStart button, #boxStrict button
      margin: 8px auto
    #boxStart, #boxStrict, #boxCount
      float: left
    #ledStrict
      border-radius: 100%
      height: 10px
      width: 10px
      background-color: #300
      margin: auto
      position: relative
      top: -6px
      margin-bottom: -11px
      right: 1px
      border: 2px #333 solid
      &.active
        background-color: #c00
    #switch
      width: 55%
      margin: 10px auto
      >div
        float: left
        height: 20px
        line-height: 18px
      #switchOff
        text-align: right
      #switchOn
        text-align: left
      #switchOn, #switchOff
        width: 30%
        padding: 5px
      #switchSlider
        width: 40%
        background-color: #000
        border-radius: 5px
        padding: 2px
        #switchBar
          height: 16px
          width: 16px
          border-radius: 5px
          background-color: $switchBar
          transition: all 0.2s ease-in-out
        

footer
  font-family: Comfortaa, Arial, sans-serif
  margin: 50px auto
  
audio
  display: none
              
            
!

JS

              
                $(function() {
  var game = {};
  game.status = "off";
  game.lock = false;
  // gameStatus has 3 modes:
  // stop = everything is stopped/off
  // on = game is ready to be played (but is not in action)
  // play = game is being played (action)

  game.sequence = [];
  game.inputSequence=[];
  game.buttonHdl = [];
  game.strictMode = false;
  game.blinkDelay = 300;
  game.stepDelay = 500;
  var blinkCounter = 0, blinkStatus = 0;
  var led = $('#successCounter span');
  
  game.buttons = [];
  
  $('#game>.btn').each(function(i, obj) {
    game.buttons.push($(this).attr("id"));
  });

  game.tones = [];
      $('audio').each(function(i, obj) {
      game.tones.push($(this).attr("id"));
    });
  
  function resetGame(){
    led.text(" ");
    game.sequence = [];
    game.inputSequence = [];
    blinkCounter = 0;
    blinkStatus = 0;
    resetTimers();
  }
  function resetTimers(){
    clearInterval(game.handle);
    clearInterval(game.buttonHdl);
    clearTimeout(game.errorHandler);
  }
  
  // Enough with the setup
  // Pre-loaded functions
  function turnOff() {
    // Kill it all
    console.log("Game turned off");
    $(".colorBtn").removeClass("clickable").addClass("unclickable");
    $(".colorBtn").removeClass("light");
    game.status = "off";
    $('#ledStrict').removeClass("active");
    led.text(" ");
    resetGame();
  }
  function turnOn() {
    console.log("Game turned on");
    // Basic functionality - no game play yet
    game.status = "on";
    sequence = [];
    inputSequence = [];
    led.text("--");
  }
  
  function clearButtonHdl(){
    for (let i = 0; i < game.buttonHdl.length; i++){
      clearInterval(game.buttonHdl[i]);
    }
  }

  
  // Everything else
  
  function pressButton(i){
    console.log("Pressing: "+i);
        $('#'+i).addClass("light");
        var tone = i.replace("button", "sound");
        $('#'+tone).trigger("play");
        setTimeout(function(){
          $('#'+i).removeClass("light");
        }, game.stepDelay);
  }
  
  function blinkText() {  
    blinkCounter++;
    if (blinkCounter <= 4) {
      if (blinkStatus === 0) {
        led.css("opacity", 0);
        blinkStatus = 1;
        setTimeout(function() {
          blinkText(led);
        }, game.blinkDelay);
      } else {
        led.css("opacity", 1);
        blinkStatus = 0;
        setTimeout(function() {
          blinkText(led);
        }, game.blinkDelay);
      }
    }
  }
  
  function displaySequenceCounter(){
    var pad0 = (game.sequence.length < 10) ? "0" : "";
    led.text(pad0+game.sequence.length);
  }
  
  function addStep(){
    var randButton = game.buttons[Math.floor(Math.random()*game.buttons.length)];
    game.sequence.push(randButton);
    console.log("ADDED: "+randButton);
  }
  
  function notifyError(){
    game.status = "lock";
    console.error("Notify Error");
    $('.colorBtn').removeClass("clickable").addClass("unclickable");
    $('#error').trigger("play");
    led.text("!!");
    blinkText();
    
    if (game.strictMode){
        console.warn("Strict Mode Enabled. Resetting...");
     }
    
    setTimeout(function(){
      if (game.strictMode){
        resetGame();
        gameStart();
      }
      else playSequence();
    }, game.blinkDelay*4);

    }
  
  function playSequence(){
    var buttonCounter = 0;
    clearTimeout(game.errorHandler);
    game.inputSequence = []; // Reset the input sequence
    displaySequenceCounter();
    console.log("SEQUENCE: "+game.sequence);
    game.buttonHdl = setInterval(function(){
      pressButton(game.sequence[buttonCounter]);
      buttonCounter++;     
      if (buttonCounter == game.sequence.length){
        clearInterval(game.buttonHdl);
        game.status = "user"; // waiting on user input
        $('.colorBtn').removeClass("unclickable").addClass("clickable");
        game.errorHandler = setTimeout(function(){
          
          console.error("Error: Timeout");
          notifyError();
        }, 10*game.stepDelay);
      }
    }, 2*game.stepDelay);
  }
  
  function checkIfWin(){
    var seqCount = 0;
    var passFlag = 1;
    console.log("INPUT SEQUENCE: " + game.inputSequence);
    clearTimeout(game.errorHandler);
    // Check if the sequence matches the set
    // console.log("INPUT LENGTH: "+game.inputSequence.length);
    // console.log("SEQ LENGTH: " + game.sequence.length);
    for (x = 0; x < game.inputSequence.length; x++){
      //console.log("Checking: "+game.inputSequence[x] + "==" + game.sequence[x])
      if (game.inputSequence[x] != game.sequence[x]){
        // If not, provide notifyError()
        console.error("You pressed "+game.inputSequence[x]+". Should have pressed "+game.sequence[x]);
        notifyError();
        passFlag = 0;
       }
      seqCount++;
    }
    if (passFlag){
      // console.log(seqCount +" >= "+game.sequence.length);
      if (seqCount >= game.sequence.length){
        if (game.inputSequence.length == game.sequence.length){
          if (game.inputSequence.length < 20){
              // If so, and <20, addStep() and playSequence()
              console.log("Success. Adding a Step");
              game.status = "lock";
              $('.btn').removeClass("light").removeClass("clickable").addClass("unclickable");
              addStep();
              playSequence();
            }
            else if (game.sequence.length == 20){
              // We're through all of the steps, and they match, so display winning message 
              led.text("WIN");
              blinkText();
              setTimeout(gameStart, 5000);
            }
        }
      }
  }
  }
  
  
  function gameStart(){
    if (game.status != "stop") {
      console.log("Game Start!");
      blinkText();
      game.status="play";
      resetGame();
      addStep();
      playSequence();
    }
  }
    $("#buttonStart").on("click", function() {
    console.log("START button pressed");
    gameStart();
  });
  
  $('.colorBtn').on('mousedown', function(){
    if (game.status == "user"){
      // Only log if the user has pressed the button
      $(this).addClass("light");
      setTimeout(function(){
        $('.btn').removeClass("light");
        checkIfWin();
      }, 300);
      game.inputSequence.push($(this).attr("id"));
      
      
    }
  });
  
  function toggleStrict() {
    if (game.status != "off"){
      if (game.strictMode) {
        console.log("Strict Mode: Disabled");
        game.strictMode = false;
        $('#ledStrict').removeClass("active");
        // turn OFF the light
      } else {
        console.log("Strict Mode: Enabled");
        game.strictMode = true;
        // turn ON the light
        $('#ledStrict').addClass("active");
      }
    }
  }
  
  $("#buttonStrict").on("click", function() {
    toggleStrict();
  });

  $("#switchSlider").on("click", function() {
    var bar = $("#switchBar");
    switch (game.status) {
      case "off":
        // Turn on the functionality
        bar.css("transform", "translate(18px,0)");
        turnOn();
        break;
      default:
        // play, on
        // Stop the functionality
        bar.css("transform", "translate(0,0)");
        turnOff();
    }
  });
  
  // Just to make sure we're starting with an "off" device
  turnOff();
});

              
            
!
999px

Console