0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p><em><a>Как я начал писать игру на JS</a></em></p>
1
<p><em><a>Как я начал писать игру на JS</a></em></p>
2
<p><em><a>Игра на JS. Часть 2</a></em></p>
2
<p><em><a>Игра на JS. Часть 2</a></em></p>
3
<p>Сегодня расскажу о том, как устроены классы Hero и Enemy.</p>
3
<p>Сегодня расскажу о том, как устроены классы Hero и Enemy.</p>
4
<p>Сразу бросается в глаза, что конструктор у класса слишком длинный, и это действительно довольно неудобно, но я пока не придумал, как грамотно уменьшить количество параметров. Скорее всего эта строчка в ближайшее время будет становиться всё длиннее, несмотря на возмущения линтера. Описывать каждый параметр смысла не имеет, лучше я покажу их применение в методах класса.</p>
4
<p>Сразу бросается в глаза, что конструктор у класса слишком длинный, и это действительно довольно неудобно, но я пока не придумал, как грамотно уменьшить количество параметров. Скорее всего эта строчка в ближайшее время будет становиться всё длиннее, несмотря на возмущения линтера. Описывать каждый параметр смысла не имеет, лучше я покажу их применение в методах класса.</p>
5
<p><strong>drawHero</strong>нужен для задания размеров контейнера персонажа и отображения здоровья и брони.</p>
5
<p><strong>drawHero</strong>нужен для задания размеров контейнера персонажа и отображения здоровья и брони.</p>
6
<p>Эти методы нужны для того, чтобы блокировать интерфейс игрока во время хода противника, и, соответственно, "оживлять" интерфейс после.</p>
6
<p>Эти методы нужны для того, чтобы блокировать интерфейс игрока во время хода противника, и, соответственно, "оживлять" интерфейс после.</p>
7
<p><strong>animateIdle</strong>создаёт анимацию персонажа во время покоя. Изначально у нас есть картинка с несколькими спрайтами, через определённый промежуток времени мы сдвигаем картинку так, чтобы в фокусе оказался следующий спрайт. Как только мы дошли до конца картинки, то возвращаемся к исходной позиции и повторяем всё вновь.</p>
7
<p><strong>animateIdle</strong>создаёт анимацию персонажа во время покоя. Изначально у нас есть картинка с несколькими спрайтами, через определённый промежуток времени мы сдвигаем картинку так, чтобы в фокусе оказался следующий спрайт. Как только мы дошли до конца картинки, то возвращаемся к исходной позиции и повторяем всё вновь.</p>
8
<p><strong>stopAnimationIdle</strong>прерывает анимацию покоя.</p>
8
<p><strong>stopAnimationIdle</strong>прерывает анимацию покоя.</p>
9
<p>Анимации атаки, получения урона и смерти персонажа почти ничем не отличаются от анимации покоя. В них мы вызываем clearInterval после того, как проходимся по всем спрайтам.</p>
9
<p>Анимации атаки, получения урона и смерти персонажа почти ничем не отличаются от анимации покоя. В них мы вызываем clearInterval после того, как проходимся по всем спрайтам.</p>
10
<p><strong>animateRun</strong>помимо анимации бега, сдвигает контейнер персонажа, поэтому тут добавляется переменная translateTick, в которой есть такая математическая операция (100 / 2). Пример того, как не надо писать код. Мне пришлось изрядно напрячься, чтобы вспомнить, что 50 это 50vw, т.е. половина экрана - место докуда добегает персонаж. "Половину экрана" мы делим на количество спрайтов анимации бега, которое нам пришлось указать в конструкторе, и в итоге персонаж "пробегает" все спрайты к концу своего забега.</p>
10
<p><strong>animateRun</strong>помимо анимации бега, сдвигает контейнер персонажа, поэтому тут добавляется переменная translateTick, в которой есть такая математическая операция (100 / 2). Пример того, как не надо писать код. Мне пришлось изрядно напрячься, чтобы вспомнить, что 50 это 50vw, т.е. половина экрана - место докуда добегает персонаж. "Половину экрана" мы делим на количество спрайтов анимации бега, которое нам пришлось указать в конструкторе, и в итоге персонаж "пробегает" все спрайты к концу своего забега.</p>
11
<p><strong>animateRunBack</strong>бег в обратную сторону. Тут лишь меняем начальные координаты контейнера и изменяем их в обратную сторону.</p>
11
<p><strong>animateRunBack</strong>бег в обратную сторону. Тут лишь меняем начальные координаты контейнера и изменяем их в обратную сторону.</p>
12
<p><strong>animateHitBar</strong>вызывает css анимацию нанесённых повреждений при получении урона. Здесь я использовал css анимацию, т.к. хотел чтобы контейнер с уроном исчезал постепенно, и другого способа придумать не смог.</p>
12
<p><strong>animateHitBar</strong>вызывает css анимацию нанесённых повреждений при получении урона. Здесь я использовал css анимацию, т.к. хотел чтобы контейнер с уроном исчезал постепенно, и другого способа придумать не смог.</p>
13
<p>Класс Enemy принципиально ничем не отличается от Hero, поэтому смысла рассматривать его отдельно нет.</p>
13
<p>Класс Enemy принципиально ничем не отличается от Hero, поэтому смысла рассматривать его отдельно нет.</p>
14
<p>Получилось очень поверхностно описать классы и всё что происходит в методах, но если у кого-то возникли вопросы, то вы всегда можете задать их в комментариях, и я с удовольствием вам отвечу.</p>
14
<p>Получилось очень поверхностно описать классы и всё что происходит в методах, но если у кого-то возникли вопросы, то вы всегда можете задать их в комментариях, и я с удовольствием вам отвечу.</p>
15
<p>Код проекта на<a>GitHub</a>.</p>
15
<p>Код проекта на<a>GitHub</a>.</p>
16
<p>А здесь можно поиграть в<a>текущую версию</a>.</p>
16
<p>А здесь можно поиграть в<a>текущую версию</a>.</p>