Это четвертая статья в моей серии руководств, в которой я пытаюсь объяснить концепции Vue.js, воссоздавая сцену битвы из Pokemon.
Оригинальное руководство
#1 Одиночные файловые компоненты
#2 Атаки: $refs, Promises и шина событий
#3 Vuex: управление состоянием
# 4 Расчет урона
#5 Переходы и анимация
Добро пожаловать в четвертую часть, на этот раз мы будем изучать не конкретные концепции Vue, а скорее конкретные расчеты урона от атак покемонов.
Я уверен, вы заметили из предыдущей статьи, что есть покемоны, чьи атаки наносят больше урона, чем некоторые покемоны. Вы также можете упустить тот факт, что оригинальная игра не всегда наносила одинаковый урон.
Сначала формулы урона могут показаться сложными, но давайте разберем их по частям.
Формула урона
Чтобы рассчитать урон от атаки, нам нужно принять во внимание несколько вещей:
- Уровень: уровень атакующего покемона
- Сила: сила атаки
- A: характеристика атаки атакующего покемона (если это физический тип) или специальная характеристика (если это особая атака, добавляющая статусный эффект).
- D: показатель защиты защищающегося покемона.
Мы обсудим модификатор на следующем шаге.
Формула модификатора
- STAB: сокращение от того же типа-атака-бонус, что означает, что если тип атаки один из покемонов, добавляется бонус.
- Тип: будет сравнивать тип атаки с типом защищающегося покемона с помощью диаграммы. Эта диаграмма показывает, насколько эффективной будет атака между типами. (0 — отсутствие эффекта, 0,5 — слабый, 2 — суперэффективный).
- Критический: добавит двойной урон, вероятность которого зависит от уровня и скорости покемона.
- другое: это модификатор, который исходит от предметов или может возникнуть в конкретной ситуации атаки. Чаще всего это всего лишь 1.
- Наконец, применяется случайный процент от 85% до 100%.
Выполнение
Давайте переведем боевые формулы в класс Damage, который мы сможем использовать в наших компонентах.
Тип диаграммы
Нам также понадобится список слабых и сильных сторон каждого типа, чтобы рассчитать эффективность типа.
Давайте создадим папку данных, мы создадим там файл с именем typeChart.js и поместим туда следующее:
Каждый тип состоит из объекта с 3 свойствами:
- иммунитеты: атаки против этих типов не нанесут никакого урона.
- слабые стороны: атаки против этих типов нанесут половину урона.
- сильные стороны: атаки против этих типов будут наносить двойной урон.
Класс урона
Вернемся к нашей папке src и создадим файл с именем Damage.js.
Здесь мы будем создавать наш класс.
Причина, по которой мы определяем расчеты ущерба в классе, заключается в том, что мы можем разделить наш код на несколько функций, каждая из которых несет свою ответственность. Это облегчает чтение и сопровождение кода.
Давайте углубимся, через конструктор нам нужно будет назначить классу некоторые основные свойства, такие как атакующий покемон, защищающийся покемон и используемое определение атаки. Мы также импортируем тип char для удобства использования.
Далее давайте создадим в классе новый метод с именем calculateStatsPower, сюда мы переведем формулу урона без включенного модификатора:
Далее мы начнем определять наши модификаторы, каждый получит свой собственный метод.
Начнем с расчета STAB:
Помните файл pokedex.json? У каждого покемона есть свойство типа, которое представляет собой массив. Здесь мы просто проверяем, присутствует ли тип атаки.
Далее давайте посчитаем эффект типа. Нам нужно будет проверить тип атаки на наличие сильных и слабых сторон. Сделаем это для каждого типа покемонов противника:
Давайте перейдем к расчету критического удара, это чушь.
Вычислить фактический модификатор не так сложно. В этом случае сила модификатора зависит от уровня атакующего покемона (покемоны более высокого уровня должны получить больший бонус).
Нам также нужно будет создать случайное число (0–255), чтобы критическое попадание произошло, это случайное число должно быть ниже порогового значения.
Этот порог будет основан на скорости атакующего покемона. Если тип атаки обычный, скорость делим на 512, если любой другой тип атаки, скорость атакующего покемона делим на 256.
Таким образом, обычные атаки имеют вдвое меньше шансов нанести критический удар.
Другой модификатор мы пока не можем реализовать, так как у нас нет предметов или атак, дающих усиления. Мы все равно определим метод и просто вернем 1.
Давайте вызовем все эти методы расчета в методе с именем power, это единственный метод, который мы будем вызывать извне.
Завершение
И последнее, но не менее важное: мы импортируем наш класс повреждений в Pokemon.vue и заменяем содержимое нашего старого метода calculateDamage.
Сразу после оператора импорта, который у нас уже есть для нашего помощника Vuex, мы поместим это:
и мы заменим метод calculateDamage следующим:
Вот и все, на данный момент мы закончили с реализацией атак покемонов.
Вы все еще можете реализовать «категоризированные атаки», которые предлагает оригинальная игра: обычные, специальные и статусные категории атак. Реализуйте для них логику боя в методах calculateOther и calculateStatsPower класса Damage. Можно было учитывать эффекты предметов, программировать многоэтапные атаки, вы вольны делать все, что захотите.
В следующей статье мы рассмотрим анимацию и переходы, а также начнем отображать эффекты атаки, такие как «критическое попадание», «очень эффективно», «не очень эффективно» и «не имело эффекта». Мы также отобразим нанесенный урон.
Вы можете найти код на github, код, относящийся к этой статье, был размещен в ветке главы-4.
Если у вас есть какие-либо вопросы или предложения, просто откройте тикет в репозитории, и я обязательно доберусь до него.
