Websockets – эксперемент
Играми в браузере уже никого, увы, не удивишь. Не удивишь, даже играми в браузере на мобильном телефоне. Играть можно дома, на работе, в автобусе; на компьютере, на телефоне, на теливизоре, на E-ink читалке, на холодильнике. Но редко когда можно играть одновременно на нескольких устройствах.
Допустим – гонки. Если вы сидите перед монитором вашего настольного компьютера, у вас есть мышь и клавиатура. WASD - мы все умеем ими пользоваться, но, к сожалению, в данном случае это не удобно. Вы взяли мобильный телефон, там есть акселерометр, все становится гораздо проще (Да, да у браузеров есть API для работы с акселерометром. По-моему об этом никто не знает, я никогда не видел, чтобы его кто-то использовал.) Но здесь есть другая проблема - Webkit тормозит.
Для веб-гейминга телефон подходит мало, но не положить же его на полку. Что если использовать телефон как контроллер, а всю обработку графики перенести на компьютер? (Я знаю, что идея не нова, но мне захотелось сделать что-то необычное)
Но как? Для тех, кто более-менее внимательно слидит за развитием стандарта HTML5 ответ не будет неожиданностью - Websockets. (Для тех, кто не знает, вебсокеты позволяют установить соединение с сервером и держать его открытым, чтобы и клиент и сервер могли отправлять друг-другу сообщения. Подробнее – в спецификации.)
Два устройства подключаются к одному серверу, hendshake, и все сообщения, посылаемые клиентами отправляются другому устройству. Добро пожаловать в будущее (не то оптоволоконное будущее, где эта связка не тормозит, а другое, поближе).
Но это все в теории. Надо провести эксперемент. Надо написать простенькую браузерную игрушку. Какую? Не будем ходить далеко, я уже приводил в пример гонки - будут гонки. (Сам с собой, мультиплеер - это хорошо, но не сейчас, и вообще я не то хочу проверить.)
Что должен уметь делать компьютер: сединятся с контроллером, рисовать трассу, машинку, двигать машинку по данной трассе. Что должен делать контроллер: рисовать кнопки, отправлятиь информацию о их нажатии.
Кажется, не сложно. Для рисования выбрал paper.js – уж сильно он мне понравился. К тому же он довольно простой в обращении.
Трасс дается на выбор восемь - каждая хранится в своем JSON файле в формате SVG path (M 0 20 A 30 20 0 1 0 60 20 A 30 20 0 1 0 0 20 - овал). В том-же файле: точка старта и список точек, через которые нужно проехать игроку.
Выше я заикнулся про акселерометр. Но управление акселерометром слабо работает при виде от третьего лица, а вид от первого лица сложно совместить с двухмерной графикой, реализация трехмерного игрового мира в рамках данной задачи не оправдана (не потому что я ничего не знаю про WebGL).
Итак, сказано – сделано. Рабочий вариант вы можете увидеть по адресу https://wstracks.herokuapp.com/ для компьютеров, и https://wstracks.herokuapp.com/controller/ для мобильных устройств.
Работа программы протестирована в Chrome, Firefox, Safari на компьютере и Webkit (iOS 8.1) и Blink (Android 4.4.4, Chrome 38).