我开发这个浏览器游戏是为了好玩。
但我正在努力让它在移动浏览器中也能工作。但当我同时按下多个按钮时,我似乎无法使其工作。
我有这个游戏,你可以左右移动和跳跃。 (见下图)
(来源:userhome.org)
我的代码如下所示:
function inittouchcontrols() {
$("body").append("<div id='btn_moveleft' keyid='37'></div><div id='btn_moveright' keyid='39'></div><div id='btn_jump' keyid='38'></div>");
$('body').on('taphold', function (e) {
e.preventDefault();
});
$('body').on('tap', function (e) {
e.preventDefault();
});
$('body').on('vmouseover', function (e) {
if($(e.target).attr("keyid") != undefined)
$(e.target).css("background-color", "red");
window["keyDown" + $(e.target).attr("keyid")]();
c_key_x = c_key_left + c_key_right;
c_key_y = c_key_up + c_key_down;
$("#pushedkeys").html("keys: " + c_key_x + " " + c_key_y);
});
$('body').on('vmouseout', function (e) {
if ($(e.target).attr("keyid") != undefined)
$(e.target).css("background-color", "aqua");
window["keyUp" + $(e.target).attr("keyid")]();
c_key_x = c_key_left + c_key_right;
c_key_y = c_key_up + c_key_down;
$("#pushedkeys").html("keys: " + c_key_x + " " + c_key_y);
});
}
我使用 jQuery mobile
vmouseover
和 vmouseout
来检测对水色 div 的按下。但它一次只能按一个按钮。
所以我的问题是:
有什么方法可以在我的代码中实现多点触控吗?
您可以使用触摸事件 API touchstart、touchmove 和 touchend (https://developer.mozilla.org/en-US/docs/Web/Guide/Touch_events)
每个都会有一个触摸集合,除其他外,附加到它的事件对象。
需要注意的一件事是,触摸属性不包含在普通的 jQuery 事件对象中,因此您必须使用 event.originalEvent 来访问它们
$('#ele').on('touchstart', function(e) {
var touches = e.originalEvent.touches;
});