Назад Вперед

Сенсорное управление и запуск игры на весь экран.

JavaScript позволяет элемент страницы показать на полный экран, что будет очень полезно, когда открываешь игру на мобильном устройстве. Решением этой задачи и займусь. Открываю проект и файл index.html. На страницу нужно добавить элемент div с id — 'fullScreenGame'. Внутри этого элемента добавлю тег абзаца и просто текст FULLSCREEN. По нажатию на этот текст игра будет открываться на весь экран.

Файл index.html:


    ...
    <div id='fullScreenGame'><p>FULLSCREEN</p></div>
    ...
 

Добавление кнопки

Чтобы текст отображался по центру игрового экрана пропишу для id несколько правил стиля в файле style.css.

Файл style.css:


    ...
    #fullScreenGame {
        width: 100%;
        text-align: center;
        margin: 0;
    }
 

Добавление стилей

Теперь открываю файл с игровыми настройками — main.js. Необходимо найти созданный элемент по ID и записать для него слушатель. В слушателе записываю функцию startFullscreen.

Файл main.js:


    ...
    document.getElementById('fullScreenGame').addEventListener('click', startFullscreen); 
    ...
 

Теперь создаю эту функцию. В ней записана проверка еще одной функции fsStatus, которая будет возвращать значение true или false. И код будет продолжаться, если ее значение будет true. Дальше нахожу элемент canvas с игрой. И делаю запрос на запуск элемента на полный экран. Так же прописаны случаи для разных браузеров.

Файл main.js:


    ...
    function startFullscreen() {
        if(fsStatus()) {
            return;
        } 
        
        var el = document.querySelector("canvas");
        var requestFullScreen = el.requestFullscreen || el.msRequestFullscreen || el.mozRequestFullScreen || el.webkitRequestFullscreen;
        
        if(requestFullScreen) {
            requestFullScreen.call(el);
        }
    } 
    ...
 

В функции fsStatus() также проверка на разные браузеры. Записываю ее следом. И возвращаю значение true.

Файл main.js:


    ...
    function fsStatus () {
        if(document.fullscreenElement) {
            return true;
        } else if(document.webkitFullscreenElement) {
            return true;
        } else if(document.mozFullScreenElement) {
            return true;
        } else {
            return false;
        }
    }
    ...
 

Функция FullScreen

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

Проверка в браузере

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

В настройках игры указываю ширину 800 пикселей. По 100 пикселей на каждый край. И соответственно в файле main.js нужно поменять координаты размещения платформ. Вместо значения 10 нужно записать 110.

Изменение координат платформ

Также изменить координаты при обновлении позиции платформ, когда шар вылетает и самое условие вылета шара — меньше 100 и больше 700.

Изменение координат вылета шара

Теперь в функции create() создаю сами платформы с помощью метода отрисовки обычного прямоугольника. Они будут белого цвета, чтобы при запуске на компьютерных браузерах не были видны.

Файл main.js:


    ...
    let leftPanel = this.add.graphics();
    leftPanel.fillStyle(0xffffff, 1);
    leftPanel.fillRect(0, 0, 100, 400);
    
    let rightPanel = this.add.graphics();
    rightPanel.fillStyle(0xffffff, 1);
    rightPanel.fillRect(700, 0, 800, 400);
    ...
 

Отрисовка панелей

Осталось разобраться только с управлением. Так как управление будет одновременное с двух сторон (т.е. два пальца будут касаться экрана), то мне понадобиться 2 указателя, а не один, как это по умолчанию используется. Их и добавляю.

Файл main.js:


    ...
    this.input.addPointer();
    this.input.addPointer();
    ...
 

Теперь для самих платформ добавляю метод setInteractive() и в параметрах указываю значение true для аргумента draggable, что позволит их перетаскивать по игровой сцене.

Файл main.js:


    ...
    this.playerOne.setInteractive({ draggable: true });
    this.playerTwo.setInteractive({ draggable: true });
    ...
 

Осталось записать для каждой платформы слушатель 'drag' и во внутренней функции указать, что позиция этого объекта по оси Y будет равна позиции при перетаскивании. Ось X оставляю без изменений.

Файл main.js:


    ...
    this.playerOne.on('drag', function (pointer, dragX, dragY) {
        this.y = dragY;
    });
        
    this.playerTwo.on('drag', function (pointer, dragX, dragY) {
        this.y = dragY;
    });
    ...
 

Управление платформами

Управление готово, можно сохранять и тестировать на мобильных устройствах. На сайте уже залита версия игры с управлением и на мобильных браузерах.

Спасибо за внимание!

Назад Вперед