TypeScript: доделываем игру

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

Наша игра почти готова. Осталось добавить три вещи:

  1. Первоначально фон рисуется белым цветом, но при сдвиге шариков он закрашивается чёрным.
  2. Нужно добавить подсчёт очков.
  3. По окончании игры нужно добавить перезапуск.

Первая проблема решается очень легко. Добавим ещё одну стадию в перечисление Situation, во время которого закрасим весь экран чёрным цветом.

Очистка canvas в “Engine.ts”:

Как видите, мы просто добавили проверку текущей ситуации и блок очистки поля для situation == Situation.CLEAR_SCREEN. Также мы вынесли код цвета для игрового поля с пустой ячейкой в константу Engine.EMPTY_COLOR:

При инициализации движка в Engine мы теперь инициализируем situation значением Situation.CLEAR_SCREEN для очистки игрового поля перед началом игры:

Нам также нужно модифицировать логику в onStep, чтобы после очистки поля начать игру:

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

Метод removeSameBalls возвращает количество удалённых шариков, так что нам достаточно легко подсчитать количество очков по описанной выше формуле.

Для начала добавим переменную, в которой будем хранить количество набранных игроком очков:

Инициализируем его в конструкторе:

Собственно сам подсчёт в методе onClick:

Отобразим количество очков в нижней части canvas:

Теперь нужно добавить проверку, остались ли на игровом поле шарики, которые можно схлопнуть, и если таких нет, то перезапускать игру. Но перед этим отобразим игроку его результат в Situation.END_GAME:

В Situation добавим новый элемент перечисления Situation.END_GAME:

По окончании игры нужно отобразить пользователю его результат:

Для перезапуска игры выделим отдельный метод initGame из конструктора:

Сам метод initGame будем вызывать на situation == Situation.CLEAR_SCREEN (заодно перенесём в initGame присвоение нового значения situation):

Отлично игра готова. Небольшой штрих: будем сохранять в localStorage лучший результат. Для этого в Engine добавим новое поле highScore:

Считываем значение наилучшего результата при инициализации Engine:

В обработчике onClick сохраняем результат как лучший, если он лучше предыдущего лучшего:

Отображаем лучший результат в paintStatus:

Скомпилированный результат я выложил в раздел проектов. Игра доступна по ссылке. Исходники на GitHub.

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


Поделиться:

TypeScript: доделываем игру: 2 комментария

  1. Спасибо за учебник.
    В checkEndGame баг забрался, не проверяет нижний и правый ряд board.

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

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