0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p><a>1 часть</a></p>
1
<p><a>1 часть</a></p>
2
<p><a>2 часть</a></p>
2
<p><a>2 часть</a></p>
3
<p><a>3 часть</a></p>
3
<p><a>3 часть</a></p>
4
<p>В прошлый раз я описал как устроены классы персонажей, в этот раз расскажу об активных умениях.</p>
4
<p>В прошлый раз я описал как устроены классы персонажей, в этот раз расскажу об активных умениях.</p>
5
<p>В этот раз конструктор получился небольшим и относительно понятным.</p>
5
<p>В этот раз конструктор получился небольшим и относительно понятным.</p>
6
<p><strong>name</strong>- название умения (только на английском. Об этом дальше).</p>
6
<p><strong>name</strong>- название умения (только на английском. Об этом дальше).</p>
7
<p><strong>type</strong>- тип урона (пока реализовано два: physical и piercing).</p>
7
<p><strong>type</strong>- тип урона (пока реализовано два: physical и piercing).</p>
8
<p><strong>damage</strong>- указываем количество урона, которое будет нанесено врагу.</p>
8
<p><strong>damage</strong>- указываем количество урона, которое будет нанесено врагу.</p>
9
<p><strong>description</strong>- описание умения, которое будет появляться при наведении.</p>
9
<p><strong>description</strong>- описание умения, которое будет появляться при наведении.</p>
10
<p><strong>iconPath</strong>- путь до иконки умения.</p>
10
<p><strong>iconPath</strong>- путь до иконки умения.</p>
11
<p><strong>animationAttackNumber</strong>- т.к. у каждого персонажа не меньше двух разных анимаций атак (их названия Attack1.png, Attack2.png...), то здесь указывается номер нужного изображения.</p>
11
<p><strong>animationAttackNumber</strong>- т.к. у каждого персонажа не меньше двух разных анимаций атак (их названия Attack1.png, Attack2.png...), то здесь указывается номер нужного изображения.</p>
12
<p>Вот как выглядит обычная атака у героя:</p>
12
<p>Вот как выглядит обычная атака у героя:</p>
13
<p>Тут нужно пояснить момент с damageInHTML. Эту функцию я прописывал отдельно, и нужно она для того чтобы в описании цифры урона подсвечивались определённым цветом, в зависимости от типа урона.</p>
13
<p>Тут нужно пояснить момент с damageInHTML. Эту функцию я прописывал отдельно, и нужно она для того чтобы в описании цифры урона подсвечивались определённым цветом, в зависимости от типа урона.</p>
14
<p>В свою очередь, в css есть соответствующие классы.</p>
14
<p>В свою очередь, в css есть соответствующие классы.</p>
15
<p>Вот теперь можно переходить к методам.</p>
15
<p>Вот теперь можно переходить к методам.</p>
16
<p><strong>dealDamage</strong>- Тут всё просто. В зависимости от типа мы высчитываем урон. Потом этот урон вычитаем у жизней противника, и получившееся число записываем в хитбар оппонента и всплывающую табличку.</p>
16
<p><strong>dealDamage</strong>- Тут всё просто. В зависимости от типа мы высчитываем урон. Потом этот урон вычитаем у жизней противника, и получившееся число записываем в хитбар оппонента и всплывающую табличку.</p>
17
<p><strong>addSkillToInteface</strong>это самое страшное, что вы сегодня увидите. Этот метод делает сразу две вещи - добавляет иконку умения в HTML код, и вешает на неё onclick.</p>
17
<p><strong>addSkillToInteface</strong>это самое страшное, что вы сегодня увидите. Этот метод делает сразу две вещи - добавляет иконку умения в HTML код, и вешает на неё onclick.</p>
18
<p><strong>idIcon</strong>и<strong>idDescription</strong>создают id для элементов из имени умения, и именно по этой причине название умения должно быть на английском. Далее эти элементы добавляются в DOM. Включаем элемент description при наведении мыши, а на onmouseout отключаем.</p>
18
<p><strong>idIcon</strong>и<strong>idDescription</strong>создают id для элементов из имени умения, и именно по этой причине название умения должно быть на английском. Далее эти элементы добавляются в DOM. Включаем элемент description при наведении мыши, а на onmouseout отключаем.</p>
19
<p>В<strong>icon.onclick</strong>мы прописываем логику при нажатии мыши. Тут я использовал кучу setTimeout, чтобы анимации, такие как бег, атака и бег обратно, шли друг за другом. При вызове некоторых методов терялся контекст, так что через bind я привязал контекст где только можно было, просто на всякий случай. Логику с таймаутами я писал до того как прошёл<a>курс по асинхронному программированию</a>, но т.к. это была самая тяжёлая для моего понимания тема, я не уверен что с помощью async/await можно будет решить эту проблему. В ближайшей время собираюсь попробовать переписать эту логику.</p>
19
<p>В<strong>icon.onclick</strong>мы прописываем логику при нажатии мыши. Тут я использовал кучу setTimeout, чтобы анимации, такие как бег, атака и бег обратно, шли друг за другом. При вызове некоторых методов терялся контекст, так что через bind я привязал контекст где только можно было, просто на всякий случай. Логику с таймаутами я писал до того как прошёл<a>курс по асинхронному программированию</a>, но т.к. это была самая тяжёлая для моего понимания тема, я не уверен что с помощью async/await можно будет решить эту проблему. В ближайшей время собираюсь попробовать переписать эту логику.</p>
20
<p>Что касается класса SkillEnemy, то как и в случае с классами персонажей, он не сильно отличается от SkillHero. Главное отличие заключается в том, что в методе addSkillToInteface, мы не прописываем логику при нажатии кнопки, т.к. враг автоматически совершает атаку сразу после нашей. Вместо этого мы создаём метод useSkill, в котором и описывается логика.</p>
20
<p>Что касается класса SkillEnemy, то как и в случае с классами персонажей, он не сильно отличается от SkillHero. Главное отличие заключается в том, что в методе addSkillToInteface, мы не прописываем логику при нажатии кнопки, т.к. враг автоматически совершает атаку сразу после нашей. Вместо этого мы создаём метод useSkill, в котором и описывается логика.</p>
21
<p>В этой и предыдущих постах я поверхностно описал как устроена игра на данный момент. Далее я буду рассказывать об изменениях и о том, что же я хочу получить в итоге.</p>
21
<p>В этой и предыдущих постах я поверхностно описал как устроена игра на данный момент. Далее я буду рассказывать об изменениях и о том, что же я хочу получить в итоге.</p>
22
<p>Код проекта на<a><strong>GitHub</strong></a>.</p>
22
<p>Код проекта на<a><strong>GitHub</strong></a>.</p>
23
<p>А здесь можно<a><strong>поиграть в текущую версию</strong></a>.</p>
23
<p>А здесь можно<a><strong>поиграть в текущую версию</strong></a>.</p>