Как создать игру Память на javascript?

Приветствую вас дорогие друзья! В этом уроке я покажу, как создать свою игру "Память" на javascript! В самом конце данного урока по javascript имеется demo пример игры, а также исходный файл! Вам наверняка известна эта игра, правила ее очень простые, напомню:

Перед вами игровое поле, обычно 4 на 4 клетки (может быть и больше). Когда вы нажимаете на одну из клеток, на ее месте показывается картинка. Суть игры - открыть 2 одинаковые картинки. После открытия  (если картинки совпали) - они никуда не продают, если же вы ошиблись, то обе картинки продают.

Изображение игрового процесса:  

 Описание игры

Давайте рассмотрим основные правила и особенности создаваемой игры.

1. изначально все картинки закрыты (также встречал подобные игры, где дается время рассмотреть все картинки, но мы сделаем посложнее, скрыв все картинки);
2. при каждой новой игре, распределять картинки случайным образом;
3. если игрок открыл 2 одинаковые картинки, то их больше нельзя скрывать;
4. когда открыты разные картинки - делать задержку (не реагируя на клики), давая время игроку запомнить картинки.

Как видите, нужно соблюсти всего 4 правила, теперь давайте приступим к реализации!  

Реализация игры

Верстка очень простая - в блоке (обертке с классом igra_pamyat) содержится 16 ячеек:

	<div class="igra_pamyat">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

Стили игрового поля:

.igra_pamyat{
    width: 408px;
    margin: 0 auto;
}
.igra_pamyat div{
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    cursor: pointer;
    float: left;
}

Больший интерес представляем javascript (jquery) код, давайте рассмотрим его, после чего я поясню ключевые моменты:

$(document).ready(function(){

	//функция, которая перемешивает массив
	function mix(mixArray) {
	  var index, valueIndex; 
	  for (var i=0; i<=mixArray.length-1; i++) {
		index = Math.floor(Math.random()*i);
		valueIndex = mixArray[index];
		mixArray[index] = mixArray[i];
		mixArray[i] = valueIndex;
	  }
	  return mixArray;
	}

	var last_img; //Последняя показанная картинка
	var img_root = 'https://sergey-oganesyan.ru/wp-content/uploads/2017/01/'; //Путь к папке с картинками
	var click_flag = 1;
	var count_click = 0; //Кол-во кликов
	var game_array = [1,3,4,5,6,1,7,8,2,6,7,3,4,5,8,2]; //Массив расположения картинок

	mix(game_array); //перемешиваем массив (картинки)
	
	$('.igra_pamyat div').each(function(){
		$(this).attr({'class':'num'+game_array[count_click],'data-state':'0'});
		count_click++;
	});
	
	count_click = 0;
	
	$('.igra_pamyat div').click(function(){ //Клик на игровом поле
	
		if( $(this).data('state') == 0 && click_flag == 1 ){ //Если ячейка закрыта
		
			if( count_click == 0 ){ //Если первый клик по закрытому полю
				count_click++;
				last_img = $(this).attr('class');
				$(this).data('state',1).attr('data-state',1).css('backgroundImage', 'url(' + img_root + last_img.substr(3,1) + '.jpg)');
			}else{
			
				//Если картинки совпадают
				if( last_img == $(this).attr('class')  ){
					$('.' + last_img).data('state',2).attr('data-state',2).css('backgroundImage', 'url(' + img_root + last_img.substr(3,1) + '.jpg)');
				}else{
				
					$(this).data('state', 1).attr('data-state',1).css('backgroundImage', 'url(' + img_root + $(this).attr('class').substr(3,1) + '.jpg)');

					 click_flag = 0;
					
					function hide_img() { //Делаем задержку
						$('.igra_pamyat div').each(function(){
							if( $(this).data('state') == 1 ){
								$(this).data('state',0).attr('data-state',0).css('backgroundImage', 'none');
							}
						});
						 click_flag = 1;
					}
					setTimeout(hide_img, 1000);
				}
				count_click = 0;
			}
		}
	});
});

  Сначала идет функция, которая перемешивает элементы массива случайным образом, это нужно для того, чтобы при каждой новой игре все картинки находились в разных ячейках, чтобы игрок не запоминал их. Переменная last_img - в ней мы будем хранить открытую картинку, это та картинка, которая появляется при первом клике на игровую панель, когда игрок еще не выбрал пару. В переменной img_root хранится путь к папке, в которой находятся все картинке (в данном случае 8 разных картинок). В качестве имен этих картинок используются цифры от 1 до 8 - это удобно для подстановки картинок в ячейки. Флаг (переменная) click_flag необходим для того, чтобы запретить пользователю кликать и открывать другие ячейки в тот момент, когда он открыл 2 разные картинки и нужно сделать задержку. В count_click хранится количество кликов по игровому полю, это значение обнуляется, когда пользователь открыл 2 картинки (2 разные или 2 одинаковые). Далее идет массив game_array, в котором хранятся пары чисел - эти числа (далее) будут использоваться в качестве параметров для картинок. Все ячейки имеют 3 состояния:

• 0 - ячейка закрыта;
• 1 - ячейка открыта, но может закрыться (ожидание);
• 2 - ячейка открыта и больше не закроется.

По клику на какую-либо ячейку мы сначала проверяем, в каком состоянии она находится, если это не 2 состояние, то проверяем дальше. Открытие картинок происходит с помощью присваивания фона для ячейки (фоном является картинка), если нужно скрыть картинку, то просто присваиваем ячейке белый фон. Сравнение картинок происходит посредством сравнения классов, если картинки равны, то присваиваем им состояние 2. Если картинки разные, то делаем задержку (в данном случае на 1 секунду), а после скрываем обе картинки. Задержка делается с использованием функции hide_img, которая скрывает все картинки (ячейки), которые находятся в состоянии 1 (в ожидании). Функция hide_img вызывается через одну секунду после неправильного ответа (это и есть задержка в 1 секунду), если хотите изменить время задержки, то просто измените число у функции:

setTimeout(hide_img, 1000);

1000 миллисекунд - это 1 секунда. В самом конце, если было сделано 2 клика, мы обнуляем количество кликов:

count_click = 0;

Теперь можете взглянуть на реальный пример игры, а также скачать исходный файл к себе на компьютер! На этом урок по созданию игры "Память" завершен, надеюсь он принесет вам пользу. Желаю вам удачи, пока!