好家伙,继续优化,
好家伙,我把我的飞机大战发给我的小伙伴们玩
期待着略微的赞赏之词,然后他们用手机打开我的给他们的网址
然后点一下飞机就炸了。
游戏体验零分
(鼠标点击在移动端依旧可以生效)
好了所以我们来优化一下这个触屏移动事件
由于没有参考,就去翻文档了
触摸事件分三个: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)
(此处为平板模式,完成了触屏连续移动)
效果还行
标签:十七,touches,hero,触摸,canvas,大战,Html,let,坐标 From: https://www.cnblogs.com/FatTiger4399/p/16708996.html