Как реализовать Touch control для игры html5? - PullRequest
0 голосов
/ 24 сентября 2018

Работа над простой html5-игрой с холстами и попытка добавить сенсорное управление для устройств, а также ввод с клавиатуры для настольных компьютеров и т. Д. Идеальное управление с клавиатуры: Enter подключено к restart игре и left/right/up/down стрелкеключи для движения автомобиля.Это прекрасно работает с системой, но не знаю, как заставить его работать на сенсорных телефонах.Идея состоит в том, чтобы повернуть автомобиль влево, если коснуться его, и повернуть автомобиль вправо, если касание с правой стороны холста.

JS для нажатия клавиш выглядит следующим образом:

$(document).on('keydown', function(e) {
  if (game_over === false) {
    var key = e.keyCode;
    if (key === 37 && move_left === false) {
      move_left = requestAnimationFrame(left);
    } else if (key === 39 && move_right === false) {
      move_right = requestAnimationFrame(right);
    } else if (key === 38 && move_up === false) {
      move_up = requestAnimationFrame(up);
    } else if (key === 40 && move_down === false) {
      move_down = requestAnimationFrame(down);
    }
  }
});

$(document).on('keyup', function(e) {
  if (game_over === false) {
    var key = e.keyCode;
    if (key === 37) {
      cancelAnimationFrame(move_left);
      move_left = false;
    } else if (key === 39) {
      cancelAnimationFrame(move_right);
      move_right = false;
    } else if (key === 38) {
      cancelAnimationFrame(move_up);
      move_up = false;
    } else if (key === 40) {
      cancelAnimationFrame(move_down);
      move_down = false;
    }
  }
});


function left() {
  if (game_over === false && parseInt(car.css('left')) > 0) {
    car.css('left', parseInt(car.css('left')) - 5);
    move_left = requestAnimationFrame(left);
  }
}

function right() {
  if (game_over === false && parseInt(car.css('left')) < container_width - car_width) {
    car.css('left', parseInt(car.css('left')) + 5);
    move_right = requestAnimationFrame(right);
  }
}

function up() {
  if (game_over === false && parseInt(car.css('top')) > 0) {
    car.css('top', parseInt(car.css('top')) - 3);
    move_up = requestAnimationFrame(up);
  }
}

function down() {
  if (game_over === false && parseInt(car.css('top')) < container_height - car_height) {
    car.css('top', parseInt(car.css('top')) + 3);
    move_down = requestAnimationFrame(down);
  }
}

Как изменить код так, чтобы пользователь мог вводить сенсорным вводом указания?

Пожалуйста, помогите мне с кодом, который может повернуть автомобиль влево при касании слевахолста и поверните направо при прикосновении справа на холсте.

Заранее спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...