如何为html5游戏实现触摸控制?

时间:2018-09-24 17:33:25

标签: javascript javascript-events touch-event touchmove

正在开发一个简单的html5 canvas游戏,并尝试添加设备的触摸控件以及台式机等的键盘输入。键盘控件非常完美: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);
  }
}

如何修改代码以使用户触摸输入指示?

请帮助我提供一些代码,该代码可以使汽车在画布左侧触摸时左转,在画布右侧触摸时右转。

提前谢谢

0 个答案:

没有答案