Как создать игру Память на javascript?
Приветствую вас дорогие друзья! В этом уроке я покажу, как создать свою игру "Память" на javascript!

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

Описание игры
Давайте рассмотрим основные правила и особенности создаваемой игры.- изначально все картинки закрыты (также встречал подобные игры, где дается время рассмотреть все картинки, но мы сделаем посложнее, скрыв все картинки);
- при каждой новой игре, распределять картинки случайным образом;
- если игрок открыл 2 одинаковые картинки, то их больше нельзя скрывать;
- когда открыты разные картинки - делать задержку (не реагируя на клики), давая время игроку запомнить картинки.
Реализация игры
Верстка очень простая - в блоке (обертке с классом 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 - ячейка открыта и больше не закроется.
setTimeout(hide_img, 1000);1000 миллисекунд - это 1 секунда. В самом конце, если было сделано 2 клика, мы обнуляем количество кликов:
count_click = 0;Теперь можете взглянуть на реальный пример игры, а также скачать исходный файл к себе на компьютер! На этом урок по созданию игры "Память" завершен, надеюсь он принесет вам пользу. Желаю вам удачи, пока!
Раздел: JavaScript с примерами
Дата последнего изменения: 2017-01-14 22:10:38
Просмотров: 11400
Оставить комментарий
* Комментарий: (отменить ответ)
* Ваше имя:
Ваш e-mail:
*