Из этого туториала вы узнаете, как создать простую игру, используя jQuery и HTML. Получившаяся игра призвана помочь вам улучшить свои навыки памяти. У нас будет сетка квадратов 8 × 6 в качестве игрового окна. Как только вы запустите игру, на шести квадратах появятся изображения птиц, которые исчезнут через несколько секунд. Ваша цель — запомнить положение отображаемых изображений и щелкнуть эти квадраты.
После того, как вы нажмете шесть квадратов, вам будут начисляться очки в соответствии с вашей точностью, и птицы будут снова отображаться в случайных положениях. Этот процесс будет продолжаться, пока не истечет выделенное время. Вы получите одно очко за каждый точный клик и бонус в 100 баллов, если правильно щелкнете по всем шести птицам. Определив правила игры, мы можем приступить к созданию стартового экрана.
Разработка макета экрана
Сначала файл HTML для игры показан ниже. Вся статистика игры находится внутри элемента game_results . Вы можете видеть оставшееся время, счет и оставленные клики для одного уровня в этой области. Все окна, связанные с игровым процессом, находятся внутри элемента game_window . Это включает начальный начальный экран, который содержится в элементе start_window . Как только игра запущена, стартовый экран скрыт, и игра ведется в элементе play_window . Наконец, результаты отображаются в элементе end_window . Вы можете найти необходимый CSS-код в разделе стилей.
<html> <head> <title>Simple jQuery Memory Game</title> <script src='jquery-latest.js'></script> </head> <body> <div id="game_results"> <ul> <li> <div class="field_label">Time Left</div> <div class="field_value"> <div id="timer">40</div> </div> </li> <li> <div class="field_label">Your Score</div> <div class="field_value"> <div id="score">0</div> </div> </li> <li> <div class="field_label">Clicks Left</div> <div class="field_value"> <div id="clicks"></div> </div> </li> <li> <div id="bonus" class="bonus">100 Bonus</div> </li> </ul> </div> <div id='game_window'> <div id='start_window'> <div id='msg_game'>jQuery Memory Checker Game</div> <div id='start_game'>Start</div> </div> <div id='end_window'> <div id='complete_game'></div> </div> <div id='play_window'></div> </div> </body> </html>
Создание окна игры
Во-первых, мы должны создать элементы для игрового окна, прежде чем переходить к какой-либо функциональности. Как упоминалось ранее, play_window будет использоваться для игры. В этом разделе мы должны создать 48 квадратов на восемь столбцов и шесть рядов. Код для нескольких квадратов показан ниже.
<div id="game_0_0" data-x="0" data-y="0" class="game_box"></div> <div id="game_0_1" data-x="0" data-y="1" class="game_box"></div> <div id="game_0_2" data-x="0" data-y="2" class="game_box"></div> <div id="game_0_3" data-x="0" data-y="3" class="game_box"></div> <div id="game_0_4" data-x="0" data-y="4" class="game_box"></div> <div id="game_0_5" data-x="0" data-y="5" class="game_box"></div> <div id="game_0_6" data-x="0" data-y="6" class="game_box"></div> <div id="game_0_7" data-x="0" data-y="7" class="game_box"></div>
Приведенный выше код представляет первую строку окна воспроизведения. Я использовал соглашение об именах для атрибутов id , data-x и data-y которые пригодятся в следующих разделах. Теперь, когда у нас есть игровое окно, давайте перейдем к созданию функций для запуска игры.
Начиная игру
Как только мы нажмем кнопку «Пуск», все остальные окна должны быть закрыты, чтобы окно игры могло отображаться. Рассмотрим код ниже.
var game_interval; var activeBirds = []; var activeCount = 0; var activeStatus = 1; $("#start_game").click(function(){ game_interval = setInterval(updateTimer,1000); $("#play_window").show(); $("#start_window").hide(); displayBirds(); });
Первые четыре строки определяют глобальные переменные. game_interval будет содержать значение, возвращаемое setInterval() , в то время как activeBirds — это массив, который будет содержать позиции птиц на текущем уровне. activeCount — это количество кликов, выполненных на одном уровне, а activeStatus используется для проверки статуса кликов. Внутри функции обработчика щелчка для кнопки «Пуск» мы вызываем updateTimer() с интервалом в одну секунду, чтобы обновить время, оставшееся до воспроизведения. Код для функции updateTimer() показан ниже.
function updateTimer(){ var time_remaining = parseInt($("#timer").html()); if(time_remaining == 0){ window.clearInterval(game_interval); $("#play_window").hide(); $("#start_window").hide(); $("#end_window").show(); $("#complete_game").html("You Have Scored "+$("#score").html()); }else{ $("#timer").html(--time_remaining); } }
Функция, показанная выше, будет уменьшать время отсчета каждую секунду. Когда оставшееся время становится равным нулю, он останавливает таймер, вызывая функцию JavaScript clearInterval() . Затем окно воспроизведения скрывается, и отображается окно результатов. Теперь давайте перейдем к остальной части функции запуска.
$("#start_game").click(function(){ game_interval = setInterval(updateTimer,1000); $("#play_window").show(); $("#start_window").hide(); displayBirds(); });
Далее нам нужно скрыть стартовое окно и отобразить игровое окно. Наконец, мы вызываем displayBirds() для отображения птиц и запуска игры. Функция displayBirds() обсуждается в следующем разделе.
Отображение птиц, чтобы нажать
После запуска игры птицы будут отображаться в шести случайных положениях на каждом уровне. Давайте рассмотрим следующую displayBirds() . Функция зацикливается, пока в массив activeBirds не будет добавлено соответствующее количество птиц. Внутри цикла генерируются случайные значения X и Y для выбора номеров строк и столбцов. Затем мы проверяем, занята ли сгенерированная позиция птицей. Если позиция доступна, мы ее берем. Затем изображение птицы добавляется в сгенерированную позицию.
function displayBirds(){ while (activeBirds.length < 6){ var random_X = Math.floor(Math.random()*6); var random_Y = Math.floor(Math.random()*8); var array_index = $.inArray(random_X+""+random_Y, activeBirds); if(array_index == -1){ activeBirds.push(random_X+""+random_Y); } $("#game_"+random_X+"_"+random_Y).html("<img src='bird.png' class='game_bird' />"); level_interval = setTimeout(function(){ $(".game_bird").remove(); activeStatus = 1; },2000); } }
Наконец, setTimeout() используется для вызова анонимной функции, которая скрывает птиц. Птицы появятся, а затем исчезнут через две секунды. Пользователь должен запомнить места, где были показаны птицы, и начать нажимать, чтобы получить очки. Следующий раздел посвящен обработке кликов пользователя и ведению счета.
Захват кликов пользователей и создание точек
Пользователь набирает очки, нажимая на квадраты, на которых ранее отображались птицы. Мы также должны генерировать птиц для следующего уровня, как только пользователь завершит щелчок для текущего уровня. Код для обработки событий клика показан ниже.
$(".game_box").click(function(){ if(activeStatus == 1){ // Section 1 activeCount++; $("#clicks").html(6-activeCount); var clicked_x = $(this).attr("data-x"); var clicked_y = $(this).attr("data-y"); var clicked_box = clicked_x+""+clicked_y; // Section 2 var array_index = $.inArray(clicked_box, activeBirds); if(array_index != -1){ activeBirds.splice(array_index,1); } // Section 3 if(activeCount == 6){ var score = parseInt($("#score").html()); score = score + (6-activeBirds.length); if(activeBirds.length == 0){ score = score + 100; $("#bonus").slideDown("slow"); $("#bonus").slideUp("slow"); } $("#score").html(score); //Reset Variables activeCount = 0; activeBirds = []; displayBirds(); }else{ return; } } });
Сначала я назначил функцию для события click каждого квадрата с помощью game_box класса game_box . Переменная activeCount содержит количество пользовательских кликов на каждом уровне. Мы будем увеличивать его каждый раз, когда пользователь нажимает на квадрат. Затем мы отображаем оставшиеся клики, вычитая activeCount из шести. Для каждого клика мы также получаем значения X и Y квадрата, используя атрибуты data-x и data-y .
Далее, мы проверяем, находится ли activeBirds блок в массиве activeBirds с помощью функции jQuery inArray() . При каждом правильном предположении пользователь получает одно очко, а элемент удаляется из activeBirds . Как только у пользователя нет кликов, мы рассчитываем счет, используя оставшиеся записи в массиве activeBirds . Если все птицы были сопоставлены, пользователю дается 100 бонусных баллов. Когда все птицы совпадают, мы показываем бонусный тег, который по умолчанию скрыт в верхней части, используя функции slideDown() и slideUp() jQuery. Наконец, мы сбрасываем все переменные и вызываем displayBirds() чтобы показать птиц для следующего уровня.
Вывод
В этом уроке мы создали простую игру jQuery для улучшения памяти. Если вам надоела наша очень простая игра, попробуйте добавить некоторые из следующих функций.
- Добавьте разные типы птиц с разными значениями баллов вместо одинакового количества баллов для всех птиц.
- Увеличьте количество птиц, отображаемых для каждого уровня, когда пользователь углубляется в игру.
- Предоставьте дополнительное время для достижения целей, например, 500 или 1000 баллов.
Я надеюсь, что вы опробуете эти функции. Дайте мне знать о новых возможностях, которые могут улучшить игру, используя раздел комментариев. Наслаждайтесь!