Конфликтующий JavaScript для перемещения гироскопа и перемещения по сенсорному экрану на iOS, как я могу приостановить одну часть, когда вторая используется?

Question

Я немного набираю вес с помощью некоторого кода JavaScript в веб-приложении для iOS.

То, что я делаю, это перемещение слоя над другим слоем, используя:

1. Данные гироскопа и акселерометра и
2. Сенсорный ввод.

Это означает, что у меня есть два кусочка JavaScript, которые пытаются переместить одно и то же. Это работает не так хорошо, как вы можете видеть из текущей версии при просмотре на устройстве iOS (подсказка: прозрачность включена с помощью кнопки справа, и нет, ее нельзя перемещать с помощью правой кнопки мыши сейчас и не будет двигаться, если вы не используете устройство iOS с гироскопом).

Итак, я выполнил трудные задачи, но я застрял на том, что, как я ожидаю, является уловкой, основанной на моем новом уровне (ish) уровня владения JavaScript.

Как я могу остановить код гироскопа, когда код сенсорного движения активен? Кроме того, я думаю, мне нужно обновить значения x+y, чтобы прозрачность не переместилась после завершения касания.

Я попытался добавить оператор if, else в верхнюю часть кода, но это, кажется, нарушает все.

КСТАТИ спасибо всем на Stackru, предыдущие Q и As были огромной помощью в получении меня так далеко.

Помощь будет наиболее ценной.

Стефан

Вот мой код, он живет в элементе body...

var x = 0, y = 0,
    vx = 0, vy = 0,
    ax = 0, ay = 0;

var transp = document.getElementById("transp");

if (window.DeviceMotionEvent != undefined) {
    window.ondevicemotion = function(e) {
        ax = event.accelerationIncludingGravity.x * 5;
        ay = event.accelerationIncludingGravity.y * 5 + 19;
        document.getElementById("accelerationX").innerHTML = e.accelerationIncludingGravity.x;
        document.getElementById("accelerationY").innerHTML = e.accelerationIncludingGravity.y;
        document.getElementById("accelerationZ").innerHTML = e.accelerationIncludingGravity.z;

        if ( e.rotationRate ) {
            document.getElementById("rotationAlpha").innerHTML = e.rotationRate.alpha;
            document.getElementById("rotationBeta").innerHTML = e.rotationRate.beta;
            document.getElementById("rotationGamma").innerHTML = e.rotationRate.gamma;
        }       
    }

    setInterval( function() {
        var landscapeOrientation = window.innerWidth/window.innerHeight > 1;
        if ( landscapeOrientation) {
            vx = vx + ay;
            vy = vy + ax;
        } else {
            vy = vy - ay;
            vx = vx + ax;
        }
        vx = vx * 0.98;
        vy = vy * 0.98;
        y = parseInt(y + vy / 70);
        x = parseInt(x + vx / 70);

        boundingBoxCheck();

        transp.style.top = y + "px";
        transp.style.left = x + "px";

    }, 25);
} 


function boundingBoxCheck(){
    if (x<-310) { x = -310; vx = -vx; }
    if (y<-300) { y = -300; vy = -vy; }
    if (x>document.documentElement.clientWidth) { x = document.documentElement.clientWidth; vx = -vx; }
    if (y>document.documentElement.clientHeight+400) { y = document.documentElement.clientHeight+400; vy = -vy; }

}

    $.fn.moveable = function() {  
      var offset = null;  
      var start = function(e) {  
        var orig = e.originalEvent;  
        var pos = $(this).position();  
        offset = {  
          x: orig.changedTouches[0].pageX - pos.left,  
          y: orig.changedTouches[0].pageY - pos.top  
        };  
      };  
      var moveMe = function(e) {  
        e.preventDefault();  
        var orig = e.originalEvent;  
        $(this).css({  
          top: orig.changedTouches[0].pageY - offset.y,  
          left: orig.changedTouches[0].pageX - offset.x  
        });  
      };  
      this.bind("touchstart", start);  
      this.bind("touchmove", moveMe);  
    };  

    $(".moveable").moveable();  

Answer 1

Моей первой мыслью было бы иметь переменную isTouching, которая будет установлена ​​в true на сенсорном пуске и установлена ​​в false на touchEnd. Затем, используя условный код, гироскоп будет работать только в том случае, если переменная isTouching имеет значение false. Надеюсь, это поможет.