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 id="selector">
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 128 128" id="Layer_1" version="1.1" viewBox="0 0 128 128" xml:space="preserve">
		<g>
			<g>
				<path d="M64,0C28.656,0,0,28.656,0,64s28.656,64,64,64s64-28.656,64-64S99.344,0,64,0z M64,120    C33.125,120,8,94.875,8,64S33.125,8,64,8s56,25.125,56,56S94.875,120,64,120z"/>
			</g>
		</g>
		<g>
			<g>
				<path d="M64,48c-4.414,0-8,3.586-8,8v40c0,4.414,3.586,8,8,8s8-3.586,8-8V56C72,51.586,68.414,48,64,48z M64,40c4.414,0,8-3.586,8-8s-3.586-8-8-8s-8,3.586-8,8S59.586,40,64,40z"/></g>
		</g>
	</svg>

	<div class="instructions">Choose Difficulty Level</div>

	<div class="level">
		<span class="levelicon" style="background-color: #555555;" onclick="prepare('easy')" onmouseover="highlight(1)" onmouseout="unhighlight()"></span>
		<span class="levelicon" style="background-color: #555555;" onclick="prepare('medium')" onmouseover="highlight(2)" onmouseout="unhighlight()"></span>
		<span class="levelicon" style="background-color: #555555;" onclick="prepare('hard')" onmouseover="highlight(3)" onmouseout="unhighlight()"></span>
	</div>

	<div class="countdown"></div>
</div>

<div id="howtoplay">
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 128 128" id="Layer_1" version="1.1" viewBox="0 0 128 128" xml:space="preserve">
		<g>
			<g>
				<path d="M64,0C28.656,0,0,28.656,0,64s28.656,64,64,64s64-28.656,64-64S99.344,0,64,0z M64,120    C33.125,120,8,94.875,8,64S33.125,8,64,8s56,25.125,56,56S94.875,120,64,120z"/>
			</g>
		</g>
		<g>
			<g>
				<path d="M75.313,64l16.969-16.969c3.125-3.125,3.125-8.195,0-11.313c-3.117-3.125-8.188-3.125-11.313,0L64,52.688L47.031,35.719c-3.125-3.125-8.195-3.125-11.313,0c-3.125,3.117-3.125,8.188,0,11.313L52.688,64L35.719,80.969c-3.125,3.125-3.125,8.195,0,11.313c3.117,3.125,8.188,3.125,11.313,0L64,75.313l16.969,16.969c3.125,3.125,8.195,3.125,11.313,0c3.125-3.117,3.125-8.188,0-11.313L75.313,64z"/>
			</g>
		</g>
	</svg>
	<div class="instructions">How To Play</div>
	<div class="instructionlist">
		<ol>
			<li>Select a difficulty level by clicking one of the three dots. The dot on the left is the easiest level, the dot in the center is the medium level and the dot on the right is the hardest level.</li>
			<li>The timer will countdown from 3 seconds and give you time to compose yourself.</li>
			<li>You will be presented with a grid of green squares: 3x3 for easy, 4x4 for medium or 5x5 for hard.</li>
			<li>A square will be highlighted in green. You will need to click the green highlighted square as fast as you can, if you're too slow...it's game over! The more squares you click correctly, the faster the game will get.</li>
			<li>The game will start at a slow pace for the easiest level and a medium pace for the hardest level.</li>
			<li>Each time you click a square you will gain one point and another square will be highlighted.</li>
			<li>Continue clicking the highlighted squares until the game either gets too fast or you fail to click the correct square.</li>
		</ol>
	</div>
</div>

<table id="easy">
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>
<table id="medium">
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>
<table id="hard">
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

<div id="gameover">
	<span class="gameoverheader">GAME OVER!</span>
	<span class="gameovertext">Average Reaction Time</span>
	<span class="average gameovervalue"></span>
	<span class="gameovertext">Score</span>
	<span class="score gameovervalue"></span>
	<span class="gameovertext">Highest Score</span>
	<span class="highscore gameovervalue"></span>
	<a href="javascript:void(0)" class="gameovertext" onclick="restart()">Restart</a>
</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
html,
body {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	background-color: #DFF6FD;
	height: 100%;
	color: #555555;
	-webkit-tap-highlight-color: transparent;
}

.hidden {
	display: none;
}

svg {
	position: absolute;
	width: 2em;
	height: 2em;
	padding: 1.2em;
	fill: #555555;
	cursor: pointer;
}

#selector .instructions {
	text-align: center;
	width: 100%;
	font-size: 1.3em;
	padding-top: 1em;
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#selector .level {
	text-align: center;
	position: absolute;
	width: 100%;
	top: 50%;
	margin-top: -1em;
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#selector .countdown {
	text-align: center;
	display: none;
	font-size: 5em;
	position: absolute;
	width: 100%;
	top: 50%;
	margin-top: -1em;
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	-ms-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#selector .level .levelicon {
	width: 3em;
	height: 3em;
	display: inline-block;
	border-radius: 4em;
	margin-right: 10%;
	cursor: pointer;
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
	-ms-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}

#selector .level .levelicon:last-child {
	margin: 0;
}

#howtoplay {
	display: none;
}

#howtoplay .instructions {
	text-align: center;
	width: 100%;
	font-size: 1.3em;
	padding-top: 1em;
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#howtoplay ol {
	margin-top: 3em;
}

#howtoplay ol li {
	margin-bottom: 1em;
	font-size:1.2em;
}

.selected {
	display: table;
}

.cellselect {
	background-color: #4ADE9B;
}

table {
	height: 100%;
	width: 100%;
	display: none;
}

table tr td {
	border: 3px solid #4ADE9B;
	cursor: pointer;
}

#gameover {
	display: none;
	margin: 0 auto;
	text-align: center;
	padding-top: 2em;
}

#gameover .gameoverheader {
	display: block;
	font-size: 2.5em;
	margin-bottom: 1em;
}

#gameover .gameovervalue {
	display: block;
	font-size: 1.5em;
	margin-bottom: 1em;
}

#gameover .gameovertext {
	display: block;
	font-size: 1.5em;
	font-weight: bold;
}

#gameover a {
	color: green;
}

@media screen and (max-height: 270px) {
	#selector .level {
		top: 70%;
	}
	#selector .countdown {
		top: 70%;
	}
}

@media screen and (max-width: 350px) {
	#selector .instructions {
		text-align: right;
		margin-left: -.5em
	}
	
	#howtoplay .instructions {
		text-align: right;
		margin-left: -.5em
	}
	
	svg {
		padding: 1.2em .5em;
	}
}
              
            
!

JS

              
                var defaults = {
	"easy": {
		"gridSize": 3,
		"timeout": 1800
	},
	"medium": {
		"gridSize": 4,
		"timeout": 1500
	},
	"hard": {
		"gridSize": 5,
		"timeout": 1200
	}
};

var intensity;
var time;

var score = 0;
var highscore = 0;
var gameTimeout = 0;
var timeout = 0;
var correct = false;
var lastRandomRow = 0;
var lastRandomCell = 0;
var reactionTimes = [];

$(function() {
	clearCells();

	$("td").click(function() {
		clearTimeout(gameTimeout);
		correct = $(this).hasClass("cellselect");
		if (correct) {
			reactionTimes.push(parseInt((new Date().getTime() - time).toFixed(3)));
			score += 1;
			game(false);
		} else {
			endGame();
		}
	});

	$("svg").click(function() {
		if ($("#selector").is(":hidden")) {
			$("#selector").show();
			$("#howtoplay").hide();
		} else {
			$("#selector").hide();
			$("#howtoplay").show();
		}
	});
});

function prepare(level) {
	$("svg").hide();
	countdown();
	intensity = level;
	switch (level) {
		case "easy":
			setTimeout(function() {
				start();
			}, 3000);
			break;
		case "medium":
			setTimeout(function() {
				start();
			}, 3000);
			break;
		case "hard":
			setTimeout(function() {
				start();
			}, 3000);
			break;
	}
}

function highlight(count) {
	unhighlight();
	$(".levelicon").each(function(index) {
		var itemCount = index + 1;
		var backgroundColour = getBackgroundColour(count);
		if (itemCount <= count)
			$(this).css("background-color", backgroundColour);
	});
}

function unhighlight() {
	$(".levelicon").each(function() {
		$(this).css("background-color", "#555555");
	});
}

function getBackgroundColour(count) {
	switch (count) {
		case 1:
			return "#59DB28";
		case 2:
			return "#F6B921";
		case 3:
			return "#CA0424";
	}
}

function countdown() {
	var timer = 3;
	$(".level").hide();
	$(".countdown").show();
	$(".countdown").text(timer);

	setInterval(function() {
		if (timer > 1) {
			timer = timer - 1;
			$(".countdown").text(timer);
		}
	}, 1000);
}

function start() {
	$("#selector").hide();
	var level = "#" + intensity;
	$(level).removeClass("hidden");
	$(level).addClass("selected");
	game(true);
}

function game(start) {
	clearCells();
	clearTimeout(gameTimeout);
	if (!correct && !start)
		endGame();
	else {
		correct = false;
		gameTimeout = 0;
		var level = defaults[intensity];
		timeout = level.timeout - (score * level.gridSize);
		var randomRow = getRandom(level, lastRandomRow);
		lastRandomRow = randomRow;
		var randomCell = getRandom(level, lastRandomCell);
		lastRandomCell = randomCell;
		var row = $("#" + intensity + " tr").eq(randomRow - 1);
		$(row[0].cells[randomCell - 1]).addClass("cellselect");
		time = new Date().getTime();
		gameTimeout = setTimeout(function() {
			game(false);
		}, timeout);
	}
}

function getRandom(level, number) {
	var random = Math.floor((Math.random() * level.gridSize) + 1);
	if (random === number)
		return getRandom(level, number);
	else
		return random;
}

function clearCells() {
	$("td").removeClass("cellselect");
}

function endGame() {
	if (score > highscore) {
		highscore = score;
	}
	$("#" + intensity).addClass("hidden");
	$("#" + intensity).removeClass("selected");
	$("#gameover .score").text(score);
	$("#gameover .average").text(getAverage() + " milliseconds")
	$("#gameover .highscore").text(highscore);
	$("#gameover").show();
}

function getAverage(){
	var count = 0;
	$.each(reactionTimes, function(index, value) {
		count = count + value
	});
	
	if(reactionTimes.length > 0)
		return (count / reactionTimes.length).toFixed(3);
	else
		return 0;
}

function restart() {
	intensity = null;
	correct = false;
	timeout = 0;
	score = 0;
	lastRandomCell = 0;
	lastRandomCell = 0;
	time = 0;
	reactionTimes = [];
	$("#gameover").hide();
	$("svg").show();
	$(".level").show();
	$(".countdown").hide();
	$("#selector").show();
}
              
            
!
999px

Console