資訊專欄INFORMATION COLUMN
摘要：求邊長度的方法，在之前的文章中已多次介紹，在此不再贅述。第二碰撞上之后，速度如何分解我們要求的小球的碰撞速度，其他就是求單位時間內和值的變化情況，也就是速度必須分解為水平方向和垂直方向，清楚這個之后，我們來看一下如何分解速度。
我們先看下實現(xiàn)的效果
注：本文的作用是拋磚引玉，并未實現(xiàn)原理一樣的綠球的碰撞，也未考慮質量和能量損耗對碰撞的影響
需要先解決兩個問題第一：怎么判斷是否已經碰上了？
我們先來看一下剛好碰撞的分析圖：
其實也很簡單，只要比較c邊的長度和兩個球的半徑和就可以，如果c邊的長度<=兩球半徑和，則已經碰撞上。求c邊長度的方法，在之前的文章中已多次介紹，在此不再贅述。
第二：碰撞上之后，速度如何分解？
我們要求的小球的碰撞速度，其他就是求單位時間內left和top值的變化情況，也就是速度必須分解為水平方向和垂直方向，清楚這個之后，我們來看一下如何分解速度。
如圖所示，speedX為藍色小球的運動速度，α為兩球的碰撞角度，那么根據(jù)平行四邊形法則，我們可以把speedX分解為速度s1和速度s2，兩球的碰撞方向只有s1一個方向，所以我們要對s1進行取反操作，也就是藍色小球實際的運動速度方向為黃色線條（注：此處為了簡化操作，沒有考慮碰撞期間能量的損耗以及質量對速度的影響）
再次分解
分解出來的s1和s2依然不在一個方向，依然沒有辦法進行速度的疊加，所以我們還需要對s1和s2進行再分解，如圖所示，把s1分解了水平方向的s11和垂直方向的s12，s2也進行同理的分解為s21和s22，這樣s11和s21可以在水平方向疊加，s12和s22可以在垂直方向疊加。
主要代碼實現(xiàn)// 對speedX分解得到的兩個速度 var s1 = Math.cos(deg) * speedX var s2 = Math.sin(deg) * speedX // 對s1進行水平和垂直分解 var s11 = Math.cos(deg) * s1 var s12 = Math.sin(deg) * s1 // 對s2進行水平和垂直分解 var s21 = Math.sin(deg) * s2 var s22 = Math.cos(deg) * s2 // 最終的疊加的水平速度和垂直速度 speedX = (s11 - s21) * -1 speedY = s12 + s22
要查看最終效果以及具體實現(xiàn)，請用力點我
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/84803.html
摘要：通用算法概念模型圓形與矩形之間的碰撞核心理念通過找出矩形上離圓心最近的點，然后通過判斷該點與圓心的距離是否小于圓的半徑，若小于則為碰撞。 碰撞檢測在前端游戲，設計拖拽的實用業(yè)務等領域的應用場景非常廣泛，今天我們就在這里對于前端JavaScript如何實現(xiàn)碰撞檢測算法進行一個原理上的探討，讓大家能夠明白如何實現(xiàn)碰撞以及碰撞的理念是什么：1.矩形與矩形間的碰撞核心理念判斷任意兩個（無旋轉）...
摘要：碰撞檢測邊界檢測在前端游戲，以及涉及拖拽交互的場景應用十分廣泛。這就涉及到碰撞檢測或者叫邊界檢測的問題了。若四邊均未發(fā)生重合，則未發(fā)生碰撞，反之則發(fā)生碰撞。目前業(yè)務有遇到碰撞需求，所以抽時間整理了下。 碰撞檢測（邊界檢測）在前端游戲，以及涉及拖拽交互的場景應用十分廣泛。 那么啥叫碰撞？JavaScript 又是如何檢測 DOM 發(fā)生碰撞的呢？ 碰撞，顧名思義，就是兩個物體碰撞在了一起，...
摘要：碰撞檢測邊界檢測在前端游戲，以及涉及拖拽交互的場景應用十分廣泛。這就涉及到碰撞檢測或者叫邊界檢測的問題了。若四邊均未發(fā)生重合，則未發(fā)生碰撞，反之則發(fā)生碰撞。目前業(yè)務有遇到碰撞需求，所以抽時間整理了下。 碰撞檢測（邊界檢測）在前端游戲，以及涉及拖拽交互的場景應用十分廣泛。 那么啥叫碰撞？JavaScript 又是如何檢測 DOM 發(fā)生碰撞的呢？ 碰撞，顧名思義，就是兩個物體碰撞在了一起，...
閱讀 654·2021-10-13 09:39
閱讀 1461·2021-09-09 11:53
閱讀 2657·2019-08-29 13:55
閱讀 731·2019-08-28 18:08
閱讀 2600·2019-08-26 13:54
閱讀 2415·2019-08-26 11:44
閱讀 1844·2019-08-26 11:41
閱讀 3796·2019-08-26 10:15
