Как добавить функциональность сенсорного экрана (коснитесь левой/правой стороны экрана) в мобильной игре HTML5?

В настоящее время я разрабатываю игру Doodle Jump как мобильную веб-игру с использованием Javascript и HTML.

Пользователь должен удерживать правую сторону экрана, чтобы переместить Doodle вправо и удерживать влево, чтобы переместить Doodle влево

Здесь я предоставляю ссылку на изображение

enter image description here

  1. Как добавить невидимый коллайдер для правой и левой стороны экрана? (Должен ли я использовать HTML-холст или Javascript)

  2. Как закодировать функцию Eventlistener в Javascript, чтобы игрок мог перемещать каракули, касаясь левой или правой стороны экрана мобильного телефона

-4
источник поделиться
1 ответ

Если вы используете jQuery, довольно легко зафиксировать клики на экране.

Вот скрипка, которая будет делать то, что вы просите.

Функция клика будет измерять ширину div, а затем сравнить местоположение x щелчка, чтобы увидеть, больше ли он на полпути через div.

https://jsfiddle.net/q82nhef0/

$("#thediv").click(function(e) {
    var divWidth = $("#thediv").width();        
    var clickX = e.clientX;
    if (clickX > divWidth/2) {
        console.log("Div was clicked on the right");
    } else {
        console.log("Div was clicked on the left");
    }
});

Это будет работать, если вы используете холст html5. Если вы создаете игровое поле с комбинацией элементов html5, я бы предложил разместить div по всей поверхности игры, и этот div должен иметь высокий индекс z.

0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос