стек технологий, стоящий за Graceless.city
React может быть хорошим выбором для создания веб-игры, особенно для пошаговой или настольной. Его декларативный подход идеально подходит для таких игр.
Нам удалось создать простую игру под названием graceless.city за несколько дней, загрузив реагирующий клиент с помощью response-create-app и используя socket.io с node.js на сервере. Идея довольно проста, она состоит из пошаговой игры, в которой все игроки должны сделать свой ход в течение 5 секунд. Каждый ход позиции игроков обновляются, и игроки могут сделать следующий ход.
Вы можете попробовать игру здесь.
Вы можете посмотреть исходный код здесь.
Сервер с node.js и socket.io
Работа с socket.io действительно доставляет удовольствие: с помощью нескольких строк кода вы готовы общаться с клиентами в реальном времени.
Сервер ведет список подключенных игроков и слушает предстоящие сообщения. Игроки, нанесенные на сетку, отправляют свой следующий ход через канал. Сервер каждые 5 секунд обновляет позиции всех игроков и транслирует их клиентам.
Еще один инструмент, который мы хотели бы предложить, - это артиллерия, которая упрощает стресс-тестирование среды socket.io.
Клиент с React
Приложение Create React можно установить с помощью npm, и оно отлично подходит для начальной загрузки приложения React без конфигурации. Package.json будет содержать только одну зависимость и несколько скриптов. Он позаботится о Babel, ESLint и webpack.
Когда пользователь присоединяется к игре через веб-приложение, мы открываем соединение через сокет и каждые 5 секунд получаем уведомления об обновленных позициях игроков. Мы используем leaflet.js вместе с React, чтобы размещать игроков на карте. Каждый раз, когда мы получаем новые данные, устанавливая состояние, мы заставляем React повторно визуализировать игроков в сетке, чтобы они могли сделать еще один ход.
Вывод
Нам было очень весело, разрабатывая graceless.city! У нас был первый прототип, работающий за очень короткое время, который может обрабатывать много одновременных игроков. Декларативный подход React позволяет легко рассуждать о настольной игре. Socket.io обеспечивает связь в реальном времени быстрым и надежным способом, сохраняя при этом чистый и простой код.
