如何在javascript中添加触摸事件（屏幕右、左、下）？

Question

正在学习js，正在做俄罗斯方块游戏。我已经在 PC 处理器中实现了它，但我想在移动处理器上的游戏中添加一些触摸事件。但我坚持这一点：

function touchEnd(e) {
        if (Math.abs(offset[0]) > Math.abs(offset[1])) {
            playerMove(-1);
        }
        else if (Math.abs(offset[0]) < Math.abs(offset[1])) {
            playerDrop();
        }
}

（上面这段代码我遇到了问题）

我的想法是，当玩家触摸（而不是拖动）屏幕左侧 (canvas) 时，playerMove(-1) 有效，当您触摸右侧时，playerMove(1); 有效，当您触摸屏幕底部时，playerDrop() 有效。我怎样才能做到这一点？谢谢。

Answer 1

这是一个关于如何拆分 HTMLElement 并基于它发送操作的示例

let box; 

document.addEventListener('DOMContentLoaded', ()=>{
  box = document.querySelector('#test');
  box.addEventListener('click', chooseSide);
});

function chooseSide(e){
  const {clientX, clientY} = e;
  const {clientHeight, clientWidth} = box
  if(clientY > (clientHeight/ 2)){
    console.log('bottom')
  }else if(clientX < (clientWidth/ 2)){
    console.log('left')
  } else{
    console.log('right')
  }
}

#test {
  box-sizing: border-box;
  width: 100vmin;
  height: 100vmin;
  border: 10px solid #f00;
}

<canvas id="test"></canvas>

您可以更改 Y 比较的值，并为 "bottom" 赋予更多或更少的 space

如何在javascript中添加触摸事件（屏幕右、左、下）？

How to add a touch event (right, left and down at the screen) in javascript?

javascript

canvas

mobile

touch

tetris