html5 canvas重叠,Html5 Canvas动画基础碰撞检测的实现

在Canvas中进行碰撞检测，大家往往直接采用游戏引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)内置的碰撞检测功能，好奇的你有思考过它们的内部运行机制吗？下面将针对基本的碰撞检测技术进行讲解：

1、基于矩形的碰撞检测

所谓碰撞检测就是判断物体间是否发生重叠，这里我们假设讨论的碰撞体都是矩形物体。下面示例中我们将创建两个rect对象A和B(以下简称A,B)，其中A位置固定，B跟随鼠标移动，当A,B重叠时控制台将提示intercect！！

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;