js碰撞检测函数--判断碰撞面

js碰撞检测函数在网上有很多实例，基本上都是通过判断一点是否同时存在于两个元素中，这样的效果太过粗糙，有时候我们需要更多样化的返还结果，这就需要我们对现有的检测函数进行改造。

下面是根据我的个人需求提供的修改思路，具体的还需要根据个人需求进行调试

先说下我的需求：

    1、我需要判断发生碰撞的究竟在哪一个方向。

    2、我需要留存一部分的冗余量，阻止顶角部分同时返还两条边的碰撞状态，如图：

        

解决步骤：

1、建立对象standStats = {left: false,right: false, top: false,bottom: false };----保存元素碰撞状态

2、给四个碰撞面每个创建两个检测点（每一面的两个端点，记住留下冗余量），如：

var left = {}                                          //左侧X坐标固定，Y坐标变化
left.X =obj.offsetLeft;
left.Y1 = obj.offsetTop + 1;
left.Y2 = obj.offsetTop + obj.offsetHeight - 1;

3、遍历障碍物数组，获取障碍物的offsetLeft、offsetTop、offsetWidth、offsetHeight并存储：

 var d = {
                 x: arr[i].offsetLeft,
                 y: arr[i].offsetTop,
                 w: arr[i].offsetWidth,
                 h: arr[i].offsetHeight             }

4、判断障碍物的上下左右是否与移动物存在重叠，并返回重叠面：

             if(left.X >= d.x && left.X <= d.x + d.w && left.Y1 >= d.y && left.Y1 <= d.y + d.h || left.X >= d.x && left.X <= d.x + d.w && left.Y2 >= d.y && left.Y2 <= d.y + d.h) {
                 standStats.left = true;
             }
             if(right.X >= d.x && right.X <= d.x + d.w && right.Y1 >= d.y && right.Y1 <= d.y + d.h || right.X >= d.x && right.X <= d.x + d.w && right.Y2 >= d.y && right.Y2 <= d.y + d.h) {
                 standStats.right = true;
             }
             if(top.X1 >= d.x && top.X1 <= d.x + d.w && top.Y >= d.y && top.Y <= d.y + d.h || top.X2 >= d.x && top.X2 <= d.x + d.w && top.Y >= d.y && top.Y <= d.y + d.h) {
                 standStats.top = true;
             }
             if(bottom.X1 >= d.x && bottom.X1 <= d.x + d.w && bottom.Y >= d.y && bottom.Y <= d.y + d.h || bottom.X2 >= d.x && bottom.X2 <= d.x + d.w && bottom.Y >= d.y && bottom.Y <= d.y + d.h) {
                 standStats.bottom = true;
             }

下面是我根据这个判断函数做的一个小游戏：
http://www.xiaoxiaobo.top/endspace/jump-jump-1.1/jump-jump.html

转载于:https://www.cnblogs.com/goodxiao/p/6383028.html