如何在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比较的值，并为“底部”提供更多或更少的空间