Checkers Online — многопользовательская сетевая игра в шашки. Пока это ранняя демо версия, а новая версия CheckerWars находится в разработке. Работоспособность и визуальное оформление в целом уже приемлемы.
На данный момент игра оптимизирована только для мобильных устройств. Тестировалась на Chrome и Firefox (Android). На IOS работоспособность не проверялась. На текущий момент игра реализована в формате приложения PWA. Имеется возможность запуска прямо в браузере, так и его установки как веб приложения на главный экран.
Веб-приложение PWA
Для установки как приложение выберете в меню браузера «Добавить на гл. экран (Chrome)» или «На домашний экран (Firefox)»
Сразу хотим добавить, что намного более совершенным в техническом плане и ориентированным на реальный продукт пока будет другой проект — Messenger. Он по сути является продолжением разработки шашек, но сама игра еще не была закончена, а сделана лишь платформа для нее. Подробнее о Messenger можно найти здесь:
Checkers Online
Стоит отметить, что вся логика проверки допустимости ходов и отрисовка игрового стола полностью реализованы мной без использования каких либо примеров из других игр. Была поставлена цель полностью, с нуля, разработать всю логику самостоятельно. На текущий момент есть ряд ограничений и багов, которые в рабочем порядке будут устранены в следующих версиях.
Разработка непосредственно бота для просчета ходов пока не в приоритете, и для будущей реализации игры с компьютером хочу найти готовую реализацию игрового бота.
Некоторые особенности реализации и оформления проекта:
- Интерфейс сделан на Vue.js, Quasar
- Игровая логика и отрисовка стола написаны на чистом Javascript
- Игровой стол полностью отрисовывается на Canvas векторно, без использования спрайтов. Возможны его динамическое масштабирование, изменение оформления, а так же изменение количества клеток игрового поля
- Для сетевого обмена в реальном времени используется библиотека Socket.io
- Приложение оформлено как PWA (Progressive Web Application)
- Сервер работает на Node.js
- На сервере используется фреймворк Express.js
- В качестве базы данных используется SQLite
- Все упаковано в Docker
- Есть режим development и production
- Docker образы настроены на работу в сети Traefik
- Клиент, сервер находятся в отдельных Git репозиториях
- Документация, в том числе эта статья
Список основных реализованных функций:
- Регистрация и авторизация пользователей, список пользователей
- Профиль пользователя с редактированием полей, аватаркой
- Подписка, добавление в друзья, список друзей
- Создание новой игры, просмотр списка игр всех, своих, и т.д
- Присоединение к игре с уведомлениями, подтверждением (по сокетам)
- Сохранение состояния игры в базу: состояние поля, очки, количество ходов, взятые фигуры, и т.д
- Окончание игры в момент, когда фигуры у одного игрока закончились, экран итогов
- Мессенджер. Список контактов. Возможность написать любому пользователю нажав кнопку в профиле
- История сообщений в чате
- Множество других мелочей
Примечание:
В качестве демо данных пользователей были позаимствованы имена и изображения из популярной игры Genshin Impact. В релизной версии изображение аватара будет загружаться пользователями самостоятельно. Загрузка своего аватара в этой версии игры не предусмотрена (но реализовано в Messenger).
Обзор основных функций
Давайте наконец приступим к детальному обзору игры Checkers Online.
При первом заходе в приложение необходимо ввести свой логин и пароль:
Если пользователь еще не зарегистрирован, то внизу страницы есть кнопка «Регистрация«, которая ведет на соответствующую страницу:
Процесс регистрации состоит из двух этапов:
- Форма ввода имени пользователя (логин)
- Форма ввода пароля. Причем ввод пароля можно пропустить, тем самым создав временный аккаунт:
Такой подход позволит максимально упростить доступ для новых пользователей, тем самым повысив посещаемость сервиса. А в целях борьбы с злоупотреблениями временные аккаунты могут быть ограничены в некоторых правах, например можно запретить таким пользователями писать в чат, и т.п.
Все формы в приложении выполнены с использованием компонентов Quasar Framework и поддерживают валидацию вводимых данных.
Когда вход будет успешно выполнен, вы попадете на приветственный экран:
Здесь вы увидите изображение игрового стола, а так же меню из четырех пунктов:
- Найти игру
- Создать игру
- Пользователи
- Правила игры
В левом верхнем углу находится кнопка главного меню, при нажатии на которую откроется боковое меню приложения:
Здесь есть следующие пункты:
- Профиль пользователя
- Создать игру
- Мои игры
- Друзья
- Мессенджер
- Правила игры
- Сообщить об ошибке
- О программе
- CheckerWars
Меню приветственного экрана
Найти игру — доступ к странице Доступные игры, где отображается список игр, созданных другими пользователями и доступных в данный момент (в ожидании):
В нижнем меню пункт История ведет на список всех завершенных другими пользователями игр.
Создать игру — здесь расположена форма создания новой игры:
Кроме того, если найти свою созданную игру в списке, будет возможность ее отредактировать.
- Выбор типа игры: на текущий момент можно выбрать Русские шашки (64 клетки) и Международные шашки (100 клеток). В будущем я планирую добавить больше видов игр, и даже возможно, самостоятельную настройку параметров игры.
- Выбор команды: Белые или Черные — при создании игры у вас есть возможность выбрать, за какие фигуры вы будете играть. В будущем обязательно будет добавлена возможность случайного выбора команды в момент начала игры, и возможно, некоторые другие режимы.
- Описание: можно указать небольшой приветственный текст, который будут видеть другие игроки при поиске игр.
- Создать: кнопка создает новую игру и переадресует на страницу ожидания подключения другого игрока:
Если уйти с экрана ожидания, подключение другого игрока к игре все еще возможно до тех пор, пока приложение открыто. В будущем будут добавлены Push уведомления. А так же, в планах есть добавить критерии поиска, выбора игр и игроков, например по месту жительства, возрасту, и другим параметрам, возможность пригласить другого пользователя к себе в игру, и т.п.
Пользователи — список всех активных пользователей:
Каждый пользователь в списке представлен отдельной карточкой, которая содержит основную информацию о пользователе:
- Аватар
- Логин
- Имя и фамилия
При клике на карточку пользователя произойдет переход на страницу его профиля.
Правила игры:
Главное меню
Мои игры — на этой странице есть три вкладки:
1. Активные — начатые и не законченные игры:
Здесь для каждой игры отображается карточка с основной информацией:
- Аватары обоих соперников
- Логины соперников
- Имя команды (белые, черные)
- Время создания игры
- Приветственный текст
2. В ожидании — новые созданные вами игры, в которые пока никто не играл:
3. История — все сыгранные вами игры:
Мои друзья — на этой странице так же есть три вкладки:
1. Мои друзья:
Помимо основной информации, на карточке так же имеется кнопка для быстрого удаления пользователя из друзей, без необходимости заходить в профиль.
2. Мои подписки:
3. Мои подписчики: в данном случае список пуст:
Мессенджер:
- Список контактов:
Каждый контакт представлен отдельной карточкой, в которой отображается следующая информация о собеседнике:
- Аватар
- Логин
- Текст последнего сообщения в переписке
- Дата последнего сообщения
- Чат:
Основные моменты:
- В заголовке экрана чата отображается имя собеседника
- Каждое сообщение содержит аватар, логин, текст сообщения, и его дату
- Сообщения собеседника отображаются слева
- Внизу располагается поле для ввода сообщения и кнопка отправки.
- Чат, так же как и сама игра, работает на библиотеке Socket.io, что дает пользователям возможность обмениваться сообщениями в реальном времени.
О программе:
Профиль пользователя
Ниже показан профиль от лица владельца страницы:
Профиль пользователя содержит следующие элементы:
- Аватар
- Логин
- Имя, фамилия
- Дата рождения
- Пол
- Страна, город
- О себе
- Аккаунт
Каждый из элементов профиля владельца страницы ведет на страницу, где можно изменить соответствующие данные.
Так же приведу вид профиля от лица гостя страницы:
Главное отличие — кнопка добавления в друзья (подписка), и кнопка отправки личного сообщения пользователю. Так же отсутствует возможность редактировать пункты профиля и нет ссылки на настройки аккаунта.
Подтверждение добавления пользователя в друзья:
Теперь рассмотрим каждый пункт отдельно.
- Аватар:
На странице приведена коллекция аватаров персонажей из игры Genshin Impact. При клике на персонажа происходит установка изображения в качестве аватара пользователя, а затем переадресация на страницу его профиля. Заранее подготовленные изображения используются в целях упрощения приложения на стадии прототипа. В будущих версиях будет реализована возможность выбора своего произвольного изображения (уже реализовано в моем приложении Messenger).
- Логин:
- Имя, фамилия:
- День рождения:
- Пол:
- Страна, город:
- О себе:
Настройки аккаунта
На странице имеются следующие активные пункты:
- Email, а так же метка подтверждения почты
- Пароль
- Выйти из аккаунта
А так же отображается основная информация о пользователе:
- Дата создания аккаунта
- Дата редактирования аккаунта
- Номер пользователя
- Email:
- Пароль:
- Подтверждение выхода из аккаунта:
Игра
Что бы начать новую игру, необходимо либо создать свою игру и дождаться, пока другой пользователь не предложит вам сыграть с ним, либо самому найти подходящую игру в списке доступных игр. Создание новой игры мы уже рассмотрели ранее. Теперь же, будем присоединяться к уже созданной ранее другим пользователем игре. Находим в списке Доступные игры подходящую, и переходим в нее. Там мы увидим приветственный экран игры, где можем уже непосредственно предложить создателю игры сыграть с нами:
При нажатии на кнопку ИГРАТЬ появится подтверждение:
У вашего соперника в момент нажатия на кнопку ИГРАТЬ на экране появится уведомление о том, что вы желаете с ним сыграть. Он может принять ваше предложение, но так же и отказать:
В случае отказа пользователю придет соответствующее уведомление. Однако, когда оба пользователя согласны играть друг с другом, происходит автоматический переход на игровой экран.
Игровой процесс
В верхней части экрана располагается табло соперников, на котором отображается основная информация об игроках и ходе игры:
- Аватары пользователей
- Цвет фигур (фон табличек)
- Имя пользователя
- Общее время в игре
- Количество очков (взятых фигур)
- Визуализация взятых фигур, причем я так же реализовал отображение дамок (маленькие точки в центре фигур)
- Кроме того, время игрока, чей ход ожидается в данный момент, подсвечивается красным цветом
В центре экрана находится игровой стол — квадратное поле 8х8 или 10х10 (в зависимости от типа игры). По периметру стола размечены координаты клеток. В будущем мы планируем реализовать настройку внешнего вида стола: изменение цветов (а когда-нибудь даже менеджмент тем), и отключение рамки с обозначениями координат.
В игре реализована подсветка выбранной игроком клетки желтым цветом, а так же зеленым цветом помечаются все разрешенные ходы. Ход возможно совершить только своей фигурой и только на разрешенные клетки. Так же реализована плавная анимация хода фигур. Игра в процессе:
Когда фигура доходит до противоположного края доски, она автоматически преобразуется в дамку, а алгоритм ее ходов меняется в соответствии с правилами игры. На скриншоте ниже можно увидеть точки в центре некоторых фигур на карточках игроков — взятые дамки:
В нижней части игрового экрана располагается чат — пользователи во время игры могут общаться между собой в реальном времени. Так же реализована возможность наблюдать за игрой для сторонних пользователей. В будущем планируется реализовать широкие возможности для настройки приватности игры и чата.
В конце игры соперникам будет показано соответствующее уведомление:
Так же, между игровым столом и чатом есть панель меню. В ней есть три вкладки:
- Чат (по умолчанию)
- Ходы — история всех совершенных ходов
- Меню:
В меню пока реализованы лишь базовые функции:
- Предложить ничью:
- Сдаться. Причем, при сдаче реализована возможность отправить сообщение:
И сопернику придет уведомление с текстом сообщения:
При любом исходе игры (победа, поражение, ничья, сдался) обоим соперникам будет показан экран итогов игры:
Здесь мы видим основные характеристики завершенной игры:
- Команда игрока (белые, черные)
- Аватар
- Никнейм
- Статус игры (победитель, проигравший, ничья, сдался)
- Счет (количество взятых фигур)
- Количество ходов
- Время создания игры
- Время завершения игры
- Текст приветствия (добавляется при создании игры)
- Идентификатор игры (порядковый номер на сервере)
- Кнопка выхода с экрана итогов игры (перенаправит на приветственный экран)
Кроме обычных, всем знакомых шашек на столе из 64 клеток (Русские шашки), так же есть возможность сыграть в Международные шашки — игра проходит на игровом столе в 100 клеток:
Этот режим игры был добавлен в последний момент, и пока носит статус экспериментальной функции. Игра была успешно протестирована, но имеется проблема с отображением обозначений координат на игровом столе. Так происходит, потому что стол полностью отрисовывается векторно на Canvas, что дает возможность создавать игровой стол любой размерности. Но алгоритм выравнивания символов пока не вполне корректный, в будущем я это исправлю.
Заключение
В этом обзоре я постарался подробно рассмотреть все основные функции моего приложения Checkers Online.
В будущем планируется публикация в магазины приложений, а так же создание полноценной браузерной версии для ПК, и других устройств.
Наша цель — сделать достойную версию всем известной игры, войти в топ 10 шашек онлайн в магазинах приложений, и в конечном итоге, получить успешный онлайн сервис.
Веб-приложение PWA
Для установки как приложение выберете в меню браузера «Добавить на гл. экран (Chrome)» или «На домашний экран (Firefox)»
Еще раз хотим напомнить, что у нас есть намного более совершенное в техническом плане приложение — Messenger. Он разрабатывался как следующая версия шашек — CheckerWars, но на текущий момент функционал самой игры находится в разработке. Подробную информацию можно найти здесь:
Если вам интересен наш проект, есть вопросы, замечания, или предложения — оставляйте комментарии или пишите на почту: checkerwars@mail.ru
Кроме того, автор проекта ищет работу. Мое резюме.