3

我已经为此奋斗了两天。我正在使用一个名为 ImpactJS 的 HTML5/JS 游戏引擎，有人制作了一个非常有用的插件来为移动设备创建操纵杆触摸区。这个想法是您在屏幕上指定一个区域，当该区域被触摸时，操纵杆被激活。

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

我确定我在这里做错了什么，但是虽然我可以让触摸区域自己完美地工作，但每次我尝试同时使用两个操纵杆时，它们都会部分地相互覆盖。

我在游戏初始化时指定了两个区域，如下所示：

    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 负责玩家加速。在我的 Player 实体中，我有两个操纵杆的以下移动代码。同样，当我只有一根手指在屏幕上/一个正在使用的操纵杆上时，这非常有效：

            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;
            }
        }

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

我发现 touchStart.x 和 touchStart.y 似乎在我点击以使用另一个操纵杆而不只是相关的操纵杆 1 或操纵杆 2 时为两个操纵杆设置，即使在插件代码中这些坐标只是为了受到影响如果该操纵杆的触摸在指定区域内。我相信这部分是造成这个问题的原因。在这个阶段，我已经花了几个小时试图弄清楚这一点，并且就像我开始时一样迷茫。

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

4

2 回答 2

2

您正在使用的操纵杆脚本只是寻找第一根手指。以下来自第 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/

于 2012-10-23T14:14:13.183 回答
0

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

遍历 ev.touches 集合并查看每次触摸是否落入热区将是一个简单的解决方案。如果它落在热区 1 下，则将其视为操纵杆 1 的触摸。如果它落在热区 2 下，则将其视为操纵杆 2 的触摸。

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

于 2012-10-24T08:12:17.520 回答