TypeScript: логика игры

Назад | Учебник TypeScript | Вперёд

Напишем немного логики для нашей игры. При клике на какой-нибудь шарик он у нас должен схлопываться с шариками того-же цвета.

Для начала добавим логику обработки клика мышкой. Но перед этим произведём небольшой рефакторинг: вынесем canvas в свойства engine:

В обработчике onPaint теперь будем использовать это созданное поле:

В конструктор Engine добавим подписку на событие mousedown, обрабатывающее нажатие кнопки мышки:

Затем опишем сам обработчик onClick:

Здесь мы просто вычисляем ячейку в Board, на которую приходится клик мышкой. Метод getElementPosition я взял из своей прошлой игры html5lines, но переделал на TypeScript:

Внутри getElementPosition мы используем класс Point, поэтому нам придётся создать новый файл “Point.ts”:

Если сейчас мы соберём проект командой tsc, то при клике мышкой на ячейку должно выходить сообщение с координатами по ширине и высоте ячейки в Board.

Добавим теперь перечисление Situation в новом файле “Situation.ts”. Оно будет хранить текущее состояние игры, на текущий момент это два возможных значения:

Добавим новое поле в “Engine.ts” и проинициализируем его в конструкторе:

В обработчике клика добавим проверку текущей ситуации:

Если вы сейчас соберёте проект и откроете “tscolorballs.html”, то по клику на шарик у вас должно появляться диалоговое окно с координатами клика.

Добавим выбор шариков одного цвета и их удаление с игровой доски. Для этого заменим наш код с alert на:

Мы просто вызываем метод removeSameBalls(tileX, tileY), который сейчас напишем, и смотрим количество удалённых шаров с поля. Если какие-нибудь шары были удалены, то мы переключаем ситуацию игры в ANIMATION, где будет происходить сдвиг шаров. Эту ситуацию нужно добавить в перечисление Situation в “Situation.ts”:

Метод removeSameBalls в классе Engine будет содержать алгоритм по определению близлежащих шаров одного цвета и их удалению:

Я даже не знаю, стоит ли здесь что-то описывать. Тут по TypeScript почти ничего нет. Одна логика. Смысл в том, что мы используем массив pointsToProcess в качестве стека, содержащего позиции, которые нам нужно ещё обработать. Для каждой из позиций мы смотрим цвет шара в ней, если цвет совпадает с удаляемым, то мы в двумерном массиве a помечаем эту позицию как ProcessState.PROCESSED, добавляем координату в toRemove (чтобы позднее за один цикл очистить все ячейки поля, которые нужно). Массив a используется для того, чтобы мы не обрабатывали несколько раз одни и те же точки, то есть, чтобы не зациклились.

Если координата добавлена в toRemove, то для неё смотрятся шары слева, справа, сверху и снизу. Они обрабатываются аналогично.

Нам также нужно добавить файл “ProcessState.ts” с новым перечислением:

Нам также нужно добавить новый метод setTileState в класс Board, так как мы используем его в алгоритме удаления:

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

Обычно в подобных играх после удаления с поля группы шаров остальные падают вниз, заполняя пустое пространство. Для этого в методе onStep нужно добавить обработку ситуации ANIMATION, на которую мы переключили наше свойство situation у Engine в обработчике клика.

Сам метод processGravity:

Тут тоже довольно просто, если вы писали код до этого. Мы просто проходим в цикле по ячейкам поля, проверяем, что под каждой ячейкой. Если там пусто, то очищаем ячейку, а ячейке ниже присваиваем шар с цветом, который был в текущей ячейке. Затем аналогичным образом сдвигаем шары влево.

Соберите проект. Уже должно быть вполне играбельно. Только условия победы и поражения нет. Если этот проект вызывает у вас сложности, то рекомендую вам немного почитать про алгоритмы и структуры данных. У меня на сайте пока таких статьей почти нет, но когда-нибудь, возможно добавлю.

Назад | Учебник TypeScript | Вперёд


Поделиться:

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

Ваш e-mail не будет опубликован.