losfer 30 мая 2016 в 11:32

Опыт разработки игры на Node.js и Angular.js

12 мин

26K

Разработка игр*Node.JS*Angular*

Из песочницы

+23

Комментарии 60

НЛО прилетело и опубликовало эту надпись здесь

losfer 31 мая 2016 в 08:51

Не совсем понял про АИ, если честно, если речь идёт об artificial intelligence, то его в FOTM попросту нет, бои идут только между игроками. Два клиента противников общаются между собой через socket сервер через socket.emit в пределах игровой комнаты. По поводу второго вопроса: если после определённого действия изменилось только состояние той команды, чей сейчас ход (например, после передвижения), тогда я отправляю на сервер только информацию о ней:

Client:

       mainSocket.emit("updateActiveTeam", $rootScope.currentBattle.room, $scope.myTeam.characters);

Server:

        socket.on('updateActiveTeam', function(room, chars) {
            socket.broadcast.to(room).emit('updateActiveTeamResult', chars);
        });

Если изменилась информация об обоих командах (например, после применения способности):

Client:

       mainSocket.emit("updateTeams", $rootScope.currentBattle.room, $scope.myTeam.characters, $scope.enemyTeam.characters);

Server:

        socket.on('updateTeams', function(room, chars1, chars2) {
            io.sockets.in(room).emit('updateTeamsResult', chars1, chars2);
        });

Amareis 31 мая 2016 в 09:29

У вас один игрок может изменять состояние второго игрока?.. А как вы это всё на сервере валидируете?

losfer 31 мая 2016 в 09:35

Не игрока конкретно, а состояние его персонажей во время боя. Персонажи — это фабрики, которые собираются перед началом боя из сущности в БД, где хранится только базовая информация. После боя инстансы естественно удаляются, сохраняется только информация о команде (изменение рейтинга и ресурсов). Сервер в данном случае работает как зеркало и просто кидает информацию о командах обратно игрокам. Со стороны каждого клиента есть хэндлеры на updateTeamsResult.

Amareis 31 мая 2016 в 09:41

О, то есть читерство через консоль, получается, неограничено? :)
Валидация на сервере, на самом деле, крайне важная часть архитектуры. В идеале это должно выглядеть как «игрок посылает своё действие, сервер его обрабатывает и рассылает диффы игрокам», причём доступные действия выглядят как «иду налево» или «атакую вверх», самой своей формулировкой отсекая заранее читерские варианты (иду на такую-то клетку, например). Понятно что у вас проект ни на что особое (пока) не претендует, но если вы хотите чтобы в него играли массово, озаботиться валидацией придётся, потому как по закону подлости всегда найдётся какая-нибудь злобная редиска, которая будет портить игру другим.

losfer 31 мая 2016 в 10:36

Да вот как раз проблема, то в том, что можно и на любую клетку ходить (с помощью спелов, например), и урон сильно варьируется. Слишком много условий для валидации. В дальнейшем просто введу uglify на продакшн и gulp'ом сошью всё в одну простыню, чтобы никто ничего не разобрал))

НЛО прилетело и опубликовало эту надпись здесь

losfer 31 мая 2016 в 10:55

Хорошо, попробую воспроизвести) Если получиться, тогда придётся все модели и БЛ переносить на backend, боюсь на это уйдёт не один месяц, да и нагрузка на сервер возрастёт в разы(

Amareis 31 мая 2016 в 11:00

Лучше webpack, серьёзно :)
Увы, всё что углифицировано, может быть бьютифицировано; это не говоря уж об упомянутом выше перехвате трафика. Поэтому я и описал верную схему, когда игрок посылает не новую диспозицию (которую, действительно, практически невозможно валидировать), а лишь своё действие, результаты которого вычисляются уже на сервере. Реализовать это, на самом деле, вовсе не сложно, особенно учитывая гомогенность приложения (везде js): просто границу клиент/сервер надо перенести, взвалив побольше ответственности на последний.

losfer 31 мая 2016 в 11:14

Дело в том, какое минимальное действие отправлять. Допустим, всем будет заниматься backend, на клиенте мы выбрали способность у персонажа и использовали на вражеском персонаже — минимальные данные (кто, способность уровня X, на кого). Но «X» всё равно можно хакнуть. Эту информацию просто невозможно отделить от клиента. Хоть в этом случае руки у редиски уже связаны посильнее…

НЛО прилетело и опубликовало эту надпись здесь

losfer 31 мая 2016 в 11:20

Да, действительно, это вариант, спасибо за идею!) Будем работать!

НЛО прилетело и опубликовало эту надпись здесь

ya-est 30 мая 2016 в 15:54

https://fotm.herokuapp.com/

Koril 30 мая 2016 в 18:26

у меня не работает, в консоль ошибки пишет, вроде с гугл аналитикой что-то

losfer 30 мая 2016 в 18:31

Спасибо за информацию, я проверю)

Koril 30 мая 2016 в 22:00

Проблема была в том, что uBlock блокировал гугл аналитику и еще что то, отключил — все заработало

losfer 30 мая 2016 в 18:31

Как вы её нашли?))

Ti_Fix 31 мая 2016 в 09:55

Win 7, Chrome, черный экран…

Koril 31 мая 2016 в 11:57

если есть блокировка рекламы, то попробуй отключить, мне помогло

Oslegg 31 мая 2016 в 13:37

работает только с отключеным адблоком хотя рекламы там нету

losfer 31 мая 2016 в 13:39

Скорее всего ADBlock'у не нравится url сайта, но за скрины или ошибки в консоли буду благодарен)

Koril 31 мая 2016 в 14:30

http://joxi.ru/a2XVKX6iMDaqrg
пожалуйста)

Oslegg 31 мая 2016 в 16:47

есть гитхаб? открою issue :)

Oslegg 31 мая 2016 в 16:49

Github нашёл, issue запостил :)

losfer 31 мая 2016 в 22:27

Да, увидел, посмотрю)

losfer 31 мая 2016 в 13:38

Что-то есть страшное в консоли?

НЛО прилетело и опубликовало эту надпись здесь

losfer 31 мая 2016 в 11:54

Насколько я помню это ошибка при вводе неправильных данных (логина или пароля)…

НЛО прилетело и опубликовало эту надпись здесь

losfer 31 мая 2016 в 13:23

На самом деле я просто игрался с angular.js валидацией, а потом так и оставил)

GaryAnikin 30 мая 2016 в 18:26

github.com/losferwords/FOTM

ya-est 30 мая 2016 в 16:07

Особое внимание необходимо уделить руководству к игре, его можно найти здесь https://vk.com/fotm_game

losfer 30 мая 2016 в 18:32

Согласен, руководство надо ещё полировать. Для тех же, кому лень читать мануалы, я в скором времени кину ссылку на Quick Start Guide по игре)

Firehanded 30 мая 2016 в 18:27

Хотелось бы больше технических подробностей.

losfer 30 мая 2016 в 18:34

В дальнейшем планирую написать ряд статей по техническим аспектам игры. Как и с помощью чего было реализовано. Здесь всё-таки хотелось рассказать именно о творческой стороне вопроса.

S3Ga 30 мая 2016 в 18:27

Выглядит хорошо. Хотелось бы посмотреть на кусочки кода, или хотя бы алгоритмы.

Drim 30 мая 2016 в 18:28

Зашел в игру, очень долго ждал соперника, так никто и не появился. Хоть онлайн был 2-3 человека.
Как для одного программиста игра очень даже прикольная.
Интересно, планируется ли переход на Ангуляр 2?

losfer 30 мая 2016 в 18:35

Скорее всего все просто настраивали команды перед боем. На данный момент нет возможности посмотреть игроков в очереди на арену. Переход на Angular 2 пока не планирую, так как подозреваю большой фронт работ. А тут и так много чего ещё допиливать)

evilandfox 31 мая 2016 в 01:00

Круто, что был проделан весь путь изучения веб технологий ради создания игры) Кстати не рассматривали meteor js? Делал на нем простенькую онлайн игру, очень удобно в плане общения сервера и клиента, mongo и angular «из коробки»

losfer 31 мая 2016 в 09:16

Да, это был очень непростой, но интересный путь. На meteor я наткнулся уже позже, во время создания. Изучение нового framework'а отняло бы часть времени, которое хотелось потратить на имплементации нового функционала. В самом начале я смотрел в сторону MEAN stack, но потом решил использовать те же инструменты по-старинке)

Morphine43 31 мая 2016 в 08:35

на мой взгляд, не хватает чатика

losfer 31 мая 2016 в 08:35

Полностью согласен, чат есть в планах, в скором времени постараюсь заимплементить…

НЛО прилетело и опубликовало эту надпись здесь

losfer 31 мая 2016 в 09:06

Спасибо за развёрнутый комментарий)
В целом я думаю, что ты прав, разобраться с наката не получится. На добавление системы левелинга аля HS уйдёт не мало времени. Пока же я планирую выпустить серию обучающих видео с нюансами тактики и механики классов. А по поводу казуалов — им и так есть во что поиграть, мне же хотелось сделать игру похардкорней)

Amareis 31 мая 2016 в 08:51

losfer, рекомендую прикрутить социальный логин, хотя бы по тому же гмейлу.

losfer 31 мая 2016 в 08:55

О таком я пока не думал, подозреваю кучу проблем с интегрированием VK API на Express.js. Тем более касательно приколюх с выкидыванием такого же игрока из сессии…

Amareis 31 мая 2016 в 09:25

Раз у вас всё завязано на почте, лучше использовать почтовые сервисы, как упомянутый мною gmail. В таком случае никаких особых проблем тут не наблюдается — нажал на кнопку, подтвердил у гугла, если это первый вход — ввёл свой ник (с существующей уже валидацией) иначе просто сразу входишь. Со стороны сервера нужно только на каждый вход через кнопку сделать один запрос к гугл апи вида «у пользователя с вот таким токеном действительно вот такая почта?».

losfer 31 мая 2016 в 09:30

На самом деле

Заголовок спойлера

к почте ничего не привязано =), просто идёт проверка на то, что такой e-mail уже есть.

Спасибо за совет, видео issue на гите, буду копать ;)

goooseman 31 мая 2016 в 11:45

Подключается http://passportjs.org
Эта библиотека для аутентификации, к которой с помощью модулей подключаются всевозможное способы входа

wolframskazo4nik 31 мая 2016 в 09:57

Спасибо за толковую статью!
Если действительно будет цикл статей по техническим аспектам, то с радостью прочту.

monrostar 31 мая 2016 в 14:17

У меня прям крылья выросли как прочел. Как раз сейчас только встаю на эту трапу — разработки игр (давняя мечта). Буду ждать обновлений, если будут, ну и по-рублюсь в игруху:)

losfer 31 мая 2016 в 14:29

Спасибо) Очень приятно слышать, что кого-то данная статья замотивирует на начало разработки своего проекта) Welcome to FOTM \m/

sepo 31 мая 2016 в 22:26

Иконки скилов крутые. Сами рисовали?

losfer 31 мая 2016 в 22:27

Нет, иконки все free, брал с сайта http://game-icons.net/

denqa 1 июн 2016 в 21:58

Случайно обнаружил баг: первоначально вписал ник «qwe», создавая второго персонажа. Ответом было сообщение, что данный ник уже занят. После чего я просто переписал его, но кнопка создания персонажа уже не работала:
i.imgur.com/3i5f4sz.png