免費AI編程助手
對于動畫應(yīng)該沒有小伙伴們沒有看過吧！那么今天我們就來講講有關(guān)于：“在html5怎么是如何實現(xiàn)碰撞檢測？相關(guān)案例分享！”這方面的相關(guān)內(nèi)容分享！
在Canvas中進行碰撞檢測，大家往往直接采用游戲引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)內(nèi)置的碰撞檢測功能，好奇的你有思考過它們的內(nèi)部運行機制嗎？下面將針對基本的碰撞檢測技術(shù)進行講解：
1、基于矩形的碰撞檢測
所謂碰撞檢測就是判斷物體間是否發(fā)生重疊，這里我們假設(shè)討論的碰撞體都是矩形物體。下面示例中我們將創(chuàng)建兩個rect對象A和B(以下簡稱A,B)，其中A位置固定，B跟隨鼠標(biāo)移動，當(dāng)A,B重疊時控制臺將提示intercect??！
1、創(chuàng)建Rect對象
這里我們新建Rect.js，建立Rect對象并為其添加原型方法draw,該方法將根據(jù)當(dāng)前對象的屬性(位置、大小)繪制到傳入的畫布對象（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、獲取鼠標(biāo)位置
因為B需要跟隨鼠標(biāo)移動所以我們需要檢測鼠標(biāo)在畫布的當(dāng)前位置。創(chuàng)建Capturemouse函數(shù)檢測鼠標(biāo)在傳入的文檔節(jié)點（element）上的移動并返回一個mouse對象（其中包含了鼠標(biāo)的x，y坐標(biāo)）。
代碼如下：
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是否發(fā)生重疊，在討論是否發(fā)生重疊時我們可以先看看沒有重疊的四種情況，如下圖：
以下是對這四種狀態(tài)的判斷：
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
知道如何判斷沒有重疊的狀態(tài)，那發(fā)生重疊的狀態(tài)該如何判斷呢？沒錯“取反”！，我們創(chuàng)建函數(shù)Interaect并添加到Init.js中，該函數(shù)傳入兩個Rect對象參數(shù)，當(dāng)兩Rect對象發(fā)生重疊將返回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、動畫循環(huán)
新建animationjs，設(shè)置requestAnimationFrame()動畫函數(shù)。
在循環(huán)體中將做以下兩件事：
- “清空”當(dāng)前canvas中內(nèi)容，為繪制下一幀做準(zhǔn)備。
- 檢測A,B是否發(fā)生重疊，若重疊則在控制臺輸出interact?。?！
- 檢測當(dāng)前鼠標(biāo)在canvas上的移動并將鼠標(biāo)位置更新到B的位置屬性中。
- 根據(jù)新的位置屬性重新繪制A,B（當(dāng)然,A的位置不會更新但因為每次循環(huán)將清空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元素并綁定鼠標(biāo)移動檢測，初始化Rect對象A和B，最后開啟動畫循環(huán)。
代碼如下：
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、基于圓形的碰撞檢測
說完矩形碰撞，我們再來聊聊圓形碰撞，同樣我們將創(chuàng)建兩個Circle對象A和B(以下簡稱A,B)，其中A位置固定，B跟隨鼠標(biāo)移動，當(dāng)A,B重疊時控制臺將提示intercect??！
1、創(chuàng)建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、檢測圓形碰撞
圓形間碰撞檢測可以簡單地通過兩圓心間距離與兩圓半徑之和的比較做判斷，當(dāng)兩圓心距離小于兩圓半徑之和時則發(fā)生碰撞。
如下圖：
所以我們首先需要做的是計算出兩圓心間的距離，這里我們將用到兩點間的距離公式，如下：
當(dāng)取得兩圓心間的距離之后將與兩圓半徑之和比較，如果距離小于半徑之和則返回true。
現(xiàn)在我們更新Interaect函數(shù)。
代碼如下：
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、動畫循環(huán)
更新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，最后開啟動畫循環(huán)。
代碼如下：
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、檢測碰撞
和矩形檢測一樣，我們先看看沒有發(fā)生碰撞的四種情況。
如下圖：
以下是對這四種狀態(tài)的判斷：
- 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函數(shù)，將沒有重疊的狀態(tài)“取反”，向該函數(shù)傳入Rect對象和Circle對象，當(dāng)Rect對象與Circle對象發(fā)生重疊將返回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、動畫循環(huán)
更新animation.js，這里我們將circle對象跟隨鼠標(biāo)運動，并檢測與固定位置的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對象，最后開啟動畫循環(huán)。
代碼如下：
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();
}那么以上就是有關(guān)于：“在html5怎么是如何實現(xiàn)碰撞檢測？相關(guān)案例分享！”這個問題相關(guān)內(nèi)容的講解，當(dāng)然在html5的用法和相關(guān)內(nèi)容都不止如此，那么更多有關(guān)于html5這個方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進行學(xué)習(xí)和了解，希望小編分享的內(nèi)容對大家有所幫助！
