Доброго времени суток, уважаемые читатели. Я не знаю делал ли кто-то что-то подобное до меня, поэтому я решил поделиться идеей моего pet-проекта и отнять у вас немного времени.

Вначале был кролик

С детства я любил играть в игры, сейчас мало что изменилось. Еще больше мне нравится провести пару часов в игре с с друзьями/коллегами/детьми. К сожалению не всегда под рукой оказывается консоль с контроллерами. Именно эту сложность я и попытаюсь решить.

Идея использовать в качестве контроллера свой телефон возникла в моей голове очень давно. На протяжении многих лет я продолжал думать на эту тему, но откладывал реализацию по массе причин. В итоге сменил несколько работ переехал из северной столицы в первопрестольную и наконец решил сделать хотя бы demo-версию, чтобы понять насколько эта идея хороша.

Все началось с того,что однажды летом прошлого года я предложил сыну помочь придумать персонажа для игры. Так появился кролик..

Основная идея

Представьте, что к вам пришли внезапные гик-гости, настолки на даче, консоль в ремонте, а по зомбоящику полнейшая дичь? Отлично! Вы открываете сайт с игрой на компьютере/smartTV/проекторе/планшете/…/на чем угодно где есть браузер, сканируете qr код своим телефоном, который тут же превращается в контроллер и вперед!

Как веб-разработчик я вовсе не понимаю в разработке игр, поэтому в качестве жанра для демо-версии основной идеи я выбрал двухмерный шутер с пиксельной графикой.

Сам по себе процесс разработки и отрисовки спрайтов занял не больше пары недель, все делалось в свободное время и демка была закончена спустя 8 месяцев, после появления первого изображения первого персонажа.

Персонажи

В качестве участников перестрелки были выбраны следующие существа: кролик, гусь, человек, собака. Каждый персонаж был нарисован в 4-х направлениях (right, left, front, back) и в 2-х состояниях (стоит, идет). Весь процесс вместе с анимацией для ходьбы занял дней 5 с учетом дачных, домашних и прочих дел.

Я не буду углубляться в процесс рисования и анимации пиксельных персонажей, скажу только, что старался придерживаться минимума цветов, а перед тем как приступить к рисованию посмотрел несколько роликов на youtube. Запомнилось мне только одно (ссылка не реклама, но после просмотра этого видео, я все понял, закрыл youtube и сел рисовать)

Подготовка к кодингу и первые сложности

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

Я намеренно (чтобы сыну проще было потом разобраться в коде и доработать) пошел наиболее простым и наглядным путем, отказавшись от использования фреймворков, сторонних библиотеки и т д. В итоге получилось:

1. фронт — html, canvas, css, js, canvas

2. бэк — php, mySQL

Нестареющая классика, так сказать.

В качестве хостинга я просто решил использовать свой хостинг от BEGET (в конце-концов речь идет о демо-версии к тому же у меня был бесхозный домен)

Быстренько поднял GIT и начинаем самое интересное.

p.s. Спустя неделю разработки, зайдя после бани в гости к товарищу, я с удивлением обнаружил, что не все smartTV поддерживают canvas, поэтому canvas был заменен на div.

Логика в двух словах

При открытии страницы с игрой формируется уникальный id этой игровой сессии, создается новая строчка в базе данных и формируется qr код для контроллера, в котором в качестве GET параметра передается вышеупомянутый id. (Для генерации qr кода я использовал API первой ссылки в гугле.)

После сканирования кода телефоном, мы позволяем выбрать из оставшихся персонажей и показываем контроллер для управления выбранным.

Со стороны страницы с игрой мы просто 10 раз в секунду (60 fps тут не надо) делаем запрос в базу, берем оттуда данные и на их основе считаем и рисуем текущее состояние игры на экране, реализуя таким образом игровой цикл.

Контроллер

Сами понимаете, у экрана телефона нет тактильного контакта, поэтому единственный способ сделать так, чтобы человек не промахивался по кнопкам-сделать их большими. Немного верстки на гридах и готово.

Для наглядности я оставил вывод на экран значения , которые падают в базу данных

Логика работы контроллера такова:

1. нажали кнопку->изменили состояние объекта->положили в базу

2. отжали кнопку->изменили состояние объекта->положили в базу

Есть пара нюансов. При стрельбе необходимо через некоторое время «обнулять» свойство shoot (чтобы не было непрерывных очередей). Ну и в качестве событий для нажатие использовать touchstart и touchend соответственно. Ниже пример на jq для наглядности.

$(document).on("touchstart  mousedown", ".button", function(e){ 		if (this.id==='fire') { 			personToSend.shoot=1; 			showPerson();//покажем на экране состояние 			sendStateToDB(); //отправим его в базу 			setTimeout(nullFire, 100); //обнулим стрельбу 		} else { 			personToSend.move=1; 			personToSend.direction=this.id; 			showPerson(); 			sendStateToDB(); 		} });  

Больше про контроллер сказать нечего. Как я и говорил demo-версия максимально простая для понимания.

Фронтенд со стороны браузера с игрой

Тут вышло немного посложнее, но тоже достаточно просто.

Всего в игре используется 4 класса:

1. СlassGame — управляет игрой.

2. ClassEntity — в нем всего 2 метода конструктор и рисование объекта.

3. ClassFlower (наследуется от ClassEntity) — добавляет немного декораций.

4. ClassPerson (наследуется от ClassEntity) — для рисования и перемещения персонажей.

5. ClassBullet (тоже наследуется от ClassEntity) — для рисования и перемещения пулек.

Еще есть отдельный js файл в котором создается объект игры и запускается игровой цикл.

Немного о ClassGame ниже.

ClassGame

Я не стану описывать подробно, так это займет массу вашего и моего времени. Если появятся вопросы, я с радостью на них отвечу. Если в 2-х словах, то этот класс управляет всей игрой.

1. Заводит новую сессию в базе данных и получать из нее текущее состояние персонажей.

2. Рассчитывает размеры всего отображаемого на экране в зависимости от размеров div’а с игрой.

3. Хранит в себе состояние объектов (пара массивов с объектами персонажей и пулек соответственно).

4. Добавляет, удаляет, изменяет состояние всех объектов на экране.

Несколько вещей, которые хотел сказать но не пришлось к слову:

1. В ходе тестирования оказалось что некоторые smartTV не умеют использовать cloneNode и не понимают append от js, хотя волшебным образом понимают append от jq. Поэтому пришлось использовать эту библиотеку. (разбираться почему так происходит не было времени, да и я не bootstrap 5, чтобы совсем отказываться от jq)

2. Для придания игре 3-d эффекта близкие предметы я делал с большим z-index, дальние соответственно с меньшим.

3. QR код лучше читается на светлом фоне

4. Звук в игре нельзя запустить сразу, а можно только по клику на кнопку включения звука. Насколько я понял такая ситуация считается нормальной в современном вебе. И действительно зачем навязывать пользователю всякие лишние раздражители.

5. Айфоны при дабл-клике увеличивают страницу, поэтому пользователи айфонов испытывают дискомфорт. У этой группы пользователей могут возникнуть сложности со сканированием QR кода стандартными средствами.

6. Спрайты необходимо рисовать одинакового размера для всех состояний персонажа

7. Для отслеживания столкновений в данном случае идеально подходит решение задачи о пересечений 2-х квадратов с известными размерами сторон и координатами верхних левых вершин.

8. Рисовать пиксельных персонажей очень занятно, анимировать их — боль.

9. И пожалуй последнее WebStorm — идеальная IDE, жаль, что лицензия, которую выдал Яндекс Практикум, заканчивается завтра.

Пара мыслей напоследок

Демка, которую я сделал конечно забавная, но не претендует на роль полноценной игры. Можно сыграть пару раз с друзьями за кружкой пива чая в гостях, или во время обеденного перерыва в офисе с коллегами. Однако, обратите внимание на то, какие перспективы открываются перед нами:

1. Можно портировать олдскульные игры и играть где угодно.

2. Можно попробовать прикрутить стриминговые сервисы и играть где угодно

3. Можно не отображать контроллер в браузере мобильника, а написать приложение, которое будет сканировать и оно же будет контроллером.

4. Можно придумывать игры с расширенным геймплеем (например у дочки в телефоне живет тамагочи и она его может выпускать в телевизор подруги, когда приходит в гости. Или покупка/продажа предметов в любимой RPG осуществляется при помощи drag and drop в мобильнике в то время как персонаж стоит возле лавки. Или покер с друзьями в пятницу, но карты у вас в мобильнике. Или настолоки с картами, которые можно сканировать, а отображение игровой ситуации на большом экране и т.д. все ограничивается только фантазией)

5. Можно сделать механический контроллер, который будет подключаться к wi-fi и уметь сканировать qr-код, таким образом вопрос с тактильными ощущениями будет решен

6. В конечном счете можно будет просто покупать у стримингового сервиса вышеупомянутый контроллер, вместо того, чтобы покупать целую консоль.

7. и т. д.

Как видите, простор для размышления просто безграничен. И мне кажется эта идея потенциально имеет хорошее будущее.

Я с радостью отвечу на все ваши вопросы и послушаю ваши мысли по поводу написанного выше.