Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <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>
            
          
!
            
              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%;
}
            
          
!
            
              $(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
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console