Question

我和他一直在争吵两天。我正在使用名为ImpactJS的HTML5 / JS游戏引擎，有人制作了一个非常有用的插件来为移动设备创建操纵杆触摸区。我们的想法是，当触摸该区域时，您可以在屏幕上指定激活操纵杆的区域。

我使用的插件的代码是here。我稍微修改了它以添加“curPos”（用户当前正在触摸的点的x和y坐标），否则所有代码都是相同的。我一直试图自己解决这个问题以及联系原始创作者，但是现在它们似乎无法到达，我无处可去。

我确定我在这里做了一些非常错误的事情，但是当我可以让触摸区完全独立工作时，每当我尝试同时使用两个操纵杆时它们会部分地相互覆盖。 / p>

我在游戏初始化时指定了两个区域：

    this.joystick1 = new TouchJoystickZone(0, 0, ig.system.width / 2, ig.system.height);
    this.joystick2 = new TouchJoystickZone(ig.system.width / 2, 0, ig.system.width / 2, ig.system.height);

this.joystick1负责玩家轮换。 this.joystick2负责玩家加速。在我的玩家实体中，我有两个操纵杆的以下移动代码。同样，当我在屏幕上只有一根手指/使用一个操纵杆时，这种方法非常有效：

            if( ig.ua.mobile ) {
            // ROTATION
            if (ig.game.joystick1.touchStart.x > 0 && ig.game.joystick1.touchStart.x < ig.system.width/2) {
                if (Math.abs(ig.game.joystick1.delta.x) >= 50 || Math.abs(ig.game.joystick1.delta.y) >= 50) {
                    this.joystickAngle = ig.game.Controller.toDegrees(ig.game.Controller.joystickAngle());
                    if (this.angle > this.joystickAngle + 20) {
                        this.angle -= this.turnSpeed * ig.system.tick;
                    }

                    else if (this.angle < this.joystickAngle - 20) {
                        this.angle += this.turnSpeed * ig.system.tick;
                    }

                    else {
                        this.angle = this.joystickAngle;
                    }
                } 
            }

            // THRUST
            if (ig.game.joystick2.touchStart.x > ig.system.width / 2) {
                if (ig.game.joystick2.delta.y <= -50) {
                    this.accel.x = Math.cos(this.angle*Math.PI/180)*this.thrust;
                    this.accel.y = (Math.sin(this.angle*Math.PI/180)*this.thrust);
                    this.fuel -= 0.1;
                }

                else if (ig.game.joystick2.delta.y >= 50) {
                    this.accel.x = Math.cos(this.angle*Math.PI/180)*-this.thrust;
                    this.accel.y = (Math.sin(this.angle*Math.PI/180)*-this.thrust);
                    this.fuel -= 0.1;
                }

            }

            else {
                this.accel.x = 0;
                this.accel.y = 0;
            }
        }

然而，只要我将第二根手指放在屏幕上，第一个操纵杆就会被覆盖。我可以旋转，然后移动或移动，然后旋转，它工作正常，但我需要同时做两个。

我发现当我点击使用另一根操纵杆而不仅仅是相关的操纵杆1或操纵杆2时，似乎正在为两个操纵杆设置touchStart.x和touchStart.y，即使在插件代码中这些坐标仅仅意味着如果该操纵杆的触摸位于指定区域内，则会受到影响。我认为这部分是造成这个问题的原因。在这个阶段，我花了好几个小时试图解决这个问题，就像我开始时一样迷失。

有人可以同时使用这两个操纵杆指出我正确的方向吗？

Answer 1

您使用的操纵杆脚本只是寻找第一根手指。以下是第47-48行

    var x = ev.touches[0].pageX - pos.left,
        y = ev.touches[0].pageY - pos.top;

'0'确定要跟踪的手指。

将更改脚本以了解哪个手指在哪个元素上，然后仅跟踪该手指。你可以通过确定首先按或按位置按哪个元素来做到这一点。

JSFiddle示例：http://jsfiddle.net/7WR88/5/

http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Answer 2

正如@Dcullen所提到的，从第一次触摸开始，每个事件可能会有多次触摸。

迭代ev.touches集合并查看每次触摸是否属于热区将是一个简单的解决方案。如果它属于热区1，请将其视为操纵杆1的触摸。如果它属于热区2，请将其视为操纵杆2的触摸。

这意味着触摸出现的顺序并不重要，因为如果它们靠近它们，它们将始终映射到正确的操纵杆。

试图让两个同时操纵杆与触摸事件一起工作

2 个答案: