TouchMove-Handler nach Touchstart-Handler wird nicht funktionieren

Question

Ich habe ein Problem mit einem TouchMove-Ereignis. Wenn der Benutzer das Display berührt (Touchstart), sollte der touchmove Event-Handler und game() ausgeführt werden und wenn der Benutzer den Bildschirm verlässt, sollte alles gestoppt werden. Aber dann funktionieren die if-Bedingungen für das collisiondetection Intervall nicht richtig, weil e.pageX und e.pageY immer die Koordinaten des Touchstart haben und ihre Werte nicht aktualisieren, wenn der Benutzer seinen Finger (touchmove) auf dem Bildschirm bewegt. Wie kann ich das beheben? demo

$("body").on({ 
    'touchstart mousedown': function (e) { 
     $(this).on('touchmove mousemove'); 

     collisiondetection = setInterval(function() { 
      var xp1 = $("#n1").position(); 
      if (e.pageY >= xp1.top && e.pageY <= xp1.top + cy * 10 && e.pageX >= xp1.left && e.pageX <= xp1.left + cx * 25) { 
       console.log("hit"); 
      } 
      var xp2 = $("#n2").position(); 
      if (e.pageY >= xp2.top && e.pageY <= xp2.top + cy * 10 && e.pageX >= xp2.left && e.pageX <= xp2.left + cx * 25) { 
       console.log("hit"); 
      } 
     },10); 

     game(); 
    }, 
    'touchend mouseup': function (e) { 
     $(this).off('touchmove mousemove'); 
    clearInterval(animaterects); 
    clearInterval(collisiondetection); 
    } 
}); 

UPDATE: Wenn ich es 'touchstart mousedown touchmove mousemove': function (e) { die Kollisionserkennung bearbeiten und die Aktualisierung funktioniert gut koordiniert aber die Animation nicht.

Answer 1

Da Ihr Code die Koordinaten nicht aktualisiert, wenn Benutzer ihre Finger bewegen.

$("body").on({ 
    'touchstart mousedown': function (e) { 
     var pageX = e.pageX 
     var pageY = e.pageY; 
     $(this).on('touchmove mousemove',function(e){ 
      pageX = e.pageX; 
      pageY = e.pageY; 
     }); 

     collisiondetection = setInterval(function() { 
      var xp1 = $("#n1").position(); 
      if (pageY >= xp1.top && pageY <= xp1.top + cy * 10 && pageX >= xp1.left && pageX <= xp1.left + cx * 25) { 
       console.log("hit"); 
      } 
      var xp2 = $("#n2").position(); 
      if (pageY >= xp2.top && pageY <= xp2.top + cy * 10 && pageX >= xp2.left && pageX <= xp2.left + cx * 25) { 
       console.log("hit"); 
      } 
     },10); 

     game(); 
    }, 
    'touchend mouseup': function (e) { 
     $(this).off('touchmove mousemove'); 
    clearInterval(animaterects); 
    clearInterval(collisiondetection); 
    } 
});