49,2 тыс подписчиков

Добавляем секретный уровень в пинг-понг на JavaScript

18 сентября 202018 сен 2020

2 мин

Оглавление

Что будем делать
Исходный код
Активируем секретный уровень

Мини-проект для тех, кому всё ещё просто.

Казалось бы, что проект с непобедимым компьютером должен стать последним в серии про пинг-понг, но что за игра без секретного уровня?

Что будем делать

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

Единственное, что нам понадобится, — исходный код последней версии нашей игры:

Исходный код

Активируем секретный уровень

Для этого нам понадобится новая переменная secret, которая на старте будет иметь значение false — это значит, что в самом начале уровень недоступен.

// активация секретного уровня var secret = false;

Чтобы посчитать 10 отскоков, будем следить за переменной count. Как только будет 10 отбиваний — меняем значение secret на true. Сам код кладём в обработку отскока от правой платформы:

// если набралось 10 — активируем секретный уровень if (count >= 10) {secret = true};

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

// число отбиваний в секретном режиме var secret_count = 0;

Туда же пишем сам код секретного уровня. Всё остальное теперь будем писать внутри:

// а вот и сам секретный уровень if (secret) { }

Увеличиваем скорость мяча

Чтобы сделать увеличение скорости на единицу за каждые 3 отбиваний, сначала нужно начать их считать. Так как у нас весь секретный уровень прописан в обработке отскока от правой платформы, то добавим увеличение secret_count прямо в секретный уровень:

secret_count += 1;

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

// если это число делится на 3 без остатка… if (secret_count % 3 == 0) { // увеличиваем скорость мяча на единицу if (ball.dx > 0) { ball.dx += 1} else {ball.dx -= 1}; if (ball.dy > 0) { ball.dy += 1} else {ball.dy -= 1}; }

Смотрите, мы не можем просто изменить значение переменной ballSpeed — она имеет значение только на старте, когда создаётся объект ball, чтобы определить dx и dy. Чтобы нам поменять эти параметры в середине игры, нужно ломиться внутрь объекта ball.

Разноцветный мяч

Осталось добавить смену цвета при повышении скорости. Для этого мы сделаем отдельную переменную — она будет отвечать за цвет мяча:

// цвет мяча, на старте — белый ballColor = '# ffffff';

Используем эту же переменную, перед тем как рисовать мяч. Для этого найдём в коде раздел с отрисовкой мяча и поменяем его так:

// Рисуем мяч нужным цветом context.fillStyle =ballColor; context.fillRect(ball.x, ball.y, ball.width, ball.height);

И теперь нам осталось добавить смену цвета сразу после увеличения скорости мяча. За минуту находим в интернете готовый код для выбора случайного цвета и вставляем в свой проект:

// красим мяч случайным образом ballColor = ' # ' + (Math.random().toString(16) + '000000').substring(2,8).toUpperCase();