如何在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();
        }
}

（我在上面的代码中遇到了问题）

我的想法是当玩家触摸（而不是拖动）屏幕（画布）左侧时，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 比较的值，并为“底部”提供更多或更少的空间