Как мы создавали стрим-игру «Карточки-онлайн», которая стала популярной за 1 месяц
Привет! На связи веб-студия ICONICA, и в этом кейсе расскажем, как мы разрабатывали сначала приложение для простой игры с друзьями, а затем превратили его в стрим-игру с прямыми эфирами.
Немножко о нас
Делаем разработку веб и мобильных приложений, создаем легко управляемые сервисы, повышая масштабируемость и улучшая общую производительность системы.
Немножко о заказчике
Разработку онлайн игры заказал Александр Алымов, популярный юморист, игрок КВН, один из создателей юмористического шоу «Студия Союз». Он является регулярным гостем и активным участником «Comedy Club».
Александр Алымов обратился к разработчикам ICONICA через одного из партнеров. У него была идея – от нас требовалась качественная реализация.
Договорились о сотрудничестве. Начали разработку. Александр даже пригласил наших бэкенд разработчиков на свой концерт в Калининграде, подарил билеты. Денис (руководитель студии) и Антон (специалист по ключевым клиентам) посетили концерт и провели отличный день в Калининграде. За это отдельное спасибо Александру – было очень круто!
Все начинается с идеи
Изначально Карточки задумывались как мобильное приложение для игры с друзьями. Правила проще некуда – участники должны придумывать слова на определенную тему, а затем сравнивать ответы – совпадают ли они с вариантами соперников или нет.
Но Александр Алымов решил расширить функционал игры и вывести ее на другой уровень, более массовый. В результате поступил запрос на доработку, и мы выпустили онлайн-версию, где можно играть и проводить прямые эфиры.
В чем суть игры «Карточки онлайн»
- Оптимальное количество игроков – 4, но можно больше.
- Для старта нужно авторизоваться через ВК или написать в приложении имя.
- Жмите Создать новую игру и выбирайте настройки: время на раздумья, совпадения/несовпадения, количество раундов. .
- На экране увидите номер вашей игровой комнаты, который нужно сообщить всем участникам игры.
- Игроки должны авторизоваться, ввести номер комнаты и нажать кнопку Присоединиться.
- Когда все участники присоединяться к игре, жмем Начать. Например, в первом раунде тема «Элементы таблицы Менделеева». Задача игроков – написать 6 слов на эту тему. Если формат игры «совпадения», значит нужно выбрать 6 наиболее популярных и очевидных слов в этой тематике, чтобы с другими игроками было как можно больше совпадений. За каждое совпадение – 1 балл.
- Как только все игроки отправят свои ответы, можно переходить к этапу проверки. Ведущий выбирает одно из шести слов и показывает его игрокам. Если его нет в списке игрока, тот нажимает «Отклонить».
- Таким образом перерабатываются все слова, а в конце раунда подводятся итоги – подсчитывается количество совпадений и баллов.
Вот видео-инструкция, где все подробно и наглядно показано-рассказано – жмите здесь.
Технологии, которые использовали
Фронтенд
Админку мобильного приложения создавали с помощью JavaScript-библиотеки React. У этого инструмента самая большая доля на рынке и множество готовых модулей. Идеальное решение для написания фронтенда админ-панелей.
Бэкенд
Готовые CMS конечно же не использовали – такие проекты они не тянут. Взяли не слишком тяжелый фреймворк Django REST, известный своей надежностью. Среди плюсов данного решения хочется отметить высокую скорость разработки и возможность масштабировать игру под любое количество пользователей.
База данных
Отдали предпочтение PostgreSQL, как одной из наиболее популярных систем управления базами данных. Преимущества данного решения – масштабируемость, кроссплатформенность, безопасность.
Интерфейс
Мы отрисовали главную приветственную страничку, сделав ее дизайн максимально простым. Было принято решение, не грузить пользователя большим количеством деталей или кнопок, сосредоточив внимание на самом главном.
Что в итоге?
Команда проекта:
Антон Мишанин
Артем Касьян
Артем Горшков
Ссылочки:
Можете тут посмотреть и поиграть в Карточки, получите массу удовольствия!
Урааа! Мы закончили)
И обязательно подпишитесь на наш телеграм-канал - там мы рассказываем о других проектах и технологиях, которые используем.
Отличная статья про супер-игру !
Так мы повысим уровень знаний русско-язычных игроков по всему миру !
Россия, Украина, Белоруссия - вперёд !
Здравствуйте! После Блока "Представьтесь" кнопка "Присоединиться к игре" не срабатывает (ни в Хроме, ни в Яндексе). Что можно сделать чтобы заработало?)
Здравствуйте! Подскажите, пожалуйста, у Вас есть номер комнаты, к которой Вы хотите присоединиться? Без этого номера кнопка Присоединиться к игре - работать не будет. Если нет номера комнаты, Вы можете создать Новую комнату для игры, ей будет присвоен номер, и вы сможете сообщить его другим участникам игры.
Спасибо! Очень незаметная кнопка, особенно на телефоне))) Было бы классно добавить в описательный текст коротко что какая кнопка значит, или ссылку на правила..
Я комнату создала, но теперь не срабатывает черная кнопка "Начать игру". Что теперь надо сделать?)
Мне уже из принципа интересно сыграть хоть раз))
Для игры нужен как минимум еще один игрок, тогда можно будет Начать игру. Тот, кто создал комнату, - Ведущий. Ведущий выбирает, какое слово Разыграть. Он отправляет выбранное слово, и другие игроки либо подтверждают, либо отклоняют его. Ведущий отправляет слово и другие игроки, если у них есть такие же карточки, выбирают их и также отправляют, нажав соответствующую кнопку.
Кстати, я добавилась к вам в комнату, можете мне написать в тг - @marinadrem, выберем время, когда поиграть, если хотите)) Это очень весело