如何在javascript中添加触摸事件(屏幕右侧,左侧和下侧)?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (31)

我正在研究js并制作俄罗斯方块游戏。我已经在PC dispositives中制作了它,但我想在移动设备上添加一些触摸事件。但我放在这里:

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()作品。我怎样才能做到这一点?谢谢。

提问于
用户回答回答于

这是一个关于如何拆分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比较的值,并为“底部”提供更多或更少的空间

扫码关注云+社区

领取腾讯云代金券