Играем в браузере

Кто я такой?

• Меня зовут Сева
• Разработчик API Яндекс.Карт
• В прошлом flash-разработчик игр для социальных сетей
• Игры - мое хобби

Почему такая тема?

• Внешние браузерные плагины вымирают
• Браузеры предоставляют всё больше возможностей

Что будет в этом докладе?

• WEB-спецификации
• Удачные практики
• Живые примеры!
• 2D

Game loop

requestAnimationFrame (RAF)

            function tick (timestamp) {
              /* recalculate */
              /* redraw */
              requestAnimationFrame(tick);
            }
            requestAnimationFrame(tick);
        

tick

            function tick (timestamp) {
              // ...
              circle.update((timestamp - lastTimeValue) / 1000);
              // ...
            }
            requestAnimationFrame(tick);
        

Circle.update

            // ...
            this._position[0] += (timeDelta * this._speed) * 
               this._direction[0];
            // ...
        

RAF в неактивной вкладке

            document.addEventListener('visibilitychange', function () {
                lastTimeValue = performance.now();
            });
        

Использование CSS трасформации

        transform: scaleY(0.5);
        transform: rotate(45deg);
    

Dirty Rectangles

Dirty Rectangles

Canvas буфер

Активные области

Клавиатура & мышь

            elem.addEventListener('mousemove', function(event) {
                // do something awesome!
            });
        

Gamepad API

• Получение состояние геймпадов в браузере
• Позволяет отслеживать нажатие кнопок, положение стиков
• Поддерживается всеми браузерами кроме IE и Safari (уже в TP)
• Обладает непривычным интерфейсом

Интерфейс Gamepad API

            var gamepad = navigator.getGamepads()[0];
            var button0 = gp.buttons[0]; /* 0-16 */
            var axe0 = gp.axes[0]; /* 0-3 */
        

Pointer Lock API

• Никак не связан с Pointer Events
• Очень похожа на Fullscreen API, но работает с курсором
• Имеет значительно большую поддержку, чем Fullscreen API

Элемент audio

        var myaudio = new Audio("sound_asset.mp3");
        myaudio.play();
    

Элемент audio

        // Текущее положение в аудиофайле
        myaudio.currentTime
        // Громкость
        myaudio.volume
    

Web Audio API

• Программный интерфейс для обработки потокового звука
• Позволяет генерировать звук
• Имеет поддержку всеми популярными браузерами (кроме IE)
• Очень большая спецификация

Сохранение игры

• Локальные хранилища (localStorage, indexedDB)
• Сервер (XHR, fetch)

Web Socket

• Постоянное соединение
• Двухсторонняя связь
• Множество решений для клиента и для сервера