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

              
                <body class=' lighten-3'>

    <div class='container-fluid'>

        <div class='container'>

            <div id='body' class='well '>
                <div id='face'>
                    <p id='title' class='text-center '>Simon 2.0</p>
                </div>

                <div id='btn' class='well'>
                    <div id='button'>
                        <div class='row'>

                            <div class='col-xs-6'>
                                <button id='green' class='btn'></button>
                            </div>

                            <div class='col-xs-6'>
                                <button id='red' class='btn'></button>
                            </div>

                        </div><br>
                        <div class='row'>

                            <div class='col-xs-6'>
                                <button id='yellow' class='btn'></button>
                            </div>

                            <div class='col-xs-6'>
                                <button id='blue' class='btn'></button>
                            </div>
                        </div>
                    </div>
                </div>
                <br>

                <div class='row'>


                    <div class='col-xs-4'>
                        <div class="onoffswitch">
                            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
                            <label class="onoffswitch-label" for="myonoffswitch">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
                        </div>
                    </div>

                    <div class='col-xs-4'>
                        <p class='text-center'>START</p>
                        <div class='text-center off'>
                            <button id='start' class='circle-button'></button>
                        </div>
                    </div>

                    <div class='col-xs-4'>
                        <p class='text-center'>STRICT</p>
                        <div class='text-center off'>
                            <button id='strict' class='circle-button'></button>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</body>

              
            
!

CSS

              
                #body {
  background-image: url('http://wallpapersrang.com/wp-content/uploads/2015/12/silver-background-12-367081-high-definition-wallpapers-wallalay.jpg');
  align: center;
  margin: 0 auto;
  vertical-align: middle;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  align-items: center;
  border-radius: 8%;

}

.red-click{
  
  background-color:#ef9a9a;
  
}

.green-click{
  
  background-color:#a5d6a7;
  
}
.blue-click{

background-color:#90caf9;

}
.yellow-click{
  
  background-color:#fff59d;
  
}



#screen {
  height: 45px;
}

.face {
  color: black;
  background-color: #888;
  height:70px;
  padding-bottom:60px;

}

#btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  align: center;
  width: 350px;
  left: 50%;
  background-color: #ddd;
  border-radius: 25%;
}

.btn {
  width: 120px;
  height: 20vh;
}

#title {
  font-size: 50px;
  color: white;
  text-shadow: 1px 1px #000;
  vertical-align:center;
  
}

@media screen and (max-width: 295px) {
  #btn {
    width: 85vw;
  }
  #body {
    width: 100vw;
  }
  .btn {
    width: 30vw;
  }
}

.circle-button {
  width: 10px;
  height: 15px;
  border-radius: 50%;
  overflow: hidden;
}

p {
  color: white;
  font-size: 15px;
}

.red {
  background-color: #f44336;
}

.green {
  background-color: #4caf50;
}

.blue {
  background-color: #2196f3;
}

.yellow {
  background-color: #ffeb3b;
}

.off {
  background-color: bbb;
}

.screen {
  background-color: 888;
  width: 360px;
  color: black;
}

.onoffswitch {
  position: relative;
  width: 90px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.onoffswitch-checkbox {
  display: none;
}

.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #999999;
  border-radius: 20px;
}

.onoffswitch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 30px;
  padding: 0;
  line-height: 30px;
  font-size: 14px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.onoffswitch-inner:before {
  content: "ON";
  padding-left: 10px;
  background-color: #34A7C1;
  color: #FFFFFF;
}

.onoffswitch-inner:after {
  content: "OFF";
  padding-right: 10px;
  background-color: #EEEEEE;
  color: #999999;
  text-align: right;
}

.onoffswitch-switch {
  display: block;
  width: 38px;
  margin: -4px;
  background: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 56px;
  border: 2px solid #999999;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  right: 0px;
}
              
            
!

JS

              
                $("document")
    .ready(function() {

        // variables

        var game = true;
        var strict = 0;
        var strictboolean;
        var checked = false;
        var possibility = ['red', 'yellow', 'green', 'blue'];
        var sequence = [];
        var player_sequence = [];
        var count = 0;
        var current_position = 0;
        var computer_position = 1;
        var computer_pos = 1;
        var temparr = [];
        var temp;
        var pos = 0;
        var j = 0;
        var k = 0;
        var whos_turn = 0;

        /* functions ----------------------------------------------------- */

        //function check-sequence --- if sequence and player_sequence are equal then check to see if the arrays match.
        function check_sequence() {

            var sequence_length = temparr.length;
            var player_sequence_length = player_sequence.length;
            console.log(sequence_length + '||' + player_sequence_length);
            if (sequence_length == player_sequence_length) {


                if (arraysEqual(player_sequence, temparr) === true) {
                    player_sequence = [];
                    computer_pos++;
                    pos = 0;
                    computer_turn();

                    $('#title').html(' +1 ');
                    setTimeout(function() {

                        $('#title').html('');

                    }, 1000);

                } else {
                    if (strictboolean != 1) {

                        player_sequence = [];
                        pos = 0;
                        computer_turn();

                        $('#title').html('  !!!  ');
                        setTimeout(function() {

                            $('#title').html('');

                        }, 2000);

                    } else {

                        reset();
                        player_sequence = [];
                        computer_turn();
                        $('#title').html('GAME OVER');
                        setTimeout(function() {

                            $('#title').html('');

                        }, 2000);



                    }
                }

            }

        }

        //check too see if two arrays are matching
        function arraysEqual(arr1, arr2) {
            if (arr1.length !== arr2.length)
                return false;
            for (var i = arr1.length; i--;) {
                if (arr1[i] !== arr2[i])
                    return false;
            }

            return true;
        }


        //function computer_turn --- diplays whats in the array.
        function computer_turn() {

            temparr = sequence.slice(0, computer_pos);
            temp = temparr[pos];
            // console.log(temp);
            color(temp);
            pos++;

            if (pos < temparr.length) {
                setTimeout(computer_turn, 1000);
            } else {
                pos = 0;
            }

        }

        //function plan --- makes a plan of game actions 
        function plan() {

            reset();

            for (var i = 0; i < 20; i++) {

                var temporary_num = getRandom();
                var temporary_array = possibility[temporary_num];
                sequence.push(temporary_array);
                // for debugging  console.log(temporary_array);
                //for debugging  console.log(sequence);

            }

        }


        //function color --- takes a color argument and displays it.
        function color(index) {

            //  alert(index);
            if (index == 'red') {

                $('#red')
                    .removeClass('red');
                $('#red')
                    .addClass('red-click');
                new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3')
                    .play();
                setTimeout(function() {

                    $('#red')
                        .removeClass('red-click');
                    $('#red')
                        .addClass('red');

                }, 300)

            }
            if (index == 'green') {

                $('#green')
                    .removeClass('green');
                $('#green')
                    .addClass('green-click');
                new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3')
                    .play();

                setTimeout(function() {

                    $('#green')
                        .removeClass('green-click');
                    $('#green')
                        .addClass('green');

                }, 300)

            }
            if (index == 'blue') {

                $('#blue')
                    .removeClass('blue');
                $('#blue')
                    .addClass('blue-click');
                new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3')
                    .play();

                setTimeout(function() {

                    $('#blue')
                        .removeClass('blue-click');
                    $('#blue')
                        .addClass('blue');

                }, 300)

            }
            if (index == 'yellow') {

                $('#yellow')
                    .removeClass('yellow');
                $('#yellow')
                    .addClass('yellow-click');
                new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3')
                    .play();
                setTimeout(function() {

                    $('#yellow')
                        .removeClass('yellow-click');
                    $('#yellow')
                        .addClass('yellow');

                }, 300)

            }

        }


        // function yellow --- computer click yellow 
        function yellow() {
            player_sequence.push('yellow');
            $('#yellow')
                .removeClass('yellow');
            $('#yellow')
                .addClass('yellow-click');
            new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3')
                .play();

            setTimeout(function() {

                $('#yellow')
                    .removeClass('yellow-click');
                $('#yellow')
                    .addClass('yellow');

            }, 300)
            check_sequence();
        }

        //function blue --- computer click blue 
        function blue() {
            player_sequence.push('blue');
            $('#blue')
                .removeClass('blue');
            $('#blue')
                .addClass('blue-click');
            new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3')
                .play();

            setTimeout(function() {

                $('#blue')
                    .removeClass('blue-click');
                $('#blue')
                    .addClass('blue');

            }, 300)
            check_sequence();
        }

        //function green --- computer click green 
        function green() {
            player_sequence.push('green');
            $('#green')
                .removeClass('green');
            $('#green')
                .addClass('green-click');
            new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3')
                .play();

            setTimeout(function() {

                $('#green')
                    .removeClass('green-click');
                $('#green')
                    .addClass('green');

            }, 300)
            check_sequence();
        }

        // function red --- computer click red
        function red() {
            player_sequence.push('red');
            $('#red')
                .removeClass('red');
            $('#red')
                .addClass('red-click');
            new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3')
                .play();

            setTimeout(function() {

                $('#red')
                    .removeClass('red-click');
                $('#red')
                    .addClass('red');

            }, 300)
            check_sequence();
        }

        // function reset --- resets the game.
        function reset() {

            pos = 0;
            game = true;
            checked = false;
            possibility = ['red', 'yellow', 'green', 'blue'];
            sequence = [];
            player_sequence = [];
            count = 0;
            current_position = 0;
            computer_position = 1;
            computer_pos = 1;
            temparr = [];
            temp;
            pos = 0;
            j = 0;
            k = 0;;


        }
        // function win --- checks if the game is won.//todo
        function win() {

        }

        //function getRandom --- randomly picks a number to figure out whats next in the sequence.
        function getRandom() {
            return Math.floor(Math.random() * (4 - 0) + 0);
        }

        //function power --- deturmines if the power is on and acts accordingly.
        function power() {
            checked = $('#myonoffswitch')
                .is(':checked');

            if (checked === true) {
                powerOn();
                toggle = true;
            }
            if (checked === false) {
                powerOff();
                toggle = false;
            }

        }

        // function powerOn --- activates device and unlocks buttons.
        function powerOn() {
            setTimeout(function() {
                $('#red')
                    .addClass('red');
                $('#green')
                    .addClass('green');
                $('#blue')
                    .addClass('blue');
                $('#yellow')
                    .addClass('yellow');
                $('#start')
                    .addClass('green');
                $('#strict')
                    .addClass('red');

                $('#title')
                    .addClass('animated flipOutX');

                setTimeout(function() {
                    $('#title')
                        .html('');
                    $('#title')
                        .removeClass('animated flipOutX');
                    $('#title')
                        .addClass('animated flipInX');
                    $('#face')
                        .addClass('well face');

                }, 550);
                setTimeout(function() {
                    $('#title')
                        .removeClass('animated flipInX');
                }, 800);
            }, 300);

        }

        //function powerOff-- - deactivates device and unlocks all buttons.
        function powerOff() {

            setTimeout(function() {
                $('#red')
                    .removeClass('red');
                $('#green')
                    .removeClass('green');
                $('#blue')
                    .removeClass('blue');
                $('#yellow')
                    .removeClass('yellow');
                $('#start')
                    .removeClass('green');
                $('#strict')
                    .removeClass('red');
                $('#face')
                    .removeClass('well face');
                $('#title')
                    .html('Simon 2.0');

            }, 300);
            reset();

        }

        //script

        //buttons ------------------------

        $('#myonoffswitch')
            .click(function() {
                power();
            });

        $('#start')
            .click(function() {

                if ($('#start')
                    .hasClass('green') === true) {

                    plan();
                    computer_turn();

                }

            });

        $('#strict')
            .click(function() {
                if ($('#strict')
                    .hasClass('red') === true) {
                    strict++;
                    strictboolean = strict % 2;
                    console.log(strictboolean);

                }
            });
        $('#myonoffswitch')
            .click(function() {

                if (checked === true) {

                    $('#red')
                        .click(function() {
                            red();
                        });
                    $('#blue')
                        .click(function() {
                            blue();
                        });
                    $('#green')
                        .click(function() {
                            green();
                        });
                    $('#yellow')
                        .click(function() {
                            yellow();
                        });

                }
            });

    });
              
            
!
999px

Console