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