Добавляем очки, жизни и нарастание сложности.
В первой версии нашего цветного арканоида была только игровая механика и движок игры. Из-за этого играть было интересно только первые несколько минут — мы знали, что всегда выиграем, потому что количество попыток было бесконечным. Сегодня мы это исправим.
Что сделаем
Чтобы было интереснее играть, добавим в игру такое:
- подсчёт очков — за кирпич каждого цвета начисляется какое-то количество очков;
- ограниченное количество жизней;
- за каждые 25 набранных очков будем увеличивать платформу на 2 пикселя, чтобы игроку было проще играть дальше;
- за каждые 100 очков выдаём дополнительную жизнь;
- одновременно с увеличением жизни будем ускорять шарик — чтобы было сложнее играть;
- за каждое падение шарика жизнь отнимается;
- очки и жизни будем показывать на экране.
Исходный код
Добавляем новые переменные
Нам понадобятся две новые переменные — для подсчёта очков и жизней, и две служебные:
Начисляем очки за кирпичи
Так как у нас вся механика очков, бонусов и увеличения сложности завязана на сбивание кирпичей, то сделаем так:
- Найдём в программе строчку, которая отвечает за проверку касания кирпича шариком.
- Добавим туда вызов функции touchdown().
- Создадим выше эту функцию и наполним её нужными командами.
За проверку, коснулся ли шарик кирпича, отвечает такой фрагмент кода:
if (collides(ball, brick)) {}
Добавим внутри этого условия вызов функции touchdown() и передадим в качестве параметра кирпич, которого коснулись. Так мы сможем понять, какого он был цвета, чтобы получить нужные очки:
touchdown(brick);
Теперь всё остальное, что связано с очками и бонусами, сделаем в этой новой функции. Создадим её сразу после раздела с переменными:
Выводим очки и жизни на экран
У нас уже был проект, где реализована эта механика — непобедимый пинг-понг. Возьмём оттуда код вывода результатов на экран и немного поправим его — сделаем серый шрифт, чтобы не отвлекал от игры.
Сам код вывода очков и жизней поместим в самый конец нашего главного игрового цикла loop():
Обрабатываем падение шарика
Последнее, что нам осталось сделать, — убирать жизни при падении и остановить игру, когда они закончились.
Находим строчку, которая проверяет, упал ли шарик вниз:
// перезагружаем шарик, если он улетел вниз, за край игрового поля
if (ball.y > canvas.height) {
Внутри этой проверки добавим такой алгоритм:
- уменьшаем количество жизней на единицу
- обнуляем набранные очки
- если жизни закончились — выводим сообщение и останавливаем игру.
Когда мы делали тетрис на JavaScript, мы уже писали там код, который стильно выводит на экран фразу «Game over». Скопируем код оттуда как есть и поставим в наш проект:
Поиграть в прокачанный арканоид.
Готовый код
Что дальше
Нам осталось добавить новые уровни и сделать так, чтобы кирпичи постепенно сдвигались вниз. Сделаем это в следующем подходе.
