麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > HTML > 正文

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

2024-08-26 00:21:11
字體:
來源:轉載
供稿:網友

在Canvas中進行碰撞檢測,大家往往直接采用游戲引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)內置的碰撞檢測功能,好奇的你有思考過它們的內部運行機制嗎?下面將針對基本的碰撞檢測技術進行講解:

1、基于矩形的碰撞檢測

所謂碰撞檢測就是判斷物體間是否發生重疊,這里我們假設討論的碰撞體都是矩形物體。下面示例中我們將創建兩個rect對象A和B(以下簡稱A,B),其中A位置固定,B跟隨鼠標移動,當A,B重疊時控制臺將提示intercect?。?/p>

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

在循環體中將做以下兩件事:

  • “清空”當前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?。?/p>

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,動畫,碰撞檢測

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

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。


注:相關教程知識閱讀請移步到HTML教程頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 久久精品一二三区 | 欧美精品亚洲人成在线观看 | 国产性tv国产精品 | 日本看片一区二区三区高清 | 男女一边摸一边做羞羞视频免费 | 免费99热在线观看 | 999精品久久久 | 国产午夜三级一区二区三桃花影视 | 中文字幕在线视频日本 | 一级一片免费看 | 一级α片免费看刺激高潮视频 | 国产91久久精品一区二区 | 操你视频| 国产精品久久久久久久娇妻 | 欧美日韩免费一区二区三区 | 久久久一区二区三区视频 | 国产精品一区二区三区在线看 | 免费在线观看亚洲 | 国产91中文字幕 | 欧美亚洲国产一区二区三区 | 日日做夜夜操 | 亚洲网站在线观看视频 | 巨根插入| 国产超碰人人爽人人做人人爱 | 久久99国产精品视频 | 欧美乱码精品一区 | 久久久入口| 亚洲视频在线视频 | 欧美精品久久久久久久多人混战 | 他也色在线视频 | a级在线| 国产女同玩人妖 | 日韩一级片黄色 | 久久色播 | 国产精品久久久久久一区二区三区 | cosplay裸体福利写真 | 国产精品99久久久久久大便 | 成人免费在线观看视频 | 亚洲 综合 欧美 动漫 丝袜图 | 久久精品视频日本 | 伊人在线视频 |