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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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="container">
  <img id="title"  src="https://dl.dropboxusercontent.com/s/t0g7kzgg41a9629/fcc-simon.png" alt="Simon"/>
  <div id="square">
    <div id="controls">

      <span id="screen"><span>- -</span></span>
      <div class="opts strict">
        Strict
        <button id="mode"></button>
      </div>
      <div class="opts main">
      Power
        <button id="power"></button>
      </div>
      <div class="opts start">
        Start
        <button id="go"></button>
      </div>

    </div>
    <div id="g" class="c-pad"></div>
    <div id="r" class="c-pad"></div>
    <div id="b" class="c-pad"></div>
    <div id="y" class="c-pad"></div>
  </div>
</div>
              
            
!

CSS

              
                body {
  height: 100vh;
  background-color: #000;
  background-image: url('https://i.ytimg.com/vi/pMSvaHnYVU8/maxresdefault.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  font-family: 'Orbitron', sans-serif;
}

#title {
  width: 200px;
  margin-left: 15px;
}

#square{
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: auto;
}

#square:before {
  content: '';
  display: block;
  padding-top: 100%;
}

#container {
  width: 550px;
  margin: auto;
}

.c-pad {
  border: 4px solid #75f8fa;
  width: 38%;
  height: 38%;
  display: inline-block;
  box-sizing: border-box;
  display: none;
}

#controls {
  width: 54%;
  height: 37%;
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin: auto;
  box-sizing: border-box;
  color: #75f8fa;
  text-align: center;
  font-size: 0;
}

#controls button {
  cursor: pointer;
  background-color: inherit;
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid #75f8fa;
  margin-top: 5px;
}

#screen {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 5%;
  text-align: center;
  font-size: 25px;
  margin: 0 auto 20px;
  visibility: hidden;
  overflow: hidden;
  line-height: 48px;
}

.main,
.opts {
  font-size: 18px;
}

#power {
  margin: 0 auto 15px;
}

.opts {
  display: inline-block;
  width: 33%;
}

.opts button {
  display: block;
  margin: auto;
}

.opts button:focus {
  outline: none;
}

.start,
.strict {
  visibility: hidden;
}

#g,
#r,
#b,
#y {
  position: absolute;
  cursor: pointer;
}

#g {
  top: 15px;
  left: 15px;
}

#g.illuminate {
  border-color: #00ff01;
  box-shadow: 
    0 0 5px #00ff01,
    inset 0 0 5px #00ff01,
    0 0 10px #00ff01,
    inset 0 0 10px #00ff01;
}

#r {
  top: 15px;
  right: 15px;
}

#r.illuminate {
  border-color: #fe0000;
  box-shadow: 
    0 0 5px #fe0000,
    inset 0 0 5px #fe0000,
    0 0 10px #fe0000,
    inset 0 0 10px #fe0000;
}

#b {
  left: 15px;
  bottom: 15px;
}

#b.illuminate {
  border-color: #001eff;
  box-shadow: 
    0 0 5px #001eff,
    inset 0 0 5px #001eff,
    0 0 10px #001eff,
    inset 0 0 10px #001eff;
}

#y{
  bottom: 15px;
  right: 15px;
}

#y.illuminate {
  border-color: #ffff00;
  box-shadow: 
    0 0 5px #ffff00,
    inset 0 0 5px #ffff00,
    0 0 10px #ffff00,
    inset 0 0 10px #ffff00;
}


.c-pad.on {
    box-shadow: 
    0 0 5px #75f8fa,
    inset 0 0 5px #75f8fa;
}

#power.on,
#go.on,
#mode.on {
  background-color: #75f8fa;
  box-shadow: 
    0 0 5px #75f8fa;
}

.start.on,
.strict.on,
#screen.on {
  visibility: visible;
}

.win {
  color: #00ff01;
  border-color: #00ff01;
  box-shadow: 
    0 0 5px #00ff01,
    inset 0 0 5px #00ff01,
    0 0 10px #00ff01,
    inset 0 0 10px #00ff01;
}
              
            
!

JS

              
                /* TODO:
- HTML5 Audio is not very responsive. Additional libraries may solve.
-- http://buzz.jaysalvat.com/
- Adjust styling needs for mobile.
- Test/Fix touch events.
-- https://hammerjs.github.io/
*/

var Simon = function() {  
    
    //Vars
    var says = [];
    var userTurn = false;
    var power = false;
    var sFlag = false;
    var pBDelay = 0;
    var pBCount = 0;
    var counter = 0;
    var blink = 0;
    var started = false;
    var compPBIn;
    var compPBOut;

    //Audio objects
    var green = document.createElement("audio");
        green.src = "https://s3.amazonaws.com/freecodecamp/simonSound1.mp3";
        green.autoPlay = false;
        green.preLoad = true;
    var red = document.createElement("audio");
        red.src = "https://s3.amazonaws.com/freecodecamp/simonSound2.mp3";
        red.autoPlay = false;
        red.preLoad = true;
    var blue = document.createElement("audio");
        blue.src = "https://s3.amazonaws.com/freecodecamp/simonSound3.mp3";
        blue.autoPlay = false;
        blue.preLoad = true;
    var yellow = document.createElement("audio");
        yellow.src = "https://s3.amazonaws.com/freecodecamp/simonSound4.mp3";
        yellow.autoPlay = false;
        yellow.preLoad = true;

    this.powerButton = function() {
        switch(power) {
            case false:
                //Turn On
                power = true;
                $('#power').addClass('on');
                $('.c-pad').fadeIn(1000, () => {
                    $('.start, .strict, #screen').addClass('on');
                });
                
                break;

            case true:
                //Turn off
                power = false;
                $('.c-pad').fadeOut(1000);
                $('.c-pad, #power, .start, .strict, #screen, #go, #mode').removeClass('on');
                sFlag = false;
                reset();
                break;
        }

    }

    this.compTurn = function() {
        userTurn = false;
        var round = ( says.length + 1 );
        if ( round < 10 ) {
            round = '0' + round;
        }
        $('#screen span').text(round);
        if ( says.length < 20 ) {
            addToPattern();
            playBack();
            counter = 0;
        } else {
            endGame();
        }
    }

    function addToPattern() {
        var newColor = Math.floor(Math.random() * 4)
        
        switch(newColor) {
            case 0:
                newColor = 'g';
                break;
            case 1:
                newColor = 'r';
                break;
            case 2:
                newColor = 'b';
                break;
            case 3:
                newColor = 'y';
                break;
            default:
                break;
        }

        says.push(newColor);
    }

    function playBack() {

        if ( says.length > 12 ) {
            pBDelay = 350;
        } else if ( says.length > 8 ) {
            pBDelay = 550;
        } else if ( says.length > 4 ) {
            pBDelay = 800;
        } else {
            pBDelay = 1000;
        }

        runPB();

        function runPB() {
            
            compPBIn = setTimeout( () => {
                $("#" + says[pBCount]).addClass('illuminate');
                switch(says[pBCount]) {
                    case 'g':
                        green.play();
                        break;
                    case 'r':
                        red.play();
                        break;
                    case 'b':
                        blue.play();
                        break;
                    case 'y':
                        yellow.play();
                        break
                    default:
                        break;
                }

                compPBOut = setTimeout( () => {
                    $("#" + says[pBCount]).removeClass('illuminate');
                    pBCount++;
                    if ( pBCount < says.length ) {
                        runPB();
                    } else {
                        userTurn = true;
                        pBCount = 0;
                    }
                }, 300);

            }, pBDelay);
        }       
    }

    this.strictToggle = function() {
        switch(sFlag) {
            case false:
                //Turn On
                $('#mode').addClass('on');
                reset();
                sFlag = true;
                break;

            case true:
                //Turn off
                $('#mode').removeClass('on');
                reset();
                sFlag = false;
                break;
        }
    }

    this.isStarted = function() {
        return started;
    }

    this.setStarted = function() {
        started = true;
    }

    function reset() {
        says = [];
        userTurn = false;
        pBCount = 0;
        round = 0;
        started = false;
        counter = 0;
        //UI
        $('.illuminate').removeClass('illuminate');
        $('#screen span').text('- -');
        $('#go').removeClass('on');
    }

    function endGame() {

        var endCounter = 0;

        runEnd();

        function runEnd() {
            setTimeout( () => {
                $('.c-pad, #screen').addClass('win');
                $('#screen span').text('W');
                setTimeout( () => {
                    $('.c-pad, #screen').removeClass('win');
                    endCounter++;
                    if (endCounter < 4) {
                        runEnd();
                    } else {
                        setTimeout( () => {
                            powerButton();
                        }, 500);
                    }
                }, 500);
            }, 600);
        }
    }

    function screenBlinker() {
        $('#screen span').fadeOut(500);
        $('#screen span').fadeIn(500);
    }

    //User Turn
    $('.c-pad').on('touchstart click', function(e) {
        var targetId = e.target.id;
        event.stopPropagation();
        event.preventDefault();
      
        if ( userTurn === true) {
            if ( targetId !== says[counter] ) {
                userTurn = false;
                $('#screen span').fadeOut(500);
                $('#screen span').fadeIn(500);
                var myBlinky = setInterval(screenBlinker, 1000);
                
                //Let screen blink 3 more times then advance the game
                setTimeout( function() {
                    clearInterval(myBlinky);
                    if ( sFlag === true ) {
                        reset();
                    } else {
                        playBack();
                        counter = 0;
                    }
                }, 3500);

            } else {
                
                $("#" + targetId).addClass('illuminate');
                switch(targetId) {
                    case 'g':
                        green.play();
                        break;
                    case 'r':
                        red.play();
                        break;
                    case 'b':
                        blue.play();
                        break;
                    case 'y':
                        yellow.play();
                        break;
                    default:
                        break;
                }

                setTimeout( function() {
                    $("#" + targetId).removeClass('illuminate');
                    counter++;
                    if ( counter === says.length ) {
                        game.compTurn();
                    }
                }, 300);
            }
        } else {
            return;
        }
    });

}

// Ready game on page load
var game = new Simon();

//Start game
$('#go').on('click', function() {
    if ( !game.isStarted() ) {
        game.setStarted();
        game.compTurn();
        $('#go').addClass('on');
    }
});

//Power turn on/off as appropriate
$('#power').on('click', game.powerButton);

//Strict mode toggle
$('#mode').on('click', game.strictToggle);


              
            
!
999px

Console