Html5 Canvas动画基础碰撞检测的实现

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对象，最后开启动画循环。