Html飞机大战(十七): 优化移动端

好家伙，继续优化，

 

好家伙，我把我的飞机大战发给我的小伙伴们玩

期待着略微的赞赏之词，然后他们用手机打开我的给他们的网址

然后点一下飞机就炸了。

游戏体验零分

（鼠标点击在移动端依旧可以生效）

 

好了所以我们来优化一下这个触屏移动事件

 

由于没有参考，就去翻文档了

触摸事件分三个：touchstart、touchmove和touchend

看名字大概是触摸点开始，触摸点移动，触摸点离开。

 

于是开始试探性的增加一个屏幕触碰事件

//为canvas绑定一个屏幕触碰事件 触碰点正好在飞机图片的正中心
    canvas.addEventListener("touchstart",(e)=>{
      let x = e.offsetX;
      let y = e.offsetY;
      hero.x = x - hero.width / 2;
      hero.y = y - hero.height / 2;
    })

然后就寄了，参数有问题。

移动触点事件touchstart事件是不能直接拿到鼠标在canvas画布中的坐标。

参数e.offsetX直接就报undefind

 

去查百度了：

javaScript — touch事件详解（touchstart、touchmove和touchend） - 腾讯云开发者社区-腾讯云 (tencent.com)

（挺详细的）

每个Touch对象包含的属性如下。

 clientX：触摸目标在视口中的x坐标。
 clientY：触摸目标在视口中的y坐标。
 identifier：标识触摸的唯一ID。
 pageX：触摸目标在页面中的x坐标。
 pageY：触摸目标在页面中的y坐标。
 screenX：触摸目标在屏幕中的x坐标。
 screenY：触摸目标在屏幕中的y坐标。
 target：触目的DOM节点目标。

 

还是拿不到鼠标在canvas的坐标

 

那我们试着拿到页面中的坐标然后再去进行加减操作，然后还是不行

 

好家伙，拿不到鼠标移动时鼠标在canvas画布中的坐标，

 

所以，我们动点歪脑经

 

 

 

我们拿到屏幕坐标来计算就好了

 

canvas.addEventListener("touchmove", (e) => {
      // let x = e.pageX;
      // let y = e.pageY;
      console.log(e);
      // let x = e.touches[0].clientX;
      // let y = e.touches[0].clinetY;
      let x = e.touches[0].pageX;
      let y = e.touches[0].pageY;
      // let x = e.touches[0].screenX;
      // let y = e.touches[0].screenY;
      let write1 = (document.body.clientWidth - 480) / 2;
      let write2 = (document.body.clientHeight - 650) / 2;
      hero.x = x - write1 - hero.width / 2;
      hero.y = y - write2 - hero.height / 2;

      // hero.x = x - hero.width / 2;
      // hero.y = y - hero.height / 2;
      console.log(x, y);
      console.log(document.body.clientWidth, document.body.clientHeight);
      e.preventDefault(); // 阻止屏幕滚动的默认行为

    })

猜猜我干了什么

 

 我们想办法用页面坐标减去空白部分长度就可以得到鼠标在canvas画布中的坐标了

纵坐标同理

（nice）

 

 

 （此处为平板模式，完成了触屏连续移动）

效果还行