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-fluid">
	<div class="row">
		<div class="col-xs-1 col-sm-3"></div>
		<div class="col-xs-10 col-sm-6 game-back">
			<h1 class="text-center title-txt">Simon</h1>

			<div class="text-center">
				<button class="btn green-btn game-btn" id="green"></button>
				<button class="btn red-btn game-btn" id="red"></button>
			</div>

			<div class="text-center">
				<button class="btn yellow-btn game-btn" id="yellow"></button>
				<button class="btn blue-btn game-btn" id="blue"></button>
			</div>
			
			<div class="container-fluid">
				<div class="row">
					<div class="col-xs-3 col-md-3"></div>
					<div class="col-xs-2 col-md-2">
						<div class="text-center">
							<div id="strictStatus"></div>
							<button class="btn strict-btn" id="strict">Strict</button>
						</div>
					</div>
					<div class="col-xs-2 col-md-2"></div>
					<div class="col-xs-2 col-md-2">
						<div class="text-center">
							<h5 class="title-txt">Turn</h5>
							<h1 class="turn-txt" id="turnNumber">-</h1>
						</div>
					</div>
					<div class="col-xs-3 col-md-3"></div>
				</div>
			</div>

			<div class="text-center">
				<label class="switch">
					<input type="checkbox" id="on-off">
					<div class="slider round"></div>
				</label>
			</div>
		</div>
		<div class="col-xs-1 col-sm-3"></div>
	</div>
</div>
              
            
!

CSS

              
                body {
	background: #e6f7ff;
}

.game-back {
	background: #333;
	border-radius: 50px;
	margin-top: 25px;
	box-shadow: 15px 15px 0px 5px #9bb8fd;
	outline-color: #333;
}

.title-txt {
	font-family: 'Bree Serif', serif;
	color: white;
}

.turn-txt {
	font-family: 'Share Tech Mono', sans-serif;
	color: #990000;
	background: #330000;
	margin-left: auto;
	margin-right: auto;
	margin-top: -8px;
	margin-bottom: 10px;
	border-radius: 5px;
}

.green-btn {
	background: #3e962e;
	width: 90px;
	height: 90px;
	border: none;
}
.green-btn:disabled {
	opacity: 1;
}

.red-btn {
	background: #b11b1b;
	width: 90px;
	height: 90px;
	border: none;
}
.red-btn:disabled {
	opacity: 1;
}

.yellow-btn {
	background: #e2d303;
	width: 90px;
	height: 90px;
	border: none;
}
.yellow-btn:disabled {
	opacity: 1;
}

.blue-btn {
	background: #4d94ff;
	width: 90px;
	height: 90px;
	border: none;
}
.blue-btn:disabled {
	opacity: 1;
}

.strict-btn {
	background: #ffcccc;
	font-family: 'Bree Serif', serif;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
}
.strict-btn:focus {
	background: #ff8080;
}


#strictStatus {
	width: 10px;
	height: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: black;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}

.game-btn {
	margin: 10px;
}

button:focus {
	outline: none !important;
}

/*
STUFF FOR THE ON/OFF SWITCH
*/

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
	margin-bottom: 15px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #AAA;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
              
            
!

JS

              
                $(document).ready(function(){
	//button reflects release
	$("button").on("click", function(){
		$(this).blur();
	});
	
	//Disable buttons when game is initially off
	gameButtonsDisable(true);
	
	//Handles whether the game is turned on or off
	var on = false;
	var game;
	
	//Handles pushing of the strict button
	$("#strict").on("click", function(){
		if (game){
			if (on){
				game.strictMode = !game.strictMode;
				console.log("strictMode: " + game.strictMode);
			}
			if (game.strictMode){
				//if strict is turned on, turn the light red
				$("#strictStatus").css("background", "red");
			}else{
				//if strict is off, turn the light black
				$("#strictStatus").css("background", "black");
			}
		}
	});
	
	//Handles the pushing of the on/off button
	$("#on-off").on("click", function(){
		on = !on;
		if (on){
			//turned on, set up game and add 1 combo to start
			game = new SimonGame();
			game.addCombo();
			updateTurnNumber(game);
			console.log("combo: " + game.combo);
			switch(game.combo[0]){
				case "green":
					tempTimeout = setTimeout(function(){
						//console.log("green simulation press");
						$("#green").css("background","#50c33c");
						playSound('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');
					}, 1000);
					break;
				case "red":
					tempTimeout = setTimeout(function(){
						//console.log("red simulation press");
						$("#red").css("background","#e13737");
						playSound('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
					}, 1000);
					break;
				case "yellow":
					tempTimeout = setTimeout(function(){
						//console.log("yellow simulation press");
						$("#yellow").css("background","#fcef36");
						playSound('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
					}, 1000);
					break;
				case "blue":
					tempTimeout = setTimeout(function(){
						//console.log("blue simulation press");
						$("#blue").css("background","#80b3ff");
						playSound('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
					}, 1000);
					break;
									  }
			//reset to original colors
			setTimeout(function(){
				$("#green").css("background","#3e962e");
				$("#red").css("background","#b11b1b");
				$("#yellow").css("background","#e2d303");
				$("#blue").css("background","#4d94ff");
			}, 1500);

			
			//Enable buttons when game is turned on
			gameButtonsDisable(false);
		}else{
			//turned off, clear out any existing game
			game = null;
			//Disable buttons when game is turned off
			clearTimeout(tempTimeout);
			gameButtonsDisable(true);
			$("#turnNumber").html("-");
		}
	});
	
	$(".game-btn").on("mouseup", function(){
		$("#green").css("background","#3e962e");
		$("#red").css("background","#b11b1b");
		$("#yellow").css("background","#e2d303");
		$("#blue").css("background","#4d94ff");
	});
	
	$(".game-btn").on("mousedown", function(){
		
		var soundURL = "";
		var greenSoundURL = 'https://s3.amazonaws.com/freecodecamp/simonSound4.mp3';
		var redSoundURL = 'https://s3.amazonaws.com/freecodecamp/simonSound3.mp3';
		var yellowSoundURL = 'https://s3.amazonaws.com/freecodecamp/simonSound2.mp3';
		var blueSoundURL = 'https://s3.amazonaws.com/freecodecamp/simonSound1.mp3';
		var tempTimeout;
		
		function playSimulation(){
			//Disable buttons while the simulation plays
			gameButtonsDisable(true);
			
			setTimeout(function(){
				//Enable buttons once the simulation finishes
				gameButtonsDisable(false);
			}, 300 + (game.combo.length * 1000));
			for (var i = 0; i < game.combo.length; i++){
				switch(game.combo[i]){
					case "green":
						tempTimeout = setTimeout(function(){
							//console.log("green simulation press");
							$("#green").css("background","#50c33c");
							playSound(greenSoundURL);
						}, 1000 + i*1000);
						break;
					case "red":
						tempTimeout = setTimeout(function(){
							//console.log("red simulation press");
							$("#red").css("background","#e13737");
							playSound(redSoundURL);
						}, 1000 + i*1000);
						break;
					case "yellow":
						tempTimeout = setTimeout(function(){
							//console.log("yellow simulation press");
							$("#yellow").css("background","#fcef36");
							playSound(yellowSoundURL);
						}, 1000 + i*1000);
						break;
					case "blue":
						tempTimeout = setTimeout(function(){
							//console.log("blue simulation press");
							$("#blue").css("background","#80b3ff");
							playSound(blueSoundURL);
						}, 1000 + i*1000);
						break;
				}
				//reset to original colors
				tempTimeout = setTimeout(function(){
					$("#green").css("background","#3e962e");
					$("#red").css("background","#b11b1b");
					$("#yellow").css("background","#e2d303");
					$("#blue").css("background","#4d94ff");
				}, 1500 + i* 1000);
			}
		}
		if (on){
			//if the game is turned on, carry on with the game
			switch(this.id){
				case "green":
					soundURL = greenSoundURL;
					$("#green").css("background","#50c33c");
					break;
				case "red":
					soundURL = redSoundURL;
					$("#red").css("background","#e13737");
					break;
				case "yellow":
					soundURL = yellowSoundURL;
					$("#yellow").css("background","#fcef36");
					break;
				case "blue":
					soundURL = blueSoundURL;
					$("#blue").css("background","#80b3ff");
					break;
			}
			
			if (game){
				game.addInput(this.id);
				if (game.inputLength() > 0){
					//check if the input is correct
					if (game.checkCorrect()){
						playSound(soundURL);
						//if everything is correct and game is still running
						if (game.inputLength() == game.combo.length && game.combo.length <= 20){
							game.resetInput();
							game.addCombo();
							updateTurnNumber(game);
							console.log("new Combo: " + game.combo);
							
							setTimeout(function(){
								playSimulation();
							}, 500);
							
							
						}else if (game.combo.length >= 21){//if the game ends (after the 20th turn)
							console.log("Game complete! You win!");
							alert("You win! Press OK to start again.");
							game.combo = [];
							game.addCombo();
							updateTurnNumber(game);
							console.log("new Combo: " + game.combo);
							playSimulation();
						}
					}else{
						//if the player failed
						clearTimeout(tempTimeout);
						console.log("Incorrect Input");
						game.resetInput();
						playSound("http://www.orangefreesounds.com/wp-content/uploads/2014/08/Wrong-answer-sound-effect.mp3");
						//if it's strict mode
						if (game.strictMode){
							game.combo = [];
							game.addCombo();
							updateTurnNumber(game);
							console.log("new Combo: " + game.combo);
						}
						playSimulation();
					}
				}
			}
		}
	});
	
});
// Updates the turn number on the user interface //
function updateTurnNumber(game){
	$("#turnNumber").html(game.combo.length);
}

// Disables or enables the 4 game buttons //
function gameButtonsDisable(bool){
	$('#green').prop("disabled", bool);
	$('#red').prop("disabled", bool);
	$('#yellow').prop("disabled", bool);
	$('#blue').prop("disabled", bool);
}

// Plays audio based on a url //
function playSound(url){
	var audio = new Audio(url);
	audio.play();
}

var SimonGame = function(){
	this.combo = [];
	var input = [];
	this.strictMode = false;
	
	this.reset = function(){
		//resets the combo list and input list
		this.combo = [];
		input = [];
	}
	this.addCombo = function(){
		//adds a random button to the combo list
		var random = Math.floor((Math.random() * 4) + 1);
		switch(random){
			case 1:
				this.combo.push("green");
				break;
			case 2:
				this.combo.push("red");
				break;
			case 3:
				this.combo.push("yellow");
				break;
			case 4:
				this.combo.push("blue");
				break;
		}
	}
	this.addInput = function(i){
		//adds the player's input to the input list
		input.push(i);
	}
	this.getInput = function(){
		return input;
	}
	this.resetInput = function(){
		input = [];
	}
	this.inputLength = function(){
		return input.length;
	}
	this.checkCorrect = function(){
		//checks if the player's input matches the combo list
		var result = true;
		for (var i = 0; i < this.inputLength(); i++){
			if (this.combo[i] != input[i]){
				result = false;
				break;
			}
			//console.log("checkCorrect loop: " + i);
		}
		return result;
	}
}
              
            
!
999px

Console