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

              
                <!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
   <div class="container">
       <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
           </button>
           <a class="navbar-brand" href="#">FreeCodeCamp Simon</a>
       </div>
       <div id="navbar" class="collapse navbar-collapse">
           <ul class="nav navbar-nav navbar-right">
               <li id="nav-github"><a href="https://github.com/sonorangirl/Simon-Game/tree/gh-pages"><i class="fa fa-github"></i></a></li>
               <li id="nav-codepen"><a href="https://codepen.io/sonorangirl/pen/vXXxjk"><i class="fa fa-codepen"></i></a></li>
               <li class="contact"><a class="wide-tooltip" data-toggle="modal" data-target="#contactModal" data-hover="tooltip" data-trigger="hover" data-placement="bottom" title="Contact" href="#"><i class="fa fa-envelope contact"></i></a></li>
           </ul>
       </div><!--/.nav-collapse -->
   </div>
</nav>

<!--about-modal-->
<div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Contact</h4>
         </div>
         <div class="modal-body">
            <p>This project was created by <a href="https://sonorangirl.github.io/">Erin Manahan</a> for <a href="https://www.freecodecamp.com">freeCodeCamp</a>. You can contact Erin at manahan.erin@gmail.com or on <a href="https://twitter.com/sonoran_girl"><i class="fa fa-twitter"></i> Twitter</a></p>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>

<!-- Begin page content -->
<div class="container-fluid">

   <div class="row">

       <div class="col-lg-12">
           <h1 class="text-center"></h1>
       </div>

   </div>

   <div class="row centered main">

       <div class="gameBoard">
           <div id="center-circle">
               <div class="name">Simon</div>
               <div id="start"><button class='btn-xs btn-info'>Start</button></div>
               <div id="reset"><button class='btn-xs btn-warning'>Reset</button></div>
           </div>
           <div id="red" class="col-xs-6"></div>
           <div id="blue" class="col-xs-6"></div>
           <div id="green" class="col-xs-6"></div>
           <div id="yellow" class="col-xs-6"></div>
       </div>

   </div>

   <div class="row centered score">
       <div class="col-xs-6"><p id="highLevel">High Score: 0</p></div>
       <div class="col-xs-6"><p id="currentLevel">Current Level: 0</p></div>
   </div>


</div>

              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Comfortaa:400,700,300|Quattrocento");
.centered {
  float: none;
  margin-left: auto;
  margin-right: auto; }

.navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a, #center-circle .name, .score div p {
  text-shadow: 1px 1px 2px #443738, 0 0 1em #E0F7FF, 0 0 0.2em #E0F7FF; }

html {
  position: relative;
  min-height: 100%; }

img {
  width: 100%; }

* {
  box-sizing: border-box; }

body {
  height: 100%;
  font-family: "Comfortaa", Helvetica, Arial, sans-serif;
  background-color: #05C4B1;
  background: url("https://sonorangirl.github.io/Simon-Game/img/Catch the Wave_Pattern 2_by Stella.png") repeat repeat;
  background-size: cover; }

h1,
h2,
h3,
h4,
h5 {
  font-family: "Comfortaa", Helvetica, Arial, sans-serif;
  color: #05C4B1; }

p {
  font-family: "Quattrocento", sans-serif;
  color: #E0F7FF; }

body > .container-fluid {
  padding: 60px 15px 0; }

.container-fluid .text-muted {
  margin: 20px 0; }

.btn:focus, a:focus, .btn-info:focus, .btn-warning:focus {
  outline: none !important; }

.navbar {
  height: 70px;
  background-color: transparent;
  background: transparent;
  border: none;
  color: #05C4B1;
  z-index: 100;
  margin-bottom: 0;
  border-radius: 0;
  transition: background-color 1s ease 0s; }

.navbar-default .navbar-brand {
  margin-top: 10px;
  color: #05C4B1;
  font-weight: bold; }
  .navbar-default .navbar-brand:hover {
    color: #05C4B1; }
.navbar-default .navbar-nav > li > a {
  color: #05C4B1;
  font-weight: bold;
  font-size: 28px;
  text-transform: lowercase;
  margin: 10px 5px 5px 5px;
  border-radius: 6px; }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:active, .navbar-default .navbar-nav > li > a:focus {
  color: #05C4B1;
  border: 1px solid #05C4B1; }
.navbar-default .navbar-nav > li > a:visited {
  color: #05C4B1;
  text-decoration: none; }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  background-color: transparent;
  color: #05C4B1; }
.navbar-default .navbar-toggle {
  border-color: #05C4B1; }
  .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #05C4B1; }
  .navbar-default .navbar-toggle .icon-bar {
    color: #E0F7FF;
    background-color: #05C4B1; }
.navbar-default .navbar-collapse.collapse.in ul {
  background-color: #E0F7FF; }

.main {
  min-width: 450px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center; }

.gameBoard {
  background-color: #E0F7FF;
  border: double #05C4B1 5px;
  border-radius: 50%;
  height: 450px;
  margin: auto;
  margin-top: 120px;
  padding: 10px;
  position: relative;
  width: 450px; }

#red, #blue, #green, #yellow {
  border: 5px double #E0F7FF;
  height: 210px;
  width: 210px; }

#red {
  background-color: #E5476E;
  border-top-left-radius: 100%; }
  #red.red-flash {
    background-color: #e02352; }

#blue {
  background-color: #33C4FA;
  border-top-right-radius: 100%; }
  #blue.blue-flash {
    background-color: #06b3f4; }

#green {
  background-color: #05C4B1;
  border-bottom-left-radius: 100%; }
  #green.green-flash {
    background-color: #04ab9b; }

#yellow {
  background-color: #FFA232;
  border-bottom-right-radius: 100%; }
  #yellow.yellow-flash {
    background-color: #e57d00; }

#center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 150px;
  width: 150px;
  border-radius: 50%;
  border: double #05C4B1 5px;
  background-color: #E0F7FF;
  text-align: center;
  z-index: 5; }
  #center-circle .name {
    padding-top: 20%;
    font-size: 36px;
    color: #05C4B1; }
  #center-circle #start, #center-circle #reset {
    display: inline-block; }

.score div {
  text-align: center; }
  .score div p {
    background-color: #05C4B1;
    color: #E0F7FF;
    border: double #E0F7FF 3px;
    padding: 2%;
    border-radius: 6px; }
    @media (min-width: 765px) {
      .score div p {
        margin-left: 125px;
        margin-right: 125px; } }

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  clear: both;
  padding-top: 20px;
  background-color: transparent; }
  .footer p {
    color: #05C4B1; }

.modal-body p {
  color: #05C4B1; }
  .modal-body p a {
    color: #E5476E; }
    .modal-body p a:hover {
      color: #FFA232;
      text-decoration: none; }

.modal-footer button {
  border-radius: 4px;
  border-color: #05C4B1;
  color: #05C4B1; }
  .modal-footer button:hover {
    background-color: #05C4B1;
    border-color: #05C4B1;
    color: #E0F7FF; }
              
            
!

JS

              
                var aiSequence = [];
var playerSequence = [];
var currentLevel = 0;
var highestLevel = 0;
var difficulty = 'normal';
var currentColor;
var currentSound;
var timeoutLength;
var speed;
var turn = 'computer';


//Possible colors
var colors = [
	'red',
	'blue',
	'green',
	'yellow'
];

//Possible sounds
var sounds = [
	new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3'),
	new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3'),
	new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3'),
	new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3')
];

$(document).ready( function() {

	//Lets user change difficulty level
	$('#difficulty').click( function() {
		if (difficulty === 'normal') {
			difficulty = 'strict';
		} else if (difficulty === 'strict') {
			difficulty = 'normal';
		}
	});

	//Flashes a color
	function flashColor(color) {
		$('#' + color).addClass(color + '-flash');
		setTimeout(function() {
			$('#' + color).removeClass(color + '-flash');
		}, 300);
	}

	//Plays a sound
	function playSound(sound) {
		sound.play();
	}

	//Creates a random sequence of color flashes and sounds
	function makeRandomSequence() {
		if (turn === 'computer') {
			//Make a random number (1-4)
			var random = (Math.floor(Math.random() * 4) + 1);

			//Add that random number to the aiSequence
			aiSequence.push(random);
			console.log(aiSequence);

			displayAISequence();
		}
	}

	//For each number in aiSequence array, flash the color and make sound for that number
	function displayAISequence() {
		console.log('Begin displaying aiSequence ' + aiSequence);
		if (currentLevel < 5) {
			speed = 900;
		} else if (currentLevel < 10) {
			speed = 700;
		} else if (currentLevel < 15) {
			speed = 600;
		} else {
			speed = 500;
		}
		
		//Delay the Sequence so the buttons don't all flash at once
		function delaySequence(index, delay){
			setTimeout(function(){
				displayCurrentColorAndSound(aiSequence[index]);
			}, delay);
		}

		function displayCurrentColorAndSound(val) {
			currentColor = colors[val - 1];
			currentSound = sounds[val - 1];
			
			playSound(currentSound);
			flashColor(currentColor);
		}

		for (var i = 0; i < aiSequence.length; i++) {
			timeoutLength = speed + (i * speed);
			//Let time pass before displaying next color
			delaySequence(i, timeoutLength);
		}

		//Start accepting the player sequence after the aiSequence has been displayed
		timeoutLength = speed + (speed * aiSequence.length);
		setTimeout(function() {
			turn = 'player';
		}, timeoutLength);
	}
		
	// Gets the players inputed sequence and converts it to an array
	function addToPlayerSequence(colorNum) {
		if (turn === 'player') {
			var playerPickedColor = colors[colorNum - 1];
			var playerPickedSound = sounds[colorNum - 1];

			//add move to playerSequence
			playerSequence.push(colorNum);
			console.log(playerSequence);

			//Display colors and play sounds as user picks them
			playSound(playerPickedSound);
			flashColor(playerPickedColor);
			
			//Check if the player has entered a long enough sequence
			console.log('playerSequence length is ' + playerSequence.length + ', aiSequence.length is ' + aiSequence.length);
			if (playerSequence.length === aiSequence.length) {
				//stop user entering more colors
				turn = 'computer';
				
				//check if sequences match
				var correct = playerSequence.every(function(val, index) {
					return val === aiSequence[index];
				});

				//if they match, return pass
				if (correct) {
					//update current level and check for win
					getResult('pass');
				} else {
					//display fail alert for difficulty selected
					getResult('fail');
				}

			//If not long enough, check if the last color entered is correct	
			} else if (playerSequence.length < aiSequence.length) {
				var correctColor = playerSequence.every(function(val, index) {
					var sliceOfAISequence = aiSequence.slice(0, index + 1);
					return val === sliceOfAISequence[index];
				});

				//Let user know if they input an incorrect color, otherwise listen for more clicks
				if (!correctColor) {
					//display fail alert for difficulty selected
					getResult('fail');
				}
			}
		}
	}

	//Listen for player input
	$('#red').click(function() {
		addToPlayerSequence(1);
	});
	$('#blue').click(function() {
		addToPlayerSequence(2);
	});
	$('#green').click(function() {
		addToPlayerSequence(3);
	});
	$('#yellow').click(function() {
		addToPlayerSequence(4);
	});

	function getResult(outcome) {

		//if correct sequence, increase level and check for win
		if (outcome === 'pass') {
			//update the score
			console.log('passed');
			currentLevel++;
			$('#currentLevel').html('Current Level: ' + currentLevel);

			checkWin();

		} else if (outcome === 'fail') {
			console.log('failed');
			if (difficulty === 'normal') {
				//Display alert to let user know they got it wrong and to try again
				sweetAlert({
					title: 'Oops, that wasn\'t right',
					text: 'Would you like to try again?',
					type: 'warning',
					showCancelButton: true,
					confirmButtonColor: '#6BE2F9',
					confirmButtonText: 'Yes',
					cancelButtonText: 'No',
					closeOnConfirm: true,
					closeOnCancel: true,
					customClass: 'simonAlert'
				}, function(confirmed) {
					if (confirmed) {
						//reset playerSequence
						playerSequence = [];

						//replay the same aiSequence
						turn = 'computer';
						displayAISequence();

					} else {
						//check for high score
						isHighScore();
						
						//reset the game, but don't start
						playerSequence = [];
						aiSequence = [];
						currentLevel = 0;
					}
				});

			} else if (difficulty === 'strict') {
				//Display alert letting user know they lost, ask if they want to play again,
				sweetAlert({
					title: 'Sorry you lose :(',
					text: 'Would you like to play again?',
					type: 'error',
					showCancelButton: true,
					confirmButtonColor: '#6BE2F9',
					confirmButtonText: 'Yes',
					cancelButtonText: 'No',
					closeOnConfirm: true,
					closeOnCancel: true,
					customClass: 'simonAlert'
				}, function(confirmed) {
					if (confirmed) {
						//check if it's the new high score
						isHighScore();
						
						//reset game
						resetGame();
					} else {
						//check if it's the new high score
						isHighScore();
						
						//reset the game, but don't start
						playerSequence = [];
						aiSequence = [];
						currentLevel = 0;
					}
				});
			}
		}
	}

	//Checks for high score
	function isHighScore() {
		if (currentLevel > highestLevel) {
			highestLevel = currentLevel;
			$('#highLevel').html('High Score: ' + highestLevel);
		}
	}

	//Checks if user has won (reached level 20) 
	function checkWin() {
		if (currentLevel === 20) {
			//alert user they've won and restart the game
			sweetAlert({
				title: 'You\'ve Won!',
				text: 'Would you like to play again?',
				type: 'success',
				showCancelButton: true,
				confirmButtonColor: '#6BE2F9',
				confirmButtonText: 'Yes',
				cancelButtonText: 'No',
				closeOnConfirm: true,
				closeOnCancel: true,
				customClass: 'simonAlert'
			}, function(confirmed) {
				if (confirmed) {
					//check if it's the new high score
					isHighScore();
					//reset the game
					resetGame();
				} else {
					//check if it's the new high score
					isHighScore();
					
					//reset the game, but don't start
					playerSequence = [];
					aiSequence = [];
					currentLevel = 0;
				}
			});

		} else {
			//reset playerSequence
			playerSequence = [];

			//continue adding moves
			turn = 'computer';
			makeRandomSequence();
		}
	}

	function resetGame() {
		aiSequence = [];
		playerSequence = [];
		currentLevel = 0;
		turn = 'computer';
		$('#currentLevel').html('Current Score: ' + currentLevel);
		//start new round
		makeRandomSequence();
	}

	//Allows player to reset the game themselves
	$('#reset').click( function() {
		resetGame();
	});

	function startGame() {
		//show alert to choose difficulty level
		sweetAlert({
			title: 'Let\'s Play!',
			text: 'Choose your difficulty level',
			type: 'info',
			showCancelButton: true,
			confirmButtonColor: '#6BE2F9',
			confirmButtonText: 'Strict',
			cancelButtonText: 'Normal',
			closeOnConfirm: true,
			closeOnCancel: true,
			customClass: 'simonAlert'
		}, function(confirmed) {
			if (confirmed) {
				//change difficulty to strict
				difficulty = 'strict';
			}

			//start new round
			makeRandomSequence();
		});
	}

	$('#start').click(function() {
		if (aiSequence.length === 0) {
			startGame();
		}
	});


}); //end document.ready




              
            
!
999px

Console