js中的Breakout游戏中的触摸事件

Question

我想在越狱游戏中通过触摸来移动划桨。我试着让它作为mouseover事件，但它不能工作，尽管当它用作mouseover事件时它可以工作：

document.addEventListener("touchmove", funcTouchMove, false)


function funcTouchMove(e) {
    var relativeX = e.clientX - canvas.offsetLeft;
    if(relativeX > 0 && relativeX < canvas.width) {
    paddleX = relativeX - paddleWidth/2;
    }
}

通常的目的是触摸球拍，左右移动，像鼠标悬停事件一样玩。如果你有想法，我将不胜感激！

Answer 1

我通过添加以下代码使其正常工作：

document.addEventListener("touchmove", touchMoveHandler, false);

function touchMoveHandler(event) { 
  var relativeX = event.touches[0].clientX - canvas.offsetLeft;
  if(relativeX > 0 && relativeX < canvas.width) {
    paddleX = relativeX - paddleWidth/2;
  }
}

更新:如果画布不在页面的边缘，代码的X触摸读数就会偏左。下面的代码让它在您的指尖下跟随。

 var relativeX = event.touches[0].clientX - canvas.getBoundingClientRect().left;

Answer 2

有touchstart、touchend、touchmove事件。也许你就是在找那个？

例如，为操纵杆创建一个画布，并附加这些事件，如

canvasJoy.addEventListener("touchstart", inputStart, false);
canvasJoy.addEventListener("touchend", inputEnd, false);
canvasJoy.addEventListener("touchmove", inputMove, false);