html5 迷宮遊戲 碰撞檢測 例項一

2022-09-22 01:48:10 字數 808 閱讀 7447

遊戲效果圖

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

需要解決的問題

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

多邊形的繪製

牆壁的繪製

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

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值就可以得到距離圓心最近的點

本文標題: html5 迷宮遊戲(碰撞檢測)例項一

本文位址:

html5 迷宮遊戲 碰撞檢測

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

遊戲中的碰撞檢測

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

遊戲中的碰撞檢測

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