Создать многопользовательскую игру с помощью React Hooks сложно

Ранее я упоминал, что перенес большую часть внутренней логики во внешний интерфейс, и часть этого кода использовала recursivesetTimeout для выполнения движений и атак юнитов. Я сказал, что переделаю setTimeout в React.useEffect хук. Ну, я сделал, и результат менее чем великолепен.

С точки зрения разработчика код намного чище и проще для понимания, чем предыдущий рекурсивный setTimeout, но с точки зрения игрока это разочаровало. Производительность значительно упала до такой степени, что я мог видеть частоту кадров из-за задержки.

- до:

- после:

Я попробовал несколько улучшений производительности, которые обычно помогают во всех веб-приложениях, которые я создал ранее, включая многопользовательскую пошаговую игру. Это называется ZombearsAttack, если вы хотите играть с друзьями, но для каждого раунда требуется группа из 5 игроков+.

Например, я реализую React.useCallback для тяжелых вычислений, а затем только передаю функциональную переменную в массив зависимостей React.useEffect для вызова, что помогает с кэшированием, но все еще не играет в кости.

Обычно мы не слишком беспокоимся о повторных рендерах, поскольку это относительно дешево, но с этим слишком много повторных рендеров. Честно говоря, в этой игре гораздо больше движущихся частей, чем в типичном веб-приложении.

Несмотря на это, я полон решимости сделать эту работу, поэтому я купил курс, чтобы узнать больше о расширенной отладке производительности React, который стоит -600 долларов 😭 , но я также трачу больше на еду на вынос в месяц, так что я не особо жалуюсь.

Подводя итог, я очень предпочитаю этот способ использования побочных эффектов для перемещения юнитов, а не рекурсивный setTimeout, но, к сожалению, мне придется пока отложить это, поскольку я узнаю больше из этого курса.

Конечно, я не развернул эту версию приложения, учитывая состояние, в котором оно находится, но на этой неделе я развернул другую версию приложения, в которой я исправил ошибку, из-за которой игрок время от времени не мог написать последнюю закрывающую цитату, чтобы создать новый блок. Это было чертовски сложно, поскольку сама ошибка, по-видимому, не имела ничего общего с вводом этой последней закрывающей цитаты. Подробнее об этом в следующей статье!

Идея приложения WaddleWaddle состоит в том, чтобы воплотить в себе комбинацию комплексных обучающих платформ, таких как Codecademy, и старых добрых видеоигр, которые развлекают вас и заставляют хотеть делать больше.

Мне всегда нравились стратегические игры, когда мне было четыре года, а совсем недавно я действительно весело провел время, играя в Clash Royale, поэтому я соединяю эти две очень разные системы вместе, чтобы максимально дополнить друг друга, чтобы дать вам совершенно новые знания. опыт.

Цель:
– Сделать изучение кода менее пугающим и более приятным, интересным и доступным.
– Повысить осведомленность о том, что каждый, кто хочет стать инженером-программистом, может им стать.
- Сделать уроки более доступными для большего количества людей.

Мы открываем наш прототип для публики для раннего альфа-доступа! Приглашайте друзей и изучайте JavaScript невиданным ранее способом!
waddlegame.com

Я занимаюсь репетиторством по JavaScript в первый понедельник каждого месяца на Meetup

Также мы будем вести прямые трансляции событий на YouTube и Twitch.

Присоединяйтесь к нашему сообществу Discord, я всегда рад поболтать о коде!

Я буду вести блог о технических проблемах, допущенных ошибках и уроках, извлеченных при создании приложения WaddleWaddle. Следуйте за мной здесь, если это путешествие, о котором вы хотели бы прочитать!

"