38-碰撞的对象

4.10.1　碰撞的对象

碰撞的两个物体使用的是两张PNG图片，它们的长和宽均为48像素。第一张图片是一个蓝色的加号，第二张图片是一个被咬了一口的红色圆饼。这个碰撞测验里的两个物体如图4-19所示。

接下来创建两个对象，用来保持这两个图片的数据。

var blueObject={};
var redObject={};
blueObject.x=0;
blueObject.y=200;
blueObject.dx=2;
blueObject.width=48;
blueObject.height=48;
blueObject.image=new Image();
blueObject.image.src="blueplus.png";
redObject.x=348;
redObject.y=200;
redObject.dx=-2;
redObject.width=48;
redObject.height=48;
redObject.image=new Image();
redObject.image.src="redcircle.png";

另外，还需将两张图片都绘制到画布上，并将其ImageData的值都存储起来。

context.drawImage(blueObject.image, 0, 0);
blueObject.blueImageData=context.getImageData(0, 0, blueObject.width,
　　　　　　　　　　　　　　　　　　　　　       　　blueObject.height);
context.clearRect(0,0,theCanvas.width, theCanvas.height);redObject.x=348;
context.drawImage(redObject.image, 0, 0);
redObject.redImageData=context.getImageData(0, 0, redObject.width,
　　　　　　　　　　　　　　　　 　　　　　　　　　redObject.height);
context.clearRect(0,0,theCanvas.width, theCanvas.height);

首先，需要从图片的（0,0）位置开始绘制。不过，用户可以在画布的任一位置或者在另外一个隐藏的画布中绘制这两张图片。由于只需要存储它们的像素信息，因此，在绘制完，就需要将它们擦除掉。具体地讲，只使用每一个像素数组里的第四个数据——透明度。