正在开发一个简单的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);
}
}
如何修改代码以使用户触摸输入指示?
请帮助我提供一些代码,该代码可以使汽车在画布左侧触摸时左转,在画布右侧触摸时右转。
提前谢谢