Html5 Canvas動畫基礎碰撞檢測的實現

在canvas中進行碰撞檢測，大家往往直接採用遊戲引擎(cocos2d-js、egret)或物理引擎(box2d)內建的碰撞檢測功能，好奇的你有思考過它們的內部執行機制嗎？下面將針對基本的碰撞檢測技術進行講解：

1、基於矩形的碰撞檢測

所謂碰撞檢測就是判斷物體間是否發生重疊，這裡我們假設討論的碰撞體都是矩形物體。下面示例中我們將建立兩個rect物件a和b(以下簡稱a,b)，其中a位置固定，b跟隨滑鼠移動，當a,b重疊時控制台將提示intercect！！

1、建立rect物件

這裡我們新建rect.js，建立rect物件並為其新增原型方法draw,該方法將根據當前物件的屬性(位置、大小)繪製到傳入的畫布物件（context）中。

**如下：

function rect(x,y,width,height)

rect.prototype.draw = function(context)

2、獲取滑鼠位置

因為b需要跟隨滑鼠移動所以我們需要檢測滑鼠在畫布的當前位置。建立capturemouse函式檢測滑鼠在傳入的文件節點（element）上的移動並返回乙個mouse物件（其中包含了滑鼠的x，y座標）。

**如下：

function capturemouse (element) ;

element.addeventlistener('mousemove',function (event) else

x -=element.offsetleft;

y -=element.offsettop;

mouse.x = x;

mouse.y = y;

},false);

return mouse;

}3、碰撞檢測

檢測a,b是否發生重疊，在討論是否發生重疊時我們可以先看看沒有重疊的四種情況，如下圖：

以下是對這四種狀態的判斷：

1、rectb.y+rectb.height < recta.y

2、rectb.y >; recta.x +recta.width

3、rectb.y > recta.y + recta.height

4、rectb.x+rectb.width < recta.x

知道如何判斷沒有重疊的狀態，那發生重疊的狀態該如何判斷呢？沒錯「取反」！，我們建立函式interaect並新增到init.js中，該函式傳入兩個rect物件引數，當兩rect物件發生重疊將返回true。

**如下：

function intersect(recta,rectb)

4、動畫迴圈

新建animationjs，設定requestanimationframe()動畫函式。

在迴圈體中將做以下兩件事：

**如下：

function drawanimation()

if(mouse.x)

recta.draw(context);

rectb.draw(context);

}3、初始化

新建init.js ,獲取canvas元素並繫結滑鼠移動檢測，初始化rect物件a和b，最後開啟動畫迴圈。

**如下：

window.onload = function ()

2、基於圓形的碰撞檢測

說完矩形碰撞，我們再來聊聊圓形碰撞，同樣我們將建立兩個circle物件a和b(以下簡稱a,b)，其中a位置固定，b跟隨滑鼠移動，當a,bmveqple重疊時控制台將提示intercect！！

1、建立circle物件

function circle(x,y,radius)

circle.prototype.draw = function(context)

2、檢測圓形碰撞

圓形間碰撞檢測可以簡單地通過兩圓心間距離與兩圓半徑之和的比較做判斷，當兩圓心距離小於兩圓半徑之和時則發生碰撞。

如下圖：

所以我們首先需要做的是計算出兩圓心間的距離，這裡我們將用到兩點間的距離公式，如下：

當取得兩圓心間的距離之後將與兩圓半徑之和比較，如果距離小於半徑之和則返回true。

現在我們更新interaect函式。

**如下：

function intersect(circlea,circleb)

3、動畫迴圈

更新animation.js，這裡我們替換rect物件為circle物件。

**如下：

function drawanimation()

if(mouse.x)

circlea.draw(context);

circleb.draw(context);

}4、初始化

更新init.js ,初始化circle物件a和b，最後開啟動畫迴圈。

**如下：

window.onload = function ()

3、基於矩形與圓形間的碰撞檢測

前面講解都是單一形狀間的碰撞檢測，下面我們將檢測矩形和圓形間的碰撞。

1、檢測碰撞

和矩形檢測一樣，我們先看看沒有發生碰撞的四種情況。

如下圖：

以下是對這四種狀態的判斷：

更新interaect函式，將沒有重疊的狀態&lmveqpledquo;取反」，向該函式傳入rect物件和circle物件，當rect物件與circle物件發生重疊將返回true。

**如下：

function intersect(rect,circle)

2、動畫迴圈

更新animation.js，這裡我們將circle物件跟隨滑鼠運動，並檢測與固定位置的rect物件的碰撞。

**如下：

function drawanimation()

if(mouse.x)

circle.draw(context);

rect.draw(context);

}3、初始化

更新init.js ,初始化circle物件和rect物件，最後開啟動畫迴圈。

**如下：

window.onload = function ()

本文標題: html5 canvas動畫基礎碰撞檢測的實現

本文位址: /web/html5/208698.html

Html5 Canvas動畫基礎碰撞檢測的實現

Html5 Canvas動畫基礎碰撞檢測的實現

HTML5 Canvas眨眼睛動畫

HTML5 canvas 繪製圓形

Html5 Canvas動畫基礎碰撞檢測的實現

Html5 Canvas動畫基礎碰撞檢測的實現

HTML5 Canvas眨眼睛動畫

HTML5 canvas 繪製圓形

相關推薦