首页 > 其他分享 >Html飞机大战(十七): 优化移动端

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

时间:2022-09-21 23:55:08浏览次数:89  
标签:十七 touches hero 触摸 canvas 大战 Html let 坐标

好家伙,继续优化,

 

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

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

然后点一下飞机就炸了。

游戏体验零分

(鼠标点击在移动端依旧可以生效)

 

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

 

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

触摸事件分三个: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

相关文章

  • 【前端】HTML编码效提升:快速生成HTML标签
    目录1.生成多级标签2.生成同级标签3.生成注释4.生成多个相同标签5.生成带class标签6生成带id标签.7.生成带内容标签18.生成带内容标签29.生成带属性标签GIF演示:快速生成HT......
  • 前端学习笔记--HTML5
    网页的优点(客户端为网页)(B/S)模式开发成本低)不需要安装无需更新跨平台(最重要)可以有效的减小开发成本传统的为C/S模式,开发成本高前端工程师负责写网页的源代码,而浏览......
  • HTML5和原生app如何进行交互,有什么方法
    H5与原生app交互的原理现在移动端web应用,很多时候都需要与原生app进行交互、沟通(运行在webview中),比如微信的jssdk,通过window.wx对象调用一些原生app的功能。......
  • vue中使用html video标签,写中间暂停图标2
    一篇汇总video事件的文章,方便查阅:https://blog.csdn.net/xuehu837769474/article/details/107532487html部分<divclass="content"><videowidth="......
  • 什么是 HTML?前端入门基础教程,带您全面认识HTML
    HTML或超文本标记语言允许Web用户使用元素、标签和属性创建和构造部分、段落和链接。然而,值得注意的是,HTML不被视为一种编程语言,因为它不能创建动态功能。  H......
  • HTML语义化标签 有哪些?
    html每个标签都有自己的含义,语义化是指使用语义恰当的标签,是页面结构更清晰,页面元素有含义,让人容易理解常见的有:header:定义页面的展示区域,通常包含logo,导航,搜索......
  • java去掉html标签,只留文本内容
    publicstaticStringdelHTMLTag(StringhtmlStr){StringregEx_script="<script[^>]*?>[\\s\\S]*?<\\/script>";//定义script的正则表达式StringregE......
  • [踩坑回顾]html不使用浏览器缓存
    开发过程中遇到版本发布之后需要修改页面静态资源的问题,但由于初版没有设置不使用浏览器缓存,只好更换了页面地址。建议以后开发都在<head>中加上:<metahttp-equiv="......
  • 2022 年 5 个用于 Web 开发的最佳 HTML 和 CSS 课程
    2022年5个用于Web开发的最佳HTML和CSS课程互联网已成为我们日常生活的重要组成部分,不断发展以连接全球越来越多的人。但是要了解现代网络的运作方式,您不仅需......
  • html篇
    BS架构和http协议bs架构的服务端和客户端来模拟http请求服务端.py#-*-encoding:utf-8-*-#@time:2022/9/1611:20#@author:Maxs_huimportsockets=socke......