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