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

来源:https://www.cnblogs.com/xsd1/archive/2019/12/02/11973255.html

在Canvas中進行碰撞檢測,大家往往直接採用游戲引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)內置的碰撞檢測功能,好奇的你有思考過它們的內部運行機制嗎?下麵將針對基本的碰撞檢測技術進行講解: 1、基於矩形的碰撞檢測 所謂碰撞檢測就是判斷物體間是否發生重疊,這裡我們假設討論的碰撞體 ...


在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是否發生重疊,在討論是否發生重疊時我們可以先看看沒有重疊的四種情況,如下圖:

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

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()動畫函數。

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

“清空”當前canvas中內容,為繪製下一幀做準備。
檢測A,B是否發生重疊,若重疊則在控制台輸出interact!!!
檢測當前滑鼠在canvas上的移動並將滑鼠位置更新到B的位置屬性中。
根據新的位置屬性重新繪製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、檢測圓形碰撞

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

如下圖:

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

當取得兩圓心間的距離之後將與兩圓半徑之和比較,如果距離小於半徑之和則返回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、檢測碰撞

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

如下圖:

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

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
更新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();
}

 

相信很多人在剛接觸前端或者中期時候總會遇到一些問題及瓶頸期,如學了一段時間沒有方向感或者堅持不下去一個人學習枯燥乏味有問題也不知道怎麼解決,對此我整理了一些資料 喜歡我的文章想與更多資深大牛一起討論和學習的話 歡迎加入我的學習交流群907694362

 


您的分享是我們最大的動力!

更多相關文章
  • #菜鳥教程地址https://www.runoob.com/docker/docker-tutorial.html#docker官方地址倉庫https://hub.docker.com/ docker 安裝 1.更新內核yum update2.下載安裝腳本curl -fsSL https://get ...
  • 項目是一個即時聊天的社交軟體,聊天流採用的是UICollectionView,隨著進度的完善,發現一個特別的bug,UICollectionviewCell的復用,並沒有直接insert進去,而是出現了莫名奇妙的插入方式, 這不是我的圖,這是我在網上找到的,跟我的效果一樣一樣的。link the i ...
  • 寫這篇文章的原因 在移動端一般很少使用複雜的表單,一般針對於屬性的更改都會打開一個新的頁面進行更改。雖然不多,但是也會有。如果一個頁面要輸入的內容包括姓名、地址、郵箱、手機號等,對各個屬性的驗證會非常麻煩,並且非常的不優雅。 於是, 就出現了,一種基於規則的 輸入驗證庫,通過註解即可標註驗證規則。 ...
  • 背景 因為公司一個app項目需要擴展,因為功能較多且較完整的流程與業務,而且和以前的業務關係不大,所以我整合到了 另外一個分包中(代號:newFunc,請註意是代號)進行依賴。 當我寫完這部分業務開始進行debug的時候我發現了這個錯誤。 上述中我得出already這個關鍵字,在對分包的集成測試中沒 ...
  • 下載 "demo和工具下載鏈接SPClipTool" 使用說明 需求 圖片裁剪,效果如下圖,支持圖片拖拽,縮放,裁剪框自由變換大小。 思路 兩個UIImageView,一個做背景,並加上蒙版效果,另外一個通過蒙版控制顯示區域,並且保證兩個UIImageView平移和縮放的時候完全重疊。最後使用一個U ...
  • <input /> 標簽是我們日常開發中非常常見的替換元素了,但是最近在刷 whattwg 跟 MDN 的時候發現 跟 <input /> 有很多相關的屬性,選擇器都沒怎麼用過,所以就開篇文章來整理一下一些比較有趣或者實用的知識點。 本篇文章預設大家已經知道 <input /> 標簽的基本用法,不會 ...
  • js日期函數 ...
  • 在用Layui table 分頁顯示數據,用 type:"numbers" 進行顯示序號有以下的問題 1、表格自帶的分頁,page:true 這種分頁,在切換頁面的時候序號可以正常進行增加顯示,代碼如下: 顯示效果,第二頁的起始序號不是1 2、page組件進行分頁 這種分頁,在切換頁面的時候序號一種 ...
一周排行
  • 前言 上一篇文章主要介紹了ObjectPool的理論知識,再來介紹一下Microsoft.Extensions.ObjectPool是如何實現的. 核心組件 ObjectPool ObjectPool 是一個泛型抽象介面,他抽象了兩個方法Get和Return Get方法用於從對象池獲取到可用對象,如 ...
  • 國內優秀的WPF開源控制項庫,Panuon.UI的優化版本。一個漂亮的、使用樣式與附加屬性的WPF UI控制項庫,值得向大家推薦使用與學習。 今天站長(Dotnet9,站長網址:https://dotnet9.com, 微信公眾號:dotnet9_com)推薦另一款開源的WPF控制項庫(PanuonUI. ...
  • WGS-84坐標系:全球定位系統使用,GPS、北斗等 GCJ-02坐標系:中國地區使用,由WGS-84偏移而來 BD-09坐標系:百度專用,由GCJ-02偏移而來 (PS:源於項目需求,本來是想讀圖片的經緯度顯示在百度離線地圖上的。後來發現定位偏差太大,仔細一想,原來是圖片和百度使用的坐標系不一樣。 ...
  • .NET Core3.1發佈 我們很高興宣佈.NET Core 3.1的發佈。實際上,這隻是對我們兩個多月前發佈的.NET Core 3.0的一小部分修複和完善。最重要的是.NET Core 3.1是長期支持(LTS)版本,並且將支持三年。和過去一樣,我們希望花一些時間來發佈下一個LTS版本。額外的 ...
  • based on https://stackoverflow.com/questions/659013/accessing-a-shared-file-unc-from-a-remote-non-trusted-domain-with-credentials ...
  • private static void PathCopyFilesWithOriginalFolder() { int sourceFilesNum = 0; try { string sourceDir = @"E:\Source"; string destDir = @"E:\Dest"; st... ...
  • 前言 上一次資料庫災備和性能優化後,資料庫專家建議,在不擴容的情況下,客戶端不能再頻繁的掃描資料庫了!一句驚醒夢中人,因為我也發現資料庫越來越卡了,自從上個項目上線後,就出現了這個情況。後來分析其原因,發現客戶端每3秒中掃描一次資料庫,一共5000+客戶端,可想而知,頻繁掃描嚴重影響到資料庫性能。所 ...
  • 2019.12.4今天開通博客,跌跌撞撞學了3年C#,感覺有了基礎但還不夠深入,有些東西學了又忘,特此開通博客做一個記錄,記錄下以後學習中的每一個知識點,再接再厲,每天進步一點點!!!!!! ...
  • 本人剛接觸.net core 由於公司項目需要部署在Linux上 近些日子學習和網上大面積搜教程 我在這給大家歸攏歸攏借鑒的教程做了套方案(我寫的可以實現 但不一定是最好的 僅供參考) 我只用過core3.0 之前的版本沒接觸過 首先需要使用Nginx反代理的項目那一定是web框架的ASP.NET ...
  • WinFrm應用程式調用WebService服務 關於WebService的創建、發佈與部署等相關操作不再贅述,傳送門如下:C# VS2019 WebService創建與發佈,並部署到Windows Server 2012R 此篇記錄一下客戶端的調用,以便後續學習使用,不足之處請指出。 建立WinF ...
x