Question

我想通过触摸在Breakout游戏中移动划桨。我试图将其作为鼠标悬停事件但它不起作用，尽管它在用作鼠标事件时起作用：

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事件。也许你在找那个？

e.g。创建一个操纵杆的画布并附加这些事件，如

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

在js的Breakout游戏中触摸事件

2 个答案: