Как я делал realtime рулетку на NodeJS & VueJS
Привет друзья, хочу поведать вам, одну очень выдающуюся историю о том как я делал онлайн рулетку для одного западного заказчика. И конкретно в этой статье я по большей части коснусь разработки фронтенда.
Забегая вперед хочется показать результат:
Как все начиналось
Обратился как-то ко мне один мой старый заказчик, и предложил пофаниться и сделать многопользовательскую онлайн рулетку на сокетах. Бюджет неплохой, сроки сжатые. Ну ок. Почему бы нет, руки уже чесались, но без бекенда я не начинал… Как только появился первый вариант бекенда. Я сразу же начал действовать. В руки мне попал набросок дизайна, и закрутилось завертелось.
Немного верстки
Первым делом я сделал верстку доски ставок. Все на HTML, CSS, но если быть честным то я взял ее тут. Какой то добрый человек выложил ее на gitHub. Низкий поклон ему. Конечно в последствии ее пришлось допилить. Но основа уже есть
Ну ок, вторая задача это механика ставок
Для реализации данной задачи я решил разбить мое маленькое VueJS приложение на несколько модулей, вернее Vuex state модулей, для удобства использовал встроенный нэймспейсинг
Так я храню информацию о ячейках
Принцип работы hover
- Все ячейки это массив объектов с такими полями как label, isHover
- Слушаю событие mouseover над ячейками
- Из каждого события наведения извлекаю координату
- Строю квадрат на основе минимума/максимума, оставляя координату в центре фигуры
- Определяю какие ячейки находятся под квадратом, и ставлю им hover: true, остальным false
- Мутирую state в хранилище (Использую Vuex)
- Вуаля, VueJS подхватывает изменения и добавляет hover классы для ячеек под мышкой (интересно звучит)
По клику подсвеченные ячейки пишутся в массив ставок
На самом деле происходит целый цикл действий 
В итоге мы получаем вот такой массив ставок
Размещение фишек
Фишки разместились на втором слое над доской, при появлении нового элемента в массиве фишка вылетает из своей стопки, плавная анимация реализована с помощью типичного transition встроенного во VueJS
В заключение
Хочется отметить мощь frontend фреймворка VueJS. Его легкость и просто которую я испытал в ходе работы с ним. Раньше мне много приходилось с ним работать, но все задачи — не более чем SPA для админов/CRM и т.д.
В следующей части моего повествования мы затроним по большей части бекенд, веренее его отсутствие и то как я выкрутился из этой ситуации.
UPD: Для наглядности в начало статьи я добавил видео с итоговым результатом.
Создание сайта-рулетки
Создание сайтов-рулеток по компьютерной игре «CS: GO» в последнее время стало распространенным и, при условии правильной организации, достаточно прибыльным делом. Первым шагом, как и для любого веб-ресурса, становится определение целей. Если целью является получение дохода, то потребуется некоторые стартовые вложения, чтобы обеспечить качественную работу сайта и привлечение клиентов. Далее мы рассмотрим, как создать сайт-рулетку.
Заказать создание сайта-рулетки
Концепция и маркетинг
Вариантов организации рулетки существует множество. Можно взимать с игроков плату за вход или же вынуждать их участвовать в аукционе, где вещи реализуются дешевле, чем в Steam’е. Варианты ограничиваются только вашей фантазией. Самые популярные разновидности рулеток следующие:
- Приобретение билетов, увеличивающих шансы на выигрыш – этим путем идет большая часть владельцев рулеток.
- Розыгрыш вещей – это вторая по популярности разновидность, здесь игрок расплачивается не деньгами, а скинами при помощи торговой площадки Steam.
- Покупка скина по выигрышному билету за половину стоимости – эта разновидность схожа с первой: чтобы купить скин дешевле, нужно приобрести билет.
- Открытие кейсов.
Определившись с разновидностью, можно приобрести готовый, создать самому или отдать деньги за разработку индивидуального скрипта, который с помощью файлового менеджера будет переброшен в корень сайта.
Куда потребуется вложить
В первую очередь вам понадобится приобрести рабочий скрипт рулетки. Можно попытаться создать его самостоятельно, но если вы не обладаете специальными знаниями, вряд ли вам это удастся. Готовый скрипт обойдется вам дешевле, чем создать сайт-рулетку уникально для ваших целей. Однако второй вариант будет с большей вероятностью отвечать вашим запросам. Многие сайты предлагают скачать скрипт вовсе бесплатно, но на хороший результат в этом случае рассчитывать не приходится.
Естественно, вам понадобится также домен, хостинг и защита сайта, которые также стоят денег.
Вторым пунктом расходов станет раскрутка, без которой вам не удастся набрать достаточную аудиторию для получения прибылей.
И третий пункт – это выигрыши. Без них не обойтись, ведь если никто не будет выигрывать, к вашей рулетке быстро потеряют интерес.
Когда создание сайта-рулетки завершено, можно смело начинать мечтать о барышах.
Создать сайт рулетку CS GO
Создать бесплатно сайт-рулетку CS GO довольно просто – обратитесь за помощью к интерфейсу нашего конструктора Fo.ru. Мы предлагаем большой выбор готовых решений – от дизайна до специальных плагинов, которые обязательно будут полезны пользователям созданного сайта рулетки CS.GO. Также, рекомендуем вам ознакомиться со списком прочих важных плюсов конструктора Fo.ru:
- Возможность создавать сайты разного формата – от лендинг пейдж до крупного информационного портала,
- Тематические шаблоны оформления,
- Адаптивная вёрстка шаблонов – дизайн будет правильно отображаться на любом устройстве.
Также важно подчеркнуть, что при создании сайта рулетки CS GO важно учитывать общую привлекательность веб-ресурса и удобство пользователей. Специально для этого мы разработали шаблоны, которые не просто максимально подходят по внешнему оформлению, но и создали удобный пользовательский интерфейс в готовых блоках, с учётом последних достижений в UX и UI дизайне.