转型中的碰撞检测

Question

我有两个对象

var player = document.getElementById("player");
var ahead= document.getElementById("follower");
document.addEventListener("click", move_player);

function move_player(e) {
        x_click = e.clientX;
        y_click = e.clientY;
        player.style.transition = "all 0.5s"
        if (x_click < canvas.clientWidth && y_click < canvas.clientHeight){
        player.style.left = x_click - player.clientWidth/2 + "px";
        player.style.top = y_click - player.clientHeight/2 + "px";
        }

var for_ahead = setInterval(function(){ move_ahead() }, 20);
        function move_ahead() {
        ahead.style.left = x_click - ahead.clientWidth+ "px";
        ahead.style.top = y_click - ahead.clientHeight +"px";
        ahead.style.transition = "all 1.4s"
}

假设我有一个对象，当我单击某处时它会移动到那里。单击后有第二个对象，但速度较慢。如果第一个对象不很快移动，这些对象就会发生碰撞。

我正在尝试使用以下方法在这两个对象之间创建碰撞检测：

if(((parseInt(player.style.left) < parseInt(ahead.style.left) + parseInt(ahead.clientWidth))) &&
parseInt(player.style.left) + parseInt(player.clientWidth) > parseInt(ahead.style.left) &&
parseInt(player.style.top) < parseInt(ahead.style.top) + parseInt(ahead.clientHeight) &&
parseInt(player.style.top) + parseInt(player.clientHeight) > parseInt(ahead.style.top))

我在 for_ahead.

中添加了上面的功能

var for_ahead = setInterval(function(){ move_ahead() }, 20);
        function move_ahead() {
            if(((parseInt(player.style.left) < parseInt(ahead.style.left) + parseInt(ahead.clientWidth))) && parseInt(player.style.left) + parseInt(player.clientWidth) > parseInt(ahead.style.left) &&
            parseInt(player.style.top) < parseInt(ahead.style.top) + parseInt(ahead.clientHeight) && parseInt(player.style.top) + parseInt(player.clientHeight) > parseInt(ahead.style.top))  alert("Detected collision");
            ahead.style.left = x_click - ahead.clientWidth*2.6+ "px";
            ahead.style.top = y_click - ahead.clientHeight/2 +"px";
            ahead.style.transition = "all 1.4s"
}

我的问题是，在它计算出 ahead.style.left 和 ahead.style.top 之后，它会弹出警报 ("Detected collision") 它不会在转换的每个时刻计算碰撞检测。我该怎么做？

Answer 1

element.style.leftreturnsleft属性的目标值，需要用getComputedStyle获取当前样式值。

我准备了简单的 fiddle 来展示如何使用 jQuery 和 VanillaJS 获取当前样式值。

http://jsfiddle.net/zg69gdh9/2/

转型中的碰撞检测

Collision detection in transition

javascript

transition