Пошаговое создание легендарной игры Bejeweled на jQuery

1
2719
Добавить в избранное

Собирать цветные камни – лучший способ убить время. Заглянем под капот игры Bejeweled и создадим ее с нуля с помощью jQuery. Присоединяйтесь!

Легендарная Bejeweled своими руками на jQuery

Инструменты

Что нам понадобится для создания игры?

Безусловно, можно обойтись без библиотек и плагинов. Язык JavaScript имеет достаточно возможностей для работы со страницей и пользовательскими событиями. Но если вы начинающий разработчик, эти инструменты существенно упростят вам жизнь.

Начало работы

Создаем файл index.html, который будет представлять нашу игру. Подключаем все необходимые скрипты – их всего три:

  • сама библиотека jQuery (возьмем ее с CDN);
  • скрипт плагина, который должен лежать в той же папке (можно загрузить из официального репозитория);
  • скрипт игры bejeweled.js, который нам и предстоит написать (этот файл лежит в той же папке и пока пуст).

Состояния игры

Сразу определимся, в каких состояниях (стадиях) может находиться игровой процесс:

  • pick – ожидаем, когда пользователь выберет гем (первый или второй рядом с первым);
  • switch – после выбора второго гема меняем их местами;
  • revert – после свитча не появилось групп сбора, возвращаемся к исходному состоянию (меняем позиции гемов обратно);
  • remove – после свитча появились группы сбора, которые нужно удалить;
  • refill – после удаления групп сбора нужно заполнить образовавшиеся пустоты новыми гемами.

Игровое поле

Поле для игры в Bejeweled представляет собой простую двумерную сетку, на которой располагаются гемы (драгоценные камни). Их необходимо удалять, собирая в группы одного цвета.

В нашей реализации для простоты будут учитываться только вертикальные или горизонтальные группы размером от трех камней (и более).

Примеры допустимых групп:

Пошаговое создание легендарной игры Bejeweled на jQuery

Первая попытка

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

  • Мы создали поле размером 7х6 ячеек и представляющий его массив jewels.
  • Для начала заполнили его значениями -1 – отсутствие гема.
  • Затем прошлись циклом по каждой ячейке, выбрали случайным образом цвет и записали его в jewels. Также создали DOM-элемент, который представляет гем на странице.

Пошаговое создание легендарной игры Bejeweled на jQuery

Есть проблема: на поле еще до начала игры появляются группы сбора (вертикальные и горизонтальные группы из 3 и более гемов одного цвета). Это происходит из-за того, что цвета мы выбираем случайным образом.

Проверка на группы сбора

Добавим проверку после выбора цвета для нового гема. Если он вдруг составит группу сбора с уже существующими на поле камнями, просто поменяем цвет.

Функция isVerticalStreak проверяет соседей по вертикали, а isHorizontalStreak – соответственно по горизонтали. Если где-то получится больше двух гемов одного цвета, создадим другой гем.

Обработка действий игрока

Чтобы наша Bejeweled заработала, нужно отслеживать, какие гемы выбирает игрок, менять их местами и убирать появившиеся группы.

Язык программирования JavaScript умеет работать со множеством пользовательских событий – кликами, тачами, движениями мыши и др. Организовать все это в единую рабочую (а также кроссбраузерную и кроссплатформенную!) систему очень непросто. Так давайте отдадим тяжелую и скучную работу плагину touchSwipe.

Начнем с простых тапов/кликов. Попробуйте кликнуть мышкой на поле – в консоли появится сообщение и выведется тот гем, на который вы нажали.

Пошаговое создание легендарной игры Bejeweled на jQuery

Игровые операции

Выделение активного гема

Чтобы было понятно, какой камень выбрал игрок, нужно его каким-то образом выделять. Для этого добавим элемент-маркер на поле:

А при клике на гем, поместим маркер прямо над ним:

Меняем гемы местами

Если игрок выбирает первый гем из двух, мы только сохраним его позицию в переменных selectedRow и selectedCol.

А вот если выбран уже второй гем, нужно проверить, является ли он соседом для первого.

Функция gemSwitch меняет местами два гема как на поле, так и в массиве jewels:

Вводим еще одну функцию – checkMoving. Она будет проверять, появились ли на поле группы сбора после свитча.

Проверка хода

Переменная movingItems хранит количество движущихся в данный момент гемов. Функция checkMoving вызывается после завершения каждой анимации, но отработать должна только тогда, когда все камни остановятся. Для этого мы просто каждый раз уменьшаем счетчик на единицу.

checkMoving – главная функция в нашей головоломке. Она будет проверять поле после каждого действия, поэтому мы добавим в нее конструкцию switch для разных состояний игры:

Если ни один из выбранных камней не образовал группу сбора, меняем состояние игры на revert и двигаем их обратно.

После реверта мы снова попадем в эту функцию. В данном случае просто сбрасываем выбор и устанавливаем gameState = "pick".

Если группы сбора обнаружены, их нужно удалить.

Удаление групп сбора

Гемы из группы сбора нужно убрать с поля и из массива jewels. Сначала пометим их DOM-элементы классом remove:

А затем красиво уберем их со страницы:

Пошаговое создание легендарной игры Bejeweled на jQuery

После всех анимаций вновь проверим поле вызовом функции checkMoving.

Сдвигание гемов

После удаления необходимо опустить все камни, оказавшиеся над пустыми клетками. Добавим это действие в функцию checkMoving:

А вот и сама функция checkFalling:

Когда все камни опущены вниз, снова проверяем поле – checkMoving.

Если же опускать больше нечего, поле нужно снова заполнить. Для этого меняем состояние игры на refill.

Заполнение пустот

Функционал игры практически готов, осталось лишь заполнять поле камнями после удаления и запускать новый цикл игры.

Для этого добавим еще один case в функции checkMoving:

И реализуем функцию placeNewGems:

Не забываем про все проверки – вуа-ля! – наша игра готова 😉

Добавляем свайп c jQuery плагином

Можно сделать Bejeweled еще красивее и удобнее, добавив возможность двигать камни с помощью свайпов. Вот где нам пригодится плагин touchSwipe. Он замечательно обрабатывает жесты игрока и предоставляет для этого очень удобный интерфейс:

Вы можете немного поиграть с полем, чтобы понять, как работают свойства swipe и swipeStatus.

Реализуем обработчики. swipeStatusHandler будет отслеживать начало свайпа и записывать первый выделенный гем. swipeHandler сделает все остальное:

  • отследит направление движения;
  • найдет второй гем;
  • запустит свитч.

Весь остальной функционал уже готов! Вы можете наслаждаться любимой головоломкой.

See the Pen Bejeweled by FurryCat (@mohnatus-the-lessful) on CodePen.0

Творческое задание

Для упражнения или ради интереса вы можете переписать код игры без использования jQuery или заменить ее на другие JavaScript фреймворки.

Также в прототип можно добавить разные улучшения:

  • подсчет очков;
  • красивые изображения для гемов;
  • бонусы за сбор больших групп (5 и больше камней);
  • анимация удаления гемов с поля;
  • возможность собирать не только горизонтальные и вертикальные группы (группа может быть любой формы, например, прямоугольной);
  • автоматическое перемешивание при отсутствии возможных комбинаций для свитча;
  • уровни с разным размером поля или разным количеством цветов.

Оригинал: Complete Bejeweled prototype made with jQuery

Что бы вы улучшили в этой игре? Пишите в комментариях 🙂

Хотите получать больше интересных материалов с доставкой?

Подпишитесь на нашу рассылку:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Один комментарий

  1. Спасибо, очень круто!

Добавить комментарий