123

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 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>
            
          
!
            
              @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;
	}
}
            
          
!
            
              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
🕑 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