touchstart işleyicisi touchstart işlemciden sonra işe yaramaz

Question

Bir touchmove olayında sorun yaşıyorum. Kullanıcı ekrana dokunduğunda (touchstart) touchmove olay işleyicisi ve game() çalıştırılmalı ve kullanıcı ekrandan ayrılırsa her şey durdurulmalıdır. Ancak, collisiondetection aralığının koşulları doğru çalışmıyorsa, e.pageX ve e.pageY her zaman touchstart koordinatlarına sahiptir ve kullanıcı parmaklarını (touchmove) ekrana getirdiğinde değerlerini güncelleştirmez. Bunu nasıl düzeltebilirim? 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); 
    } 
}); 

GÜNCELLEME: Ben 'touchstart mousedown touchmove mousemove': function (e) { için çarpışma algılama düzenleyebilir ve güncellenmesi de çalışmalarını koordine ancak animasyon yok edin.

Answer 1

Kullanıcıların parmaklarını hareket ettirdiklerinde kodunuzun koordinatları güncellememesi gerekmez.

$("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); 
    } 
});