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