html5 迷宮遊戲碰撞檢測

遊戲效果圖

通過滑鼠拖拽在畫布上新增牆壁，通過方向鍵控制多邊形上下左右移動，遇到牆壁則無法前進。

需要解決的問題

滑鼠按下，滑鼠拖動，滑鼠釋放事件的檢測

多邊形的繪製

牆壁的繪製

多邊形和牆壁的碰撞檢測(實質上是圓和線段的相交判斷)

mycode:

迷宮

難點多邊形和線段碰撞檢測的方法

函式intersect()負責檢測多邊形和線段是否相交

記線段上一點p(x,y)

線段2個端點是(sx,sy)和(fx,fy)

記dx=fx-sx

dy=fy-sy

x和y可以表示如下

x=sx+t*dx

y=sy+t*dy

要判斷線段和多邊形是否相交，轉化為判斷線段和多邊形的外接圓是否相交

為此需要找到線段上離圓心o最近的一點p

如果|op|《圓的半徑,則可以判斷線段和圓相交。

否則不相交。

怎麼找到線段上離圓心距離最近的點呢？

p點到o點的距離可以表示為

distance=sqrt((x-cx)*(x-cx)+(y-cy)*(y-cy));

代入x=sx+t*dx和y=sy+t*dy

可以得到distance是乙個關於t的函式

對此函式求導

求出函式值為0時對應的t值就可以得到距離圓心最近的點

遊戲效果圖通過滑鼠拖拽在畫布上新增牆壁，通過方向鍵控制多邊形上下左右移動，遇到牆壁則無法前進。需要解決的問題滑鼠按下，滑鼠拖動，滑鼠釋放事件的檢測多邊形的繪製牆壁的繪製多邊形和牆壁的碰撞檢測實質上是圓和線段的相交判斷 mycode 複製如下迷宮難點多邊形和線段碰撞檢測的方法函式...

遊戲中的碰撞檢測方式有很多，不同的演算法之間主要是在精度和速度之間權衡。以下幾種方式按照速度排序說明。以2d為例，3d不過是增加了一維罷了，演算法理解上沒太大區別。一地圖格仔劃分檢測最簡單的一種檢測，就是把地圖或者稱為場景，總之是指碰撞發生的範圍劃成乙個個格仔，類似仙劍奇俠傳這樣。假設地圖有...

html5 迷宮遊戲 碰撞檢測