タッチスタートハンドラの処理後のtouchmoveハンドラ

Question

touchmoveイベントに問題があります。ユーザーがディスプレイに触れると（タッチスタート）、touchmoveイベントハンドラとgame()が実行され、ユーザーが画面を離れる場合はすべてを停止する必要があります。しかし、間隔のif条件は、e.pageXとe.pageYが常にタッチスタートの座標を持ち、ユーザーが画面上で指を動かすとその値が更新されないため正しく動作しません。これをどうすれば解決できますか？ 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：私は'touchstart mousedown touchmove mousemove': function (e) {にそれを編集した場合、衝突検出と更新がうまく機能を調整するが、アニメーションはいけません。

Answer 1

ユーザーが指を動かすときにコードが座標を更新しないようにします。

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