Html5 Canvas動畫基礎（碰撞檢測）

憂傷的指彈發表於2018-11-23
HTMLCanvas動畫

在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) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
}

Rect.prototype.draw = function(context){
    context.save();
    context.translate(this.x,this.y);
    context.fillRect(0,0,this.width,this.height);
    context.restore();
}
複製程式碼

2、獲取滑鼠位置

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

程式碼如下：

function Capturemouse (element) {
    var mouse={x:null,y:null};
    element.addEventListener('mousemove',function (event) {
        var x, y;
        if(event.pageX || event.pageY){
            x = event.pageX;
            y = event.pageY;
        }else{
            x = event.clientX+document.body.scrollLeft+
                document.documentElement.scrollLeft;
            y = event.clientY+document.body.scrollTop+
                document.documentElement.scrollTop;
        }
        x -=element.offsetLeft;
        y -=element.offsetTop;
        mouse.x = x;
        mouse.y = y;
    },false);
    return mouse;
}複製程式碼

3、碰撞檢測

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

Html5 Canvas動畫基礎（碰撞檢測）

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

    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) {
    return !(rectB.y+rectB.height < rectA.y || rectB.y > rectA.x +rectA.width ||
        rectB.y > rectA.y + rectA.height|| rectB.x+rectB.width < rectA.x)
}複製程式碼

4、動畫迴圈

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

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

  1. “清空”當前canvas中內容，為繪製下一幀做準備。
  2. 檢測A,B是否發生重疊，若重疊則在控制檯輸出interact！！！
  3. 檢測當前滑鼠在canvas上的移動並將滑鼠位置更新到B的位置屬性中。
  4. 根據新的位置屬性重新繪製A,B（當然,A的位置不會更新但因為每次迴圈將清空canvas所以需要重新繪製）
程式碼如下：
function drawAnimation() {
    window.requestAnimationFrame(drawAnimation);
    context.clearRect(0, 0, canvas.width, canvas.height);
    if(Intersect(rectA,rectB)){
     console.log('interact!!!!');
    }
    if(mouse.x){
        rectB.x = mouse.x;
        rectB.y = mouse.y;
    }
    rectA.draw(context);
    rectB.draw(context);
}複製程式碼

3、初始化

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

程式碼如下：

window.onload = function () {
    canvas = document.getElementById('collCanvas');
    context = canvas.getContext('2d');
    Capturemouse(canvas);
    rectA = new Rect(canvas.width/2,canvas.height/2,100,100);
    rectB = new Rect(100,100,100,100);
    drawAnimation();
}複製程式碼


2、基於圓形的碰撞檢測

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

1、建立circle物件

function Circle(x,y,radius) {
    this.x = x;
    this.y = y;
    this.radius = radius;
}

Circle.prototype.draw = function(context){
    context.save();
    context.translate(this.x,this.y);
    context.beginPath();
    context.arc(0,0,this.radius,0,Math.PI*2,false);
    context.fill();
    context.restore();
}複製程式碼

2、檢測圓形碰撞

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

如下圖：

Html5 Canvas動畫基礎（碰撞檢測）

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

Html5 Canvas動畫基礎（碰撞檢測）

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

現在我們更新Interaect函式。

程式碼如下：

function Intersect(circleA,circleB) {
    var dx = circleA.x-circleB.x;
    var dy = circleA.y-circleB.y;
    var distance = Math.sqrt(dx*dx+dy*dy);
    return distance < (circleA.radius + circleB.radius);
}複製程式碼

3、動畫迴圈

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

程式碼如下：

function drawAnimation() {
    window.requestAnimationFrame(drawAnimation);
    context.clearRect(0, 0, canvas.width, canvas.height);
    if(Intersect(circleA,circleB)){
     console.log('interact!!!!');
    }
    if(mouse.x){
        circleB.x = mouse.x;
        circleB.y = mouse.y;
    }
    circleA.draw(context);
    circleB.draw(context);
}複製程式碼

4、初始化

更新Init.js ,初始化Circle物件A和B，最後開啟動畫迴圈。

程式碼如下：

window.onload = function () {
    canvas = document.getElementById('collCanvas');
    context = canvas.getContext('2d');
    Capturemouse(canvas);
    circleA = new Circle(canvas.width/2,canvas.height/2,100);
    circleB = new Circle(100,100,100);
    drawAnimation();
}複製程式碼


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

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

1、檢測碰撞

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

如下圖：

Html5 Canvas動畫基礎（碰撞檢測）

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

  1. Circle.y + Circle.radius < Rect.y
  2. Circle.x - Circle.radius > Rect.x + Rect.width
  3. Circle.y - Circle.radius > Rect.y + Rect.height
  4. Circle.x + Circle.radius < Rect.x
更新Interaect函式，將沒有重疊的狀態“取反”，向該函式傳入Rect物件和Circle物件，當Rect物件與Circle物件發生重疊將返回true。

程式碼如下：

function Intersect(Rect,Circle) {
    return !(Circle.y + Circle.radius < Rect.y ||
             Circle.x - Circle.radius > Rect.x + Rect.width ||
             Circle.y - Circle.radius > Rect.y + Rect.height ||
             Circle.x + Circle.radius < Rect.x)
}複製程式碼

2、動畫迴圈

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

程式碼如下：

function drawAnimation() {
    window.requestAnimationFrame(drawAnimation);
    context.clearRect(0, 0, canvas.width, canvas.height);
    if(Intersect(rect,circle)){
     console.log('interact!!!!');
    }
    if(mouse.x){
        circle.x = mouse.x;
        circle.y = mouse.y;
    }
    circle.draw(context);
    rect.draw(context);
}複製程式碼


3、初始化

更新Init.js ,初始化Circle物件和Rect物件，最後開啟動畫迴圈。

程式碼如下：

window.onload = function () {
    canvas = document.getElementById('collCanvas');
    context = canvas.getContext('2d');
    Capturemouse(canvas);
    circle = new Circle(100,100,100);
    rect = new Rect(canvas.width/2,canvas.height/2,100,100);
    drawAnimation();
}複製程式碼


相關文章