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 class="container">
    <div class="col-xs-12 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4 text-center">
        <h1 class="text-center">Simon Machine</h1>
        <div class="panel pre-game">
            <div class="panel-body">
                <h3>How to Play</h3>
                <p>In the following screen you will be presented with colored tiles. Remember the pattern they light up in and then repeat it back.</p>
								<p>Get 20 in a row and you'll win the game!</p>
                <!-- Game Mode -->
                <div class="col-xs-12">
                    <div class="row">
                        <hr />
												<p>Choose <span class="text-highlight">regular</span> mode if you want to keep playing on an incorrect move, otherwise choose <span class="text-highlight">strict </span>and the game will end if an incorrect move is made.</p>
                        <div class="col-xs-6 mt1">
                            <label class="radio-inline"><input type="radio" name="game-mode" value="regular" checked>Regular</label>
                        </div>
                        <div class="col-xs-6 mt1">
                            <label class="radio-inline"><input type="radio" name="game-mode" value="strict" >Strict</label>
                        </div>
                    </div>
                    <div class="row">
                        <hr />
                        <!-- Start Game Button -->
                        <button class="start-game btn btn-start btn-block">Start Game</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel game-board hidden animated rubberBand">
            <div class="panel-body">
                <div class="row count-wrapper">
                    <div class="count-title">My Score</div>
                    <div class="col-xs-3"><hr></div>
                    <div class="col-xs-6">
											<div class="count-box"><span class="count">0</span> / 20</div>
                    </div>
                    <div class="col-xs-3"><hr></div>
                </div>
                <div class="row game-board-content">
                    <!-- Red Block -->
                    <div class="col-xs-6 block">
                        <div class="game-tab red" data-color="red"></div>
                    </div>
                    <!-- Green Block -->
                    <div class="col-xs-6 block">
                        <div class="game-tab green" data-color="green"></div>
                    </div>
                    <!-- Blue Block -->
                    <div class="col-xs-6 block">
                        <div class="game-tab blue" data-color="blue"></div>
                    </div>
                    <!-- Yellow Block -->
                    <div class="col-xs-6 block">
                        <div class="game-tab yellow" data-color="yellow"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 loser-text hidden">
                        <span>You Lose!</span>
                    </div>
									  <div class="col-xs-12 winner-text hidden">
                        <span>You Win!</span>
                    </div>
                </div>
            </div>
            <div class="panel-footer">
								<button class="reset-game btn btn-default btn-block">Reset Game</button>
							  <button class="end-game btn btn-default btn-block">End Game</button
            </div>
        </div>
    </div>
</div>

              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Bitter');

$background-color: #8bc34a;
$text-color: #343435;
$text-light-color: #afafaf;
$border-color: #ccc;

// Button colors
$red: #e91e63;
$green: #4caf50;
$blue: #03a9f4;
$yellow: #ffc107;


body {
  font-family: 'Bitter', serif;
  min-height: 100vh;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: $background-color;
}

a:hover {
  text-decoration: none;
}

.panel {
  @extend .box-shadow;
  color: $text-color;
  border: 1px solid transparent;
}
.btn.btn-start {
  background: $background-color;
  color: white;
  border: none;
  &:hover,
  &:active,
  &:focus {
    color: white;
    background: darken($background-color, 10%);
  }
}
.text-highlight {
  color: $background-color;
  font-weight: 600;
}
// Score
.count-wrapper{
  padding: 0 0 20px 0;
}
.count-title {
  margin-bottom: 10px;
}
.count-box {
  font-size: 18px;
  line-height: 50px;
  height: 50px;
  width: 140px;
  border: 1px solid $border-color;
  margin: 0 auto;
  border-radius: 40px;
}

// Colored buttons
.block {
  &:nth-child(1),
  &:nth-child(3){
    padding-right: 7.5px;
  }
  &:nth-child(2),
  &:nth-child(4){
    padding-left: 7.5px;
  }
  &:nth-child(1),
  &:nth-child(2) {
    margin-bottom: 15px;
  }
}
.game-tab {
  border-radius: 4px;
  height: 140px;
  width: 100%;
  color: white;
}
.game-tab.red {
  background: $red;
  &.highlight{
    background: darken($red, 20%)
  }
  &:active,
  &:focus {
    background: lighten($red, 20%)
  }
}
.game-tab.green {
  background: $green;
  &.highlight {
    background: darken($green, 20%);
  }
  &:active,
  &:focus {
    background: lighten($green, 20%);
  }
}
.game-tab.blue {
  background: $blue;
  &.highlight {
    background: darken($blue, 20%);
  }
  &:active,
  &:focus {
    background: lighten($blue, 20%);
  }
}
.game-tab.yellow {
  background: $yellow;
  &.highlight {
    background: darken($yellow, 20%);
  }
  &:active,
  &:focus {
    background: lighten($yellow, 20%);
  }
}
.loser-text {
  font-size: 30px;
  color: $red;
  margin: 26px 0 40px 0;
}
.winner-text {
  font-size: 30px;
  color: $background-color;
  margin: 26px 0 40px 0;
}

// Helpers
.mt1 {
  margin-top: 10px;
}
.mt2 {
  margin-top: 20px;
}
.mt3 {
  margin-top: 30px;
}

.box-shadow {
  -webkit-box-shadow: 0px 5px 20px 10px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 5px 20px 10px rgba(0,0,0,0.1);
  box-shadow: 0px 5px 20px 10px rgba(0,0,0,0.1);
}
              
            
!

JS

              
                /*-- GLOBAL GAME OBJECT --*/
// Declare a game object and initialize on game start
var GAME = {
    gameOptions: {
        'red': "https://s3.amazonaws.com/freecodecamp/simonSound1.mp3",
        'green': "https://s3.amazonaws.com/freecodecamp/simonSound2.mp3",
        'blue': 'https://s3.amazonaws.com/freecodecamp/simonSound3.mp3',
        'yellow': 'https://s3.amazonaws.com/freecodecamp/simonSound4.mp3',
        'fail': 'https://notificationsounds.com/soundfiles/b534ba68236ba543ae44b22bd110a1d6/file-sounds-875-surprise-on-a-spring.mp3',
				'win': 'https://notificationsounds.com/soundfiles/a516a87cfcaef229b342c437fe2b95f7/file-sounds-1068-the-calling.mp3'
    },
    score: 0,
    winScore: 20,
    initializeGame: function(gameMode) {
        this.clicks = 0;
        this.moves = [];
        this.playback = false;
        this.mode = gameMode;
        // Set the first color to begin the game
        setNewColor();
    }
}

/*-- GAME LOGIC -- */
// Play a sound
function playSound(option){
    if(option) {
        var audio = new Audio(GAME.gameOptions[option]);
        audio.play();
    }
}

// Show the moves for the user using an interval timer
// Some assistanc here from: https://codeplanet.io/building-simon-says-javascript/
function displayMoves(){
    var moves = GAME.moves;
    var i = 0;
    GAME.playback = true;
    var interval = setInterval(function() {
        highlightTab(moves[i]);
        playSound(moves[i]);

        i++;
        if (i >= moves.length) {
            clearInterval(interval);
            GAME.playback = false;
        }
    }, 700);
}

// Highlight the tile so the user can see the highlighted tile
// After timeout remove the highlight class
function highlightTab(tab) {
    var tab = $('[data-color=' + tab + ']').addClass('highlight');
    window.setTimeout(function() {
        tab.removeClass('highlight');
    }, 350);
}

// Call this to set next color
function setNewColor(){
    var number = randomNumber(0, 3);
    GAME.moves.push(Object.keys(GAME.gameOptions)[number]);
		
		// As soon as the number of moves is more than the win score, the user wins
		// Play through the colors for the user to see & then repeat
		displayMoves();
}

// Generates a random number in a range
function randomNumber(max, min) {
    return slot = Math.round(Math.random() * (max - min) + min);
}

// Check if the inputted move was correct
function checkMove(color){
    if(color === GAME.moves[GAME.clicks - 1]){
        return true;
    }
    return false;
}

// Check if the computer should pick a new color
function checkToProceed(){
    // If the user has clicked through all the required colors
		if(GAME.clicks === GAME.moves.length){
        // Increase the users count score
        $('.count').text(GAME.clicks);

        // Reset the number of clicks
        GAME.clicks = 0;
			
        // Set the new color into the moves array
        setNewColor();
    }
}

function checkWinner(){
	// If the number of clicks is equal to the win score, then the user has won
	if (GAME.clicks === GAME.winScore){
		return true;
	}
	return false;
}

// Fun animation if the user clicks something they shouldn't
function doAnimate(classToAnimate, animation){
  // Add the class
  $('.' + classToAnimate).addClass("animated " + animation);

  // Then remove it
  setTimeout(function(){
      $('.' + classToAnimate).removeClass("animated " + animation);
  }, 500);
}

// Animation when the user wins
function winSequence(){
	playSound('win');
	$('.count').text(GAME.clicks);
	$('.game-board-content').addClass('hidden');
	$('.winner-text').removeClass('hidden');
	$('.reset-game').text('Play Again?');
}

/*-- CLICK OPTIONS -- */
// Let the user choose the type of player he wants to be!
$(".start-game").click(function(){
    $('.pre-game').addClass('hidden');
		$('.game-board').removeClass('hidden');

    // Set the game mode and initialize the game
    var mode = $('input[name=game-mode]:checked').val();
    GAME.initializeGame(mode);
});

// Allow the user to reset the game
$(".reset-game").click(function(){
    $('.count').text(0);
    $('.game-board-content').removeClass('hidden');
    $('.loser-text').addClass('hidden');
		$('.winner-text').addClass('hidden');
    $('.reset-game').text('Reset Game');
    GAME.initializeGame(GAME.mode);
});

// All the user to end the game
$(".end-game").click(function(){
	  history.go(0);
});

$(".game-tab").click(function() {
    // Block the user if the game is currently playing back
    if(!GAME.playback){
        // Increase the number of clicks by 1
        GAME.clicks += 1;
        // Check if the user has click enough times
        var color = $(this).data('color');
			
        // Check if the user selected the correct color
        if(!checkMove(color)) {
             // Animate the board with a shake
            doAnimate("game-board", "shake");

            // If in strict mode, then you lose the game
            if(GAME.mode === "strict") {
              playSound('fail');
              $('.game-board-content').addClass('hidden');
              $('.loser-text').removeClass('hidden');
              $('.reset-game').text('Play Again?');

            // Otherwise, the user can try again
            } else if (GAME.mode === "regular") {
              GAME.clicks = 0; // We must reset the clicks
							playSound('fail');
              displayMoves(); // We show the moves again
            }
        } else {
            // Play the corresponding sound to the button
            playSound(color);
					
						// Check if the user won, otherwise continue as expected
						if(checkWinner()){
							//If the user has one, perfom the win sequence
							winSequence();
						} else {
							// Check if the computer should pick a new color
							checkToProceed();
						}
        }
    }
});
              
            
!
999px

Console