Как добавить кнопки в вашу игру HTML5 для мобильного доступа

Как добавить кнопки в вашу игру HTML5 для мобильного доступа - манекены

В библиотеке simpleGame есть удобная функция под названием GameButton для добавления кнопки на экран мобильного устройства для вашей игры HTML5. Клавиатура является одним из самых простых способов ввода данных в стандартный браузер, но большинство мобильных устройств не имеют клавиатур. Первая проблема заключается в том, чтобы выяснить, как получить пользовательский ввод, когда нет клавиатуры.

Пользовательский кнопочный объект GameButton начинается с функций стандартной кнопки HTML, но затем добавляет несколько трюков, чтобы сделать его подходящим для игр. Вы можете активировать кнопку с помощью обычной мыши или с сенсорным управлением, что делает ее идеальной для игр, которые можно воспроизводить на обоих типах устройств. Кнопка. На странице html отображается кнопка в действии: кнопка

 . html  var btnMove;  игра var; var ball; function init () {game = new Сцена (); игра. setSize (200, 200); ball = new Sprite (игра, «redBall. png», 25, 25); мяч. SetSpeed ​​(0); мяч. setPosition (100, 100);  btnMove = новый GameButton («Переместить»);   btnMove. setPos (70, 150);   btnMove. setSize (60, 30);  игра. start ();} // end init function update () {game. Чисто();  checkButtons ();  мяч. update ();} // end update  function checkButtons () {  if (btnMove. isClicked ()) {  ball. SetSpeed ​​(3);   } else {  мяч. SetSpeed ​​(0);   } // end if   } // end checkButtons  

Как обычно, новые и интересные элементы выделены жирным шрифтом. Вот как вы добавляете кнопку игры в игру:

  1. Создайте переменную для кнопки.

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

  2. Создайте объект GameButton.

    Создайте объект GameButton в методе init (). Единственный параметр указывает заголовок кнопки.

  3. Установите размер и положение кнопки.

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

  4. Проверить статус кнопки во время обновления ().

    Так же, как вы обычно проверяете состояние клавиатуры во время функции update (), вы также можете вызвать функцию, чтобы проверить статус вашей кнопки. Конечно, вам нужно будет написать эту функцию.

  5. Прочитайте метод isClicked () кнопки.

    Если кнопка в данный момент нажата, значение isClicked () - true. Если кнопка не нажата, isClicked () возвращает false.Используйте этот метод для определения текущего состояния каждой кнопки и действуйте соответствующим образом.

  6. Относитесь к кнопке, подобной клавиатуре.

    Поскольку тестирование кнопок в конечном итоге возвращает значения Boolean (true или false), проверка кнопок обычно ощущается во многом так же, как проверка клавиатуры.

  7. Рассмотрите возможность добавления кнопок только при необходимости.

    Если вы хотите, вы можете проектировать игру для отображения (и тестирования) кнопок только при наличии сенсорного экрана. Объект Scene имеет специальную переменную, называемую touchable. Эта переменная истинна, если библиотека воспринимает сенсорный экран, а false - в противном случае. Вы можете использовать эту переменную для создания настраиваемого интерфейса, который адаптируется к игровой среде.

Обычно вы добавляете несколько кнопок на свой интерфейс, один для замены каждой клавиши, которую вы ожидаете от пользователя (например, стрелки и пробел). Таким образом, вы можете создать виртуальную клавиатуру на экране. Вам может потребоваться проверить размер и положение каждой клавиши, чтобы получить удобный игровой процесс.

Обратите внимание, что заголовок кнопки - обычный HTML, поэтому, если вы хотите сделать свои кнопки на основе изображений, вы можете просто добавить соответствующий тег

в качестве заголовка кнопки.