Spatial Memory Test

A simple spatial memory test game written by Nikhil Baliga

by Nikhil Baliga

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<!-- <title>Spatial Memory Test - By B. Nikhil Baliga</title> -->


<div class="container">
	<div>
		<h2>Spatial Memory Test</h2> (By: Nikhil Baliga)
	</div>

	<div class="well row">
		<div class="span4">
			<button class="start_game btn btn-primary">Start Game</button>
			<button class="btn btn-inverse btn_hint" disabled="disabled">Hint</button>
		</div>

		<div class="span2 toolbar_label">
			Level: <span class="level"></span>
		</div>

		<div class="span2 toolbar_label">
			Highest: <span class="highest_scored"></span>
		</div>

		<div class="span2 toolbar_label">
			Wrongs: <span class="wrong"></span>
		</div>
	</div>

	<div class="row">
		<div class='area span8'></div>

		<div class="span3 well">
			<h4>Spatial Memory Test</h4>
			<div>
				<ul>
					<li>Click on Start Game</li>
					<li>Observe the highlighted tiles</li>
					<li>Try to repeat the pattern</li>
					<li>See how far you can go!</li>
				</ul>
			</div>

			<a href="https://github.com/baliganikhil/memblock">Fork</a>
		</div>
	</div>
</div>

CSS

.each_cell {
	border: solid 1px silver;
	height: 50px;
	width: 50px;
}

.active_cell {
	background: #FFCCFF;
}

.wrong_cell {
	background: red;
}

.wrong {
	color: red;
	font-weight: bold;
	font-size: 20px;
}

.toolbar_label {
	font-size: 20px;
}

.area {
    padding: 40px;
}

JavaScript

$(document).ready(function () {
	var cur_level,
		answers,
		total_correct_answers,
		total_wrong_answers,
		max_chances,
		highest_scored,
		correct_answers,
		time_hide_cells,
		game_over;

	function init() {
		cur_level = 2;
		answers = [];

		total_correct_answers = 0;
		total_wrong_answers = 0;
		max_chances = 3;
		highest_scored = 0;

		correct_answers = 0;
		time_hide_cells = 1000;

		game_over = false;
	}

	$('.start_game').on('click', function() {
		init();
		start_game();
	});

	function start_game() {
		draw_table();
		create_problem();
		animate_active_cells();
		display_scores();
	}

	function draw_table() {
		var html = '<table class="game_table">';

		for (var i = 0; i < cur_level; i++) {
			html += '<tr class="each_row">';

			for (var j = 0; j < cur_level; j++) {
				html += '<td class="each_cell"></td>';
			}

			html += '</tr>';
		}

		html += '</table>';

		$('.area').html(html);

	}

	function create_problem() {
		answers = [];
		correct_answers = 0;
		var modder = cur_level * cur_level;

		while (answers.length != cur_level) {
			var cur_index = parseInt(Math.random() * 10000, 10) % modder;

			if (answers.indexOf(cur_index) == -1) {
				answers.push(cur_index);
			}

		}
	}

	function show_active_tiles() {
		var all_cells = $('.each_cell');

		for (var i = 0; i < answers.length; i++){
			$(all_cells[answers[i]]).addClass('active_cell');
			$(all_cells[answers[i]]).data('valid', 'valid');
		}
	}

	function hide_active_tiles() {
		$('.active_cell').removeClass('active_cell');
	}

	function animate_active_cells() {
		show_active_tiles();
		setTimeout(hide_active_tiles, time_hide_cells);

		display_scores();
		$('.btn_hint').removeAttr('disabled');
	}

	$('.btn_hint').on('click', function() {
		animate_active_cells();
		correct_answers = 0;
		$(this).attr('disabled', 'disabled');
	});

	$('.area').on('click', '.each_cell', function() {
		if (game_over) {
			return;
		}

		if ($(this).data('valid') != 'valid') {
			//...