Короче была у меня ещё с 2012-2013 где-то идея: сделать версию нян-кота, которая будет не просто бежать по экрану, но бегать с экрана на экран. У меня ещё с тех пор были заметки простенькие, написанные за полчаса, где написаны все инструкции, сложного ничего не было. Только почему-то это заняло 7 лет.
Ниже рассказываю, как я вообще до этого дошёл и в чём основная фишка. Если вам интересно посмотреть на видео-демки — они тоже ниже. Но вообще это заметка, чтобы просто сказать "я сделяль" и накидать видосов.
Ну, собственно, можно догадаться, что главная фишка — не страничка с анимацией. Главная фишка — простенький websocket сервер, который обрабатывает все команды и координирует участников.
Там вообще много мелочей и разных команд, но главная суть сводится к следующему:
- Надо уметь создавать сессию и подсоединять участников к одной сессии
- Нужно сообщать клиенту, когда настала его очередь двигать кота
- Клиент должен оповестить, когда он подходит близко к границе - сервер сообщит следующему клиенту, что надо приготовиться
- Клиент должен оповестить, когда он коснётся границы - сервер передст следующему клиенту, что пора начинать двигаться
Помимо этого нужно ещё добавить команду для пингов (чтобы соединение держалось), передачу управления при отключении (чтобы сессия не зависала) и синхронизацию музыки. С синхронизацией музыки сложнее всего, потому что идеально тут сделать всё равно не выйдет из-за небольшой задержки между клиентом и сервером, но хей, это лучше, чем ничего.
В целом ничего сложного. Ну и, как выяснилось, всё это супер легко делается с ReactPHP и Ratchet. Вообще сам код со всем списком команд есть на гитхабе, но особо там смотреть не на что на самом деле. Самым сложным, наверное, было даже не написать логику координации сессий, а найти, где я там забыл строчку дописать потом. А, ну и самое приятное — использование прокси nginx, чтобы вывести сервер во внешний мир и не возиться лишний раз.
С фронтендом я как-то особо не заморачивался. Сделал так, чтобы было более-менее приятно глазу, и ладно. Самая интересная часть — CSS анимации и эффекты. Изначально я вообще думал сделать как крутые ребята и сделать фон, кота и радугу полностью на CSS, но в итоге решил, что это слишком много лишнего гемора. Проще оказалось нарезать (руками, конечно же), несколько гифок и соединить их вместе. Самыми полезными вещами тут, конечно, были CSS-анимации и новые (уже старые) единицы измерения vw/vh/vmin/vmax. Но этим дело, конечно же, не ограничилось
Ну и самое вкусное — кастомные скины. Где-то в середине я подумал, что было бы неплохо сделать как на nyan.cat, чтобы были разные скины с разной музыкой. Команду на сервере я сделал для этого сразу (а потом подцепил к синхронизации музыки ещё), но сразу не стал реализовывать, потому что какой смысл, если нет анимаций?
В итоге я накопал сначала самые любимые вариации на тему бегущего в космосе котика, но потом пошёл в разнос: тут и Соник, и Мариса на метле, а в планах вообще доту сюда.
В итоге я накопал сначала самые любимые вариации на тему бегущего в космосе котика, но потом пошёл в разнос: тут и Соник, и Мариса на метле, а в планах вообще доту сюда.
Самое прикольное — этому добру в итоге нашлось и иное применение: например, в качестве фона трансляции в OBS. Достаточно просто добавить, выбрать любимую анимацию и прописать в свойствах источника ".topmenu { display: none; }". Получается набор приятных фоновых анимаций на стрим.
Такие вот дела!