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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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 class="container-fluid">
    <div class="circle">
        <div class="segment-upperleft color-buttons all-buttons" id="green" style="font-size: 72px; text-align: right;"></div>
        <div class="segment-upperright color-buttons all-buttons" id="red"></div>
        <div class="segment-lowerleft color-buttons all-buttons" id="yellow"></div>
        <div class="segment-lowerright color-buttons all-buttons" id="blue"></div>
        <div class="segment-center" id="controls">
            <h1 style="font-family: 'Geo';">Simon</h1>
            <h3>80's Edition</h3>
            <div class="row control-buttons">
                <div class="col-xs-4">
                    <h4>Start</h4>
                    <button type="button" class="all-buttons" id="start">&nbsp;&nbsp;&nbsp;&nbsp;</button>
                </div>
                <div class="col-xs-4">
                    <button type="button" class="all-buttons" id="reset">Reset</button>
                </div>
                <div class="col-xs-4">
                    <h4>Strict</h4>
                    <button type="button" class="all-buttons" id="strict">&nbsp;&nbsp;&nbsp;&nbsp;</button>
                </div>
            </div>
            <div>
                <input type="text" disabled id="turn-num" value="Press start!">
                <br>
                <label>Count</label>
            </div>
            <button id="eighties-sound-clips" class="all-buttons">True Survivor Mode</button>
        </div>
    </div>
</div>
<!--<div id ="animation-container">
    <div id ="victory-animation">My animation will go here</div>
</div>-->
<!--Simon Default Audio-->
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" id="green-audio" class="color-button-audio"></audio>
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" id="red-audio" class="color-button-audio"></audio>
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" id="yellow-audio" class="color-button-audio"></audio>
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" id="blue-audio" class="color-button-audio"></audio>
<!--Misc Default Sounds-->
<audio src="https://dl.dropboxusercontent.com/s/uqfyv7juh0nz2l1/Mess%20Up%20%28Not%20Strict%29.mp3?dl=0" id="normal-mistake-sound"></audio>
<audio src="https://dl.dropboxusercontent.com/s/g7f2q0cgeo6wxes/Game%20Over%20%28Strict%29.mp3?dl=0" id="game-lose-sound"></audio>
<audio src="https://dl.dropboxusercontent.com/s/ivvx1oa19bhl1ar/Game%20Win.mp3?dl=0" id="game-win-sound"></audio>
<audio src="https://dl.dropboxusercontent.com/s/r7k31f7jkzk4oee/Round%20Win.mp3?dl=0" id="round-win-sound"></audio>
<!--80s Audio (True Survivor Sounds)-->
<audio src="https://dl.dropboxusercontent.com/s/kiogk1bkxu6ovwu/Green.mp3?dl=0" id="green-eighties-audio" class="color-button-audio"></audio>
<audio src="https://dl.dropboxusercontent.com/s/0kgamlu9b6t5s0l/Red.mp3?dl=0" id="red-eighties-audio" class="color-button-audio"></audio>
<audio src="https://dl.dropboxusercontent.com/s/bf9ao75z7wvidk4/Yellow.mp3?dl=0" id="yellow-eighties-audio" class="color-button-audio"></audio>
<audio src="https://dl.dropboxusercontent.com/s/s6xnu8gcal52iqj/Blue.mp3?dl=0" id="blue-eighties-audio" class="color-button-audio"></audio>
<!--80's Audio Misc Sounds-->
<audio src="https://dl.dropboxusercontent.com/s/bn8ubb258090thm/Round%20Win%20Eighties%20%281%29.mp3?dl=0" id="round-win-eighties-sound"></audio>
<!--<audio src="https://dl.dropboxusercontent.com/s/moxomncx03ybtnb/Round%20Win%20Eighties%20%282%29.mp3?dl=0" id="round-win-eighties-two-sound"></audio>-->
<audio src="https://dl.dropboxusercontent.com/s/5o83k2lnmyydu20/Game%20Win%20Eighties.mp3?dl=0" id="game-win-eighties-sound"></audio>
<audio src="https://dl.dropboxusercontent.com/s/d7bugi8zxw3wsq3/Game%20Over%20Eighties_01.mp3?dl=0" id="game-lose-eighties-sound"></audio>
<audio src="https://dl.dropboxusercontent.com/s/c6s42ohof1n5iq2/Normal%20Mistake%20Eighties%20.mp3?dl=0" id="normal-mistake-eighties-sound"></audio>
              
            
!

CSS

              
                html {
    overflow: scroll;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #FF0000;
}

body {
    width: 100%;
    height: 100%;
    text-align: center;
    background-image: url("https://dl.dropboxusercontent.com/s/5y19p82qbdtorp2/80s-background.jpg?dl=0");
    background-position: center;
    background-attachment: center;
    background-repeat: no-repeat;
}

.segment-center label {
    font-size: 25px;
    margin-top: 3px;
}

.segment-center h1 {
    font-size: 110px;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 20px;
}

.segment-center h3 {
    margin: 0 0 20px 0;
    padding: 0;
    font-family: 'Dynalight', cursive;
    font-size: 40px;
}

.segment-center h4 {
    font-size: 50px;
}

.control-buttons {
    display: block;
    margin: auto;
}

.control-buttons div:nth-child(1) {
    padding-left: 4em;
}

.control-buttons div:nth-child(3) {
    padding-right: 3em;
}

.circle {

    border-radius: 50%;
    border-style: solid;
    border-width: 16px;
    margin: 50px auto;
    min-width: 900px;
    max-width: 1500px;
    min-height: 900px;
    max-height: 100%;
    background-color: grey;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    position: relative;
}


/*Green*/

.segment-upperleft {
    float: left;
    top: 0%;
    left: 0%;
    width: 50%;
    height: 50%;
    border-style: solid;
    border-width: 16px;
    border-left-width: 0px;
    border-top-width: 0px;
    background: #006400;
    position: absolute;
}


/*Red*/

.segment-upperright {
    float: right;
    top: 0%;
    right: 0%;
    width: 50%;
    height: 50%;
    border-style: solid;
    border-width: 16px;
    border-right-width: 0px;
    border-top-width: 0px;
    background: #8B0000;
    position: absolute;
}


/*Yellow*/

.segment-lowerleft {
    float: left;
    top: 50%;
    left: 0%;
    width: 50%;
    height: -50%;
    border-style: solid;
    border-width: 16px;
    border-left-width: 0px;
    border-bottom-width: 0px;
    padding-bottom: 50%;
    background: #CCCC00;
    position: absolute;
}


/*Blue*/

.segment-lowerright {
    float: right;
    right: 0%;
    top: 50%;
    width: 50%;
    height: -50%;
    border-style: solid;
    border-width: 16px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    padding-bottom: 50%;
    background: #00008B;
    position: absolute;
}

.segment-center {
    width: 40em;
    height: 40em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    z-index: 2;
    border-radius: 50%;
    border-style: solid;
    border-width: 25px;
    font-family: 'Geo', sans-serif;
    background-color: black;
    color: white;
}

#turn-num {
    font-family: 'Press Start 2P', cursive;
    font-size: 17px;
    text-align: center;
    border-style: dashed;
    background-color: rgba(230, 230, 230, 0.6);
    margin-top: -25px;
    padding: 10px;
    height: 70px;
    width: 45%;
}

#start,
#strict {
    font-size: 30px;
    background-color: blue;
    border-radius: 10px;
}

#start:focus,
#strict:focus,
#reset:focus,
#eighties-sound-clips:focus {
    outline: none;
}

#reset {
    background-color: white;
    color: black;
    font-size: 30px;
}

#eighties-sound-clips {
    background-color: white;
    color: black;
    font-size: 25px;
    border-radius: 10px;
}


/*Victory Animation*/


/*
#animation-container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
}
#victory-animation {
    width: 50px;
    height: 50px;
    position: absolute;
    background: red;
}
*/
              
            
!

JS

              
                //Global Variables
var compClicks = [];
var strict = 0;
var playerClicks = [];
var count = 0;
var compClicksObj = {};
var resetButton = 0;
var eightiesSoundClips = 0;
// Default Audio Sounds
var greenAudio = document.getElementById('green-audio');
var redAudio = document.getElementById('red-audio');
var yellowAudio = document.getElementById('yellow-audio');
var blueAudio = document.getElementById('blue-audio');
const allColorButtonAudio = document.getElementsByClassName('color-button-audio');
var normalMistakeSound = document.getElementById('normal-mistake-sound');
var gameLoseSound = document.getElementById('game-lose-sound');
var gameWinSound = document.getElementById('game-win-sound');
var roundWinSound = document.getElementById('round-win-sound');

// Game starts with strict button active
$("#start").on('click', function() {
    startGame();
});
$("#strict").on('click', function() {
    strictMode();
});
$("#reset").on('click', function() {
    resetButton = 1;
    resetGame();
});
$("#eighties-sound-clips").on('click', toggleEightiesSound);

// Starts game, adds event listener to simon color buttons
function startGame() {
    $('#start').prop('disabled', true);
    randGenerator();
}

// Generators a random array for computer moves
function randGenerator() {
    count++;
    playerClicks = [];
    if (count === 20) {
        gameOver();
        return;
    }
    $("#turn-num").val(count);
    compClicks.push(Math.floor((Math.random() * 4) + 1));

    compClicksObj = {};
    compClicksObj.clicks = compClicks;
    compClicksObj.identity = "computer";
    buttonLightUp(compClicksObj);
    return;
}

// Takes comp clicks from randomly generated comp array and collects players clicks in array.
// Compares player clicks to comp clicks then returns incorrect or correct 
function playerInput(compClicks) {
    // player input array equals computer array
    var roundWin = [];
    roundWin = compClicks.filter(function(curElem, ind) {
        return playerClicks[ind] !== compClicks[ind];
    });
    if (roundWin.length === 0) {
        playerClicks = [];
        setTimeout(function() {
            roundWinSound.load();
            roundWinSound.play();
        }, 1000);
        setTimeout(randGenerator, 2000);
        return;
    }

    // Detects wrong player click
    for (var i = 0; i < playerClicks.length; i++) {
        if (playerClicks[i] !== compClicks[i]) {
            // Play "wrong button" sound and display error in Count element         
            $("#turn-num").val("OOOPS!");
            $('.color-buttons').off('click');
            for (var j = 0; j < allColorButtonAudio.length; j++) {
                allColorButtonAudio[j].pause();
            }
            normalMistakeSound.load();
            normalMistakeSound.play();
            setTimeout(function() {
                if (strict === 1) {
                    //Displays game over here
                    gameLoseSound.load();
                    gameLoseSound.play();
                    $("#turn-num").val("Game Over =(");
                    setTimeout(resetGame, 3800);
                    return;
                }
                $("#turn-num").val(count);
                // Deletes player clicks array
                playerClicks = [];
                // Replays button sequence
                buttonLightUp(compClicksObj);
            }, 2000);
            return;
        }
    }
    return;
}

// Sets gameplay to "strict" mode
function strictMode() {
    if (strict === 0) {
        strict = 1;
        $('#strict').css("background-color", "red");
        return;
    } else strict = 0;
    $('#strict').css("background-color", "blue");
    return;
}

// resets game
function resetGame() {
    $('.all-buttons').prop('disabled', false);
    $('.color-buttons').off('click');
    playerClicks = [];
    compClicks = [];
    count = 0;
    $("#turn-num").val("Press start!");
    strict = 0;
    $('#strict').css("background-color", "blue");
    resetButton = 0;
    eightiesSoundClips = 1;
    toggleEightiesSound();
    return;
}

// Game Over / Display victory screen and disable buttons
function gameOver() {
    setTimeout(function() {
        $("#turn-num").val("You Win!!!");
        $(".all-buttons").prop('disabled', true);
        gameWinSound.load();
        gameWinSound.play();
        //victoryAnimation(); // Put victory animation in later
        setTimeout(resetGame, 13000);
    }, 800);
    return;
}

// Simon color buttons light up

function buttonLightUp(clicksArr) {
    if (clicksArr.identity === "computer") {
        compButtonLights(0, clicksArr.clicks.length, clicksArr.clicks);
    } else {
        switch (clicksArr[clicksArr.length - 1]) {
            case 1:
                $("#green").css("background", "green");
                greenAudio.load();
                greenAudio.play();
                $('.color-buttons').off('click');
                setTimeout(function() {
                    $("#green").css("background", "#006400");
                    enablePlayerButtons();
                }, 1000);
                break;
            case 2:
                $("#red").css("background", "red");
                redAudio.load();
                redAudio.play();
                $('.color-buttons').off('click');
                setTimeout(function() {
                    $("#red").css("background", "#8B0000");
                    enablePlayerButtons();
                }, 1000);
                break;
            case 3:
                $("#yellow").css("background", "yellow");
                yellowAudio.load();
                yellowAudio.play();
                $('.color-buttons').off('click');
                setTimeout(function() {
                    $("#yellow").css("background", "#CCCC00");
                    enablePlayerButtons();
                }, 1000);
                break;
            case 4:
                $("#blue").css("background", "blue");
                blueAudio.load();
                blueAudio.play();
                $('.color-buttons').off('click');
                setTimeout(function() {
                    $("#blue").css("background", "#00008B");
                    enablePlayerButtons();
                }, 1000);
                break;
        }
    }
    return;
}

// Special function for computer button light up
function compButtonLights(inc, loopLnth, clicksArr) {
    if (resetButton === 1) {
        return;
    }
    // Turn color buttons off   
    $('.color-buttons').off('click');
    setTimeout(function() {
        switch (clicksArr[inc]) {
            case 1:
                $("#green").css("background", "green");
                greenAudio.load();
                greenAudio.play();
                setTimeout(function() {
                    $("#green").css("background", "#006400");
                }, 1000);
                break;
            case 2:
                $("#red").css("background", "red");
                redAudio.load();
                redAudio.play();
                setTimeout(function() {
                    $("#red").css("background", "#8B0000");
                }, 1000);
                break;
            case 3:
                $("#yellow").css("background", "yellow");
                yellowAudio.load();
                yellowAudio.play();
                setTimeout(function() {
                    $("#yellow").css("background", "#CCCC00");
                }, 1000);
                break;
            case 4:
                $("#blue").css("background", "blue");
                blueAudio.load();
                blueAudio.play();
                setTimeout(function() {
                    $("#blue").css("background", "#00008B");
                }, 1000);
                break;
        }
        inc++;
        if (inc < loopLnth) {
            compButtonLights(inc, loopLnth, clicksArr);
        } else {
            setTimeout(function() {
                enablePlayerButtons();
            }, 1500);
        }
    }, 1500);

    return;
}

function enablePlayerButtons() {

    // Turn color buttons back on    
    $("#green").click(function() {
        playerClicks.push(1);
        buttonLightUp(playerClicks);
        playerInput(compClicks);
    });
    $("#red").click(function() {
        playerClicks.push(2);
        buttonLightUp(playerClicks);
        playerInput(compClicks);
    });
    $("#yellow").click(function() {
        playerClicks.push(3);
        buttonLightUp(playerClicks);
        playerInput(compClicks);
    });
    $("#blue").click(function() {
        playerClicks.push(4);
        buttonLightUp(playerClicks);
        playerInput(compClicks);
    });
    return;
}

function toggleEightiesSound() {
    if (eightiesSoundClips === 0) {
        $('#eighties-sound-clips').html('Default Mode');
        eightiesSoundClips = 1;
        // Change button audio to eighties        
        greenAudio = document.getElementById('green-eighties-audio');
        redAudio = document.getElementById('red-eighties-audio');
        yellowAudio = document.getElementById('yellow-eighties-audio');
        blueAudio = document.getElementById('blue-eighties-audio');
        // Change other audio to eighties
        normalMistakeSound = document.getElementById('normal-mistake-eighties-sound');
        gameLoseSound = document.getElementById('game-lose-eighties-sound');
        gameWinSound = document.getElementById('game-win-eighties-sound');
        roundWinSound = document.getElementById('round-win-eighties-sound');
    } else {
        $('#eighties-sound-clips').html('True Survivor Mode');
        eightiesSoundClips = 0;
        // Change button audio back to default        
        greenAudio = document.getElementById('green-audio');
        redAudio = document.getElementById('red-audio');
        yellowAudio = document.getElementById('yellow-audio');
        blueAudio = document.getElementById('blue-audio');
        // Change other audio back to default   
        normalMistakeSound = document.getElementById('normal-mistake-sound');
        gameLoseSound = document.getElementById('game-lose-sound');
        gameWinSound = document.getElementById('game-win-sound');
        roundWinSound = document.getElementById('round-win-sound');
    }
    return;
}


// Victory animation (DO NOT DELETE; REPLACE WITH ACTUAL ANIMATION LATER)
/*
function victoryAnimation() {
    var elem = document.getElementById("victory-animation");
    var pos = 0;
    var id = setInterval(frame, 5);

    function frame() {
        if (pos == 350) {
            clearInterval(id);
        } else {
            pos++;
            elem.style.top = pos + 'px';
            elem.style.left = pos + 'px';
        }
    }
}
*/
              
            
!
999px

Console