Доброго времени суток, уважаемые читатели. Я не знаю делал ли кто-то что-то подобное до меня, поэтому решил поделиться идеей моего pet-проекта и отнять у вас немного времени.  С детства я любил играть в игры, сейчас мало что изменилось.  Еще больше мне нравится провести пару часов в игре с друзьями/коллегами/детьми. К сожалению не всегда под рукой оказывается консоль с контроллерами. Именно эту сложность я и попытаюсь решить. Идея использовать в качестве контроллера свой телефон возникла в моей голове очень давно. На протяжении многих лет я продолжал думать на эту тему, но откладывал реализацию по массе причин. В итоге сменил несколько работ, переехал из северной столицы в первопрестольную, и наконец-то решил сделать хотя бы  demo-версию, чтобы понять, насколько эта идея хороша. Все началось с того,что однажды летом прошлого года я предложил сыну помочь придумать  персонажа для игры.  Так появился кролик. Представьте - к вам пришли внезапные гости, настолки на даче, консоль в ремонте, а по зомбоящику полнейшая дичь. Представили? Отлично! Вы открываете  сайт с игрой на компьютере/smartTV/проекторе/планшете/.../на чем угодно, где есть браузер, сканируете qr-код своим телефоном, который  тут же превращается в контроллер - и вперед! Как веб-разработчик я вовсе не понимаю в разработке игр, поэтому в качестве жанра для демо-версии основной идеи я выбрал двухмерный шутер с пиксельной графикой.   Сам по себе процесс разработки и отрисовки спрайтов занял не больше пары недель,  все делалось в свободное время и демка была закончена спустя 8 месяцев, после появления первого изображения первого персонажа. В качестве участников перестрелки были выбраны следующие существа: кролик, гусь, человек, собака. Каждый персонаж был нарисован в 4-х направлениях (right, left, front, back) и в 2-х состояниях (стоит, идет). Весь процесс вместе с анимацией для ходьбы занял дней пять с учетом дачных, домашних и прочих дел.  Я не буду углубляться в процесс рисования и анимации пиксельных персонажей, скажу только, что старался придерживаться минимума цветов, а перед тем, как приступить к рисованию, посмотрел несколько роликов на youtube. Запомнилось мне только одно (ссылка не реклама, но после просмотра этого видео, я все понял, закрыл youtube и сел рисовать) Веб-разработка, как вы знаете, это достаточно большой стек различных технологий, поэтому необходимо было определиться с тем, что использовать, а что нет.  Я намеренно  (чтобы сыну проще было потом разобраться в коде и доработать) пошел наиболее простым и наглядным путем, отказавшись от использования фреймворков, сторонних библиотеки и т.д. В итоге получилось: фронт - html, canvas, css, js, canvas бэк - php, mySQL Нестареющая классика, так сказать.  В качестве хостинга я просто решил использовать свой хостинг от BEGET (в конце концов речь идет о демо-версии, к тому же у меня был бесхозный домен). Быстренько поднял GIT - теперь самое интересное. p.s. Спустя неделю разработки, зайдя после бани в гости к товарищу, я с удивлением обнаружил, что не все smartTV поддерживают canvas, поэтому  canvas был заменен на div.   При открытии страницы с игрой формируется уникальный id этой игровой сессии, создается новая строчка в базе данных и формируется qr-код для контроллера, в котором в качестве GET-параметра передается вышеупомянутый id (для генерации qr-кода я использовал API первой ссылки в гугле). После сканирования кода телефоном мы позволяем выбрать из оставшихся персонажей и показываем контроллер для управления выбранным. Со стороны страницы с игрой мы просто 10 раз в секунду (60 fps тут не надо) делаем запрос в базу, берем оттуда данные и на их основе считаем и рисуем текущее состояние игры на экране, реализуя таким образом игровой цикл. Сами понимаете, у экрана телефона нет тактильного контакта, поэтому единственный способ сделать так, чтобы человек не промахивался по кнопкам - сделать их большими. Немного верстки на гридах и готово. Для наглядности я оставил вывод на экран  значения , которые падают в базу данных: Логика работы контроллера такова: нажали кнопку->изменили состояние объекта->положили в базу отжали кнопку->изменили состояние объекта->положили в базу Есть пара нюансов. При стрельбе необходимо через некоторое время "обнулять" свойство shoot (чтобы не было непрерывных очередей). Ну и в качестве  событий для нажатия использовать touchstart  и touchend соответственно. Ниже пример на jq для наглядности. Больше про контроллер сказать нечего. Как я и говорил, demo-версия максимально проста для понимания. Тут вышло немного посложнее, но тоже достаточно просто. Всего в игре используется 5 классов: СlassGame - управляет игрой ClassEntity - в нем всего 2 метода - конструктор и рисование объекта ClassFlower (наследуется от ClassEntity) - добавляет немного декораций ClassPerson (наследуется от ClassEntity) - для рисования и перемещения персонажей ClassBullet (тоже наследуется от ClassEntity) - для рисования и перемещения пулек  Еще есть отдельный js файл в котором создается объект игры и запускается игровой цикл. В ходе тестирования оказалось, что некоторые smartTV не умеют использовать cloneNode и не понимают append от js, хотя волшебным образом понимают append от jq. Поэтому и пришлось использовать эту библиотеку. (разбираться почему так происходит не было времени, да и я не bootstrap 5, чтобы совсем отказываться от jq) Для придания игре 3-d эффекта близкие предметы я делал с большим z-index, дальние соответственно с меньшим QR-код лучше читается на светлом фоне Звук в игре нельзя запустить сразу, а можно только по клику на кнопку включения звука. Насколько я понял, такая ситуация считается нормальной в современном вебе. И действительно, зачем навязывать пользователю всякие лишние раздражители Айфоны при дабл-клике увеличивают страницу, поэтому пользователи айфонов испытывают дискомфорт. У этой группы пользователей также могут возникнуть сложности со сканированием QR-кода стандартными средствами Спрайты необходимо рисовать одинакового размера для всех состояний персонажа Для отслеживания столкновений в данном случае идеально подходит решение задачи о пересечении 2-х квадратов с известными размерами сторон и координатами верхних левых вершин Рисовать пиксельных персонажей очень занятно,  анимировать их - боль И пожалуй, последнее WebStorm - идеальная IDE. Жаль, что лицензия, которую выдал Яндекс Практикум, заканчивается завтра. Демка, которую я сделал, конечно забавная, но не претендует на роль полноценной игры. Можно сыграть пару раз с друзьями за кружкой пива чая в гостях, или во время обеденного перерыва в офисе с коллегами. Однако, обратите внимание на то, какие перспективы открываются перед нами: Можно портировать олдскульные игры и играть где угодно Можно попробовать прикрутить стриминговые сервисы и играть где угодно Можно не отображать контроллер в браузере мобильника, а написать приложение, которое будет сканировать и оно же будет контроллером Можно придумывать игры с расширенным геймплеем ( у дочки в телефоне живет тамагочи и она его может выпускать в телевизор подруги, когда приходит в гости. Или покупка/продажа предметов в любимой RPG осуществляется при помощи drag and drop в мобильнике в то время как персонаж стоит возле лавки. Или покер с друзьями в пятницу, но карты у вас в мобильнике. Или настолки с картами, которые можно сканировать, а отображение игровой ситуации на большом экране и т.д. все ограничивается только фантазией)  Можно сделать механический контроллер, который будет подключаться к wi-fi и уметь сканировать qr-код, таким образом вопрос с тактильными ощущениями будет решен В конечном счете можно будет просто покупать у стримингового сервиса вышеупомянутый контроллер, вместо того, чтобы покупать целую консоль. и т. д. Как видите, простор для размышления просто безграничен. И мне кажется, эта идея потенциально имеет хорошее будущее.  Я с радостью отвечу на все ваши вопросы и послушаю ваши мысли по поводу написанного выше.   веб-разработчик