javascript - 使用 CSS 动画旋转的图像之间的碰撞检测

Question

我正在使用 CSS 动画和 jQuery 在十字路口(俯 View )移动汽车来模拟驾驶执照测验。用户必须通过点击汽车来选择交叉顺序。

示例图片:

每辆车都有属性和动画，例如:蓝色汽车右转(与图片不同):

#auto-b {
    left: 320px;
    top: 150px;
    -webkit-transform: rotate(180deg);
}

.animated #auto-b {
    -webkit-animation-name: move-b;
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes move-b {

    30% {
        left: 260px;
        top: 150px;
        -webkit-transform: rotate(180deg);
    }
    60% {
        left: 214px;
        top: 120px;
        -webkit-transform: rotate(270deg);
    }

    100% {
        top: 30px;
        left: 214px;
        -webkit-transform: rotate(270deg);
    }
}

我没有搞清楚的是，我如何检测两辆车是否发生碰撞，因为它们在旋转(转弯)。

播放按钮功能:

$('#play').on('click', play);

function play(){    
    $('.auto').removeClass('selected');
    $('#incrocio').addClass('animated');    
    interval = setInterval(crash,1);
}

碰撞函数(只适用于红色和绿色汽车碰撞，因为它们不旋转):

function crash(){

    var autoA = $('#auto-a').position();    
    var autoB = $('#auto-b').position();
    var autoC = $('#auto-c').position();    
    var top1 = autoA.top+10;
    var top2 = autoA.top-10;
    var left1 = autoA.left+10;
    var left2 = autoA.left-10;  

    if (top1 > autoC.top && top2 < autoC.top && left1 > autoC.left && left2 < autoC.left) {
        console.log("boom");
        $('#incrocio').removeClass('animated');
        alert("BOOM!");
        i = 1;
        carsArray = [];
        clearInterval(interval);
    }
}

是否有一种简单的方法来检测每个具有“.auto”类的图像之间的任何类型的碰撞？

我还考虑过计算矩形的每个点并检查它们中是否有任何点在另一个矩形(汽车)内。 但是我只能得到左上角的点而不能得到其他点。

有什么解决办法吗？

提前致谢!

Answer 1

使用Jquery/javascript绘制汽车动画。使用 css3 动画是检测事件或检测碰撞的非常糟糕的选择。

[已解决]

在使用 jquery 时使用下面的插件以便于检测。

http://plugins.jquery.com/overlaps/

http://yckart.github.io/jquery.overlaps.js/

[已解决]

希望您已经理解我的观点。