我目前正在为移动和非移动开发html5游戏。
UI现在适用于移动设备的方式是,当您按住屏幕右侧时,角色会向右移动。按住左端,角色向左移动。点击屏幕中间进行拍摄并向上滑动即可跳转。所有这些都很好。
但是,我想在它向右移动的地方,用户也可以点击屏幕进行拍摄,或者轻扫以跳转。例如,在非移动版本中,在按住右箭头键的同时,如果同时按下顶部箭头,则会在向右移动时跳跃。事件不会相互阻挡。但是,通过触摸事件,您似乎一次只能触发一个。如果我抱着右侧跑,然后点击,生病停止运行。事实上,我也不会拍摄,所以看起来这两个事件只是相互抵消了。
我不确定这是否是语义错误,或者如果不可能,但任何建议/帮助都会非常感激。如果用jQuery事件不可能做到这一点,也许有一些创造性的方法我可以用JS或框架来实现这个目标吗?
以下是事件的代码,如果它有帮助的话:
$(document).on('touchstart', '#game', function(e) {
//x coordinate of touch
var touchX = e.originalEvent.touches[0].pageX;
`enter code here` //what part of the canvas are we touching?
var leftSide = touchX <= .10 * width; //left 10% of width
var rightSide = touchX >= .90 * width; //right 10% of width
if (leftSide || rightSide) {
//if they are jumping or shooting they cant do anything but jump unless they are in the air
if ((player.currentAction !== 'jumping' || (player.currentAction === 'jumping' && (player.y === groundLocation || !noObstacleCollisions(player))))) {
var action;
if (leftSide) action = 'moving left';
else if (rightSide) action = 'moving right';
player.action(action);
player.lastAction = action;
//dont add duplicate actions, since keyup is constantly called when held down
if (!inArray(player.currentActions, action)) {
player.currentActions.push(action);
}
}
}
});
//when tap is released update current actions
$(document).on('touchend', '#game', function() {
//if we're moving left or right stop when we let go of the key
//also make sure we're either on the ground or on a platform when we do that
//we dont want to break midair trajectory
var movingLeftOrRight = player.vx !== 0;
if (movingLeftOrRight && (!noObstacleCollisions(player) || player.y === groundLocation)) {
player.action('standing'); //stop player
}
//remove action associated with key
if (player.vx > 0) removeFromArray(player.currentActions, 'moving right');
if (player.vx < 0) removeFromArray(player.currentActions, 'moving left');
if (movingLeftOrRight) player.lastAction = null;
});
//jump up when swiping up
$(document).on('swipeup', '#game', function() {
if ((player.currentAction !== 'jumping' || (player.currentAction === 'jumping' && (player.y === groundLocation || !noObstacleCollisions(player)))))
player.action('jumping');
});
//fire on middle screen tap (not touchstart to not conflict with jumping)
$(document).on('tap', '#game', function(e) {
var leftSide = e.pageX <= .10 * width; //left 10% of width
var rightSide = e.pageX >= .90 * width; //right 10% of width
if (!(leftSide || rightSide)) {
player.action('shooting');
}
});
谢谢!