Html飛機大戰(十七): 優化移動端

来源:https://www.cnblogs.com/FatTiger4399/archive/2022/09/21/16708996.html
-Advertisement-
Play Games

好家伙,繼續優化, 好家伙,我把我的飛機大戰發給我的小伙伴們玩 期待著略微的贊賞之詞,然後他們用手機打開我的給他們的網址 然後點一下飛機就炸了。 游戲體驗零分 (滑鼠點擊在移動端依舊可以生效) 好了所以我們來優化一下這個觸屏移動事件 由於沒有參考,就去翻文檔了 觸摸事件分三個:touchstart、 ...


好家伙,繼續優化,

 

好家伙,我把我的飛機大戰發給我的小伙伴們玩

期待著略微的贊賞之詞,然後他們用手機打開我的給他們的網址

然後點一下飛機就炸了。

游戲體驗零分

(滑鼠點擊在移動端依舊可以生效)

 

好了所以我們來優化一下這個觸屏移動事件

 

由於沒有參考,就去翻文檔了

觸摸事件分三個: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)

 

 

 (此處為平板模式,完成了觸屏連續移動)

效果還行

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 摘要:RDS關係型資料庫是一種基於雲計算平臺的即開即用、穩定可靠、彈性伸縮、便捷管理的線上關係型資料庫服務。 本文分享自華為雲社區《一致性處理事務這下還是看RDS的吧【秋招特訓】》,作者:樣子的木偶。 什麼是RDS? RDS關係型資料庫是一種基於雲計算平臺的即開即用、穩定可靠、彈性伸縮、便捷管理的在 ...
  • 一、 登錄 1.1 登錄預設資料庫 首先切換到oracle用戶,用資料庫預設管理員登錄。 [root@tsm-zh01 ~]# su – oracle [oracle@redhat ~]$ lsnrctl start #開啟監聽 [oracle@tsm-zh01 ~]$ sqlplus / as s ...
  • 對於一個服務端開發來說 MYSQL 可能是他使用最熟悉的資料庫工具,然而,大部分的Java工程師對MySQL的瞭解和掌握程度,大致就停留在這麼一個階段:它可以建庫、建表、建索引,然後就是對裡面的數據進行增刪改查,語句性能有點差?沒關係,在表裡建幾個索引或者調整一下查詢邏輯就可以了,一條sql,MYS... ...
  • 在數字化時代的今天,我們都認同數據會創造價值。為了最大化數據的價值,我們不停的建立著數據遷移的管道,從同構到異構,從關係型到非關係型,從雲下到雲上,從數倉到數據湖,試圖在各種場景挖掘數據的價值。而在這縱橫交錯的數據網路中,邏輯複製扮演著及其重要的角色。 讓我們將視角從複雜的網路拉回其中的一個端點,... ...
  • 2022年9月2日,日本MIC(総務省)發佈了“電波法施行規則等の一部を改正する省令(令和4年総務省令第59號)”省令,更新了Wi-Fi 6E Band 5頻帶5925 ~ 6425 MHz的技術要求。隔天(9月3日),日本DSP機構發佈了“「6GHz帯小電力データ通信システム」の特性試験方法”,為 ...
  • AU上傳ipa出現下圖紅框提示說明成功上傳,如果App Store後臺沒有出現構建版本, 請登錄 apple賬號對應的郵箱查看反饋,特別留意垃圾郵箱,無論成功還是失敗,apple都會發郵件 一、首先登錄iTunes Connect 後臺、查看ipa構建情況 https://appstoreconne ...
  • 現如今,人們在網上聊天、發帖時越來越愛用表情包,表情包一方面是一種個性化的表達方式,另一方面更能傳達出當下的心理活動,可以說在網路社交中表情包是一個不可或缺的存在。加上近年來元宇宙的興起,3D虛擬形象廣泛應用,用戶可以通過自己的表情來控制虛擬形象的表情,做一系列專屬的表情包,更加生動形象。 那麼,如 ...
  • ##vue+element-ui後臺管理系統模板 前端:基於vue2.0+或3.0+加上element-ui組件框架 後端:springboot+mybatis-plus寫介面 通過Axios調用介面完成數據傳遞 通過router路由完成各頁面的跳轉 ###全局配置 App.vue <templat ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...