优化H5中的碰撞检测

相信大家在微信端口上做过很多小游戏，类似的碰撞检测更是数不胜数。因为障碍物和主角都是图片，也就是说碰撞检测其实就是判断两个矩形是否直接相交。包括像Phaser这样的框架也是如此。当然，这种方法无可厚非。但是，唯一的问题是，如果材质（障碍物和主角）不能覆盖整个矩形，一旦程序检测到碰撞，这两个材质实际上是不一样的。如果没有真正的接触会有点尴尬，如下图所示：为了方便演示，让对比更直观，我给两张png图片加了背景。如果是简单的矩形相交判断，这个时候判断碰撞会很尴尬……所以，我们需要稍微高级一点的方法来解决。虽然我数学不好，但还是得考个数学题来解决：用判断矩形的四个边是否与多边形的边相交代替简单的两个矩形相交。案例中，因为我的障碍物比较小，比较全，所以没有做分割（比如上图中的绿血），主角是有棱角的，需要分割成多边形。在程序中，我是通过取障碍物和主角的坐标来判断的。因此，获取主角的坐标是首要任务。最快的方法就是借用PS的钢笔工具，如下图：用钢笔工具沿着猪脚的实际画面区域走一遍，然后记录下相对坐标点。所谓相对坐标点，就是以图片左上角的水平距离和垂直距离为基准的。比如第一个点的坐标是x：42，y：8。我做这些小游戏的想法是主角和障碍物都做在一块画布上。程序首先记录下猪脚的起点坐标，然后根据相对坐标计算画布上多边形各点的实际坐标。得到实际坐标后，我们可以做公式的计算来判断是否发生碰撞。公式如下：/***@param{Array}point障碍物的4点坐标集合*@param{String}x主角的x坐标*@param{String}x的y坐标主角*@param{Array}area主角的偏移坐标集合*/functionlineJudge(point,x,y,area){varp1,p2,p3,p4;for(vari=0;i<4;i++){p1=point[i];如果（3==i）{p2=点[0]}否则{p2=点[i+1];}for(varj=0,lenA=area.length;j=0){返回false;}//三角形面积的两倍cdavararea_cda=(c[0]-a[0])*(d[1]-a[1])-(c[1]-a[1])*(d[0]-[0]);//三角形面积的2倍cdb//注意：这里有个小优化。不需要用公式计算面积，而是通过已知的三个面积相加减去得到。vararea_cdb=area_cda+area_abc-area_abd;如果(area_cda*area_cdb>=0){返回false;}//计算交点坐标vart=area_cda/(area_abd-area_abc);vardx=t*(b[0]-a[0]),dy=t*(b[1]-a[1]);返回{x:a[0]+dx,y:a[1]+dy};简单判断两个矩形相交，然后在只有两个矩形相交的情况下，再判断直线是否与多边形的上边相交。最后附上项目高清二维码，欢迎大家体验：