Question

我已经编写了以下代码用于两个div的碰撞检测：

HTML：

<body>  
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <div class="moveright">
      <img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/></div>
    <div class="moveleft"><img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/></div>      
</body>

CSS：

body{
background:#fff;
}
body > img{
width:200px;
}

.leftwheel {  
    width:200px;
    -webkit-animation: rotationLeft 2s infinite linear;
    animation: rotationLeft 2s infinite linear;
  -moz-animation: rotationLeft 2s infinite linear;
}
@-webkit-keyframes rotationLeft {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotationLeft {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);}
}
@keyframes rotationLeft {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}

.rightwheel {
    width:200px;
    -webkit-animation: rotationRight 2s infinite linear;
    animation: rotationRight 2s infinite linear;
  -moz-animation: rotationRight 2s infinite linear;
}
@-webkit-keyframes rotationRight {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(-359deg);}
}
@-moz-keyframes rotationRight {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(-359deg);}
}
@keyframes rotationRight {
    from {transform: rotate(0deg);}
    to   {transform: rotate(-359deg);}
}

.moveleft {
    z-index:-1;
    right: 0px;
    top: 0px;
    position:absolute;
    -webkit-animation: movementLeft 5s linear forwards;
    animation: movementLeft 5s linear forwards;
  -moz-animation: movementLeft 5s linear forwards;
}
@-webkit-keyframes movementLeft {
    from {margin-right:0%;}
    to   {margin-right:80%;}
}
@-moz-keyframes movementLeft {
    from {margin-right:0%;}
    to   {margin-right:80%;}
}
@keyframes movementLeft {
    from {margin-right:0%;}
    to   {margin-right:80%;}
}
.moveright {  
    z-index:10;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-animation: movementRight 5s linear forwards;
    animation: movementRight 5s linear forwards;
  -moz-animation: movementRight 5s linear forwards;
}
@-webkit-keyframes movementRight {
    from {margin-left:0%;}
    to   {margin-left:80%;}
}
@-moz-keyframes movementRight {
    from {margin-left:0%;}
    to   {margin-left:80%;}
}
@keyframes movementRight {
    from {margin-left:0%;}
    to   {margin-left:80%;}
}
}

使用Javascript：

$(function() {
    var $leftWheel = $('div.moveright'),
        $rightWheel = $('div.moveleft');

    function isCollide() {
        return !(
            ((leftWheel.y + leftWheel.height) < (rightWheel.y)) ||
            (leftWheel.y > (rightWheel.y + rightWheel.height)) ||
            ((leftWheel.x + leftWheel.width) < rightWheel.x) ||
            (leftWheel.x > (rightWheel.x + rightWheel.width))
        );
    }

    function performCollisionCheck() {
        if(isCollide()) {
            performCollisionAction();
        }
        //performCollisionCheck();
    }

    function setPerformCollisionCheck() {  
        var timer;
        timer = setTimeout(performCollisionCheck(),5);
    }

    function performCollisionAction() {
        alert("collided");
    }
    setInterval(performCollisionCheck, 5);
});

动画正确发生但碰撞测试始终返回false。即使对象发生碰撞，也表明对象没有重叠。我仔细检查了这个条件并确认一切正常。这是什么问题？怎么解决？

DEMO

Answer 1

以下是您的代码的修复：http://jsfiddle.net/4Hd7D/20/

$(function() {
    var leftWheel = $('div.moveright'),
        rightWheel = $('div.moveleft');

    function isCollide() {
        return !(
            ((leftWheel.offset().top + leftWheel.height()) < (rightWheel.offset().top)) ||
            (leftWheel.offset().top > (rightWheel.offset().top + rightWheel.height())) ||
            ((leftWheel.offset().left + leftWheel.width()) < rightWheel.offset().left) ||
            (leftWheel.offset().left > (rightWheel.offset().left + rightWheel.width()))
        );
    }

    function performCollisionCheck() {
        if(isCollide()) {
            performCollisionAction();
        }
        //performCollisionCheck();
    }

    function setPerformCollisionCheck() {  
        var timer;
        timer = setTimeout(performCollisionCheck(),5);
    }

    function performCollisionAction() {
        console.log("collided");
    }
    setInterval(performCollisionCheck, 5);
});

问题：

没有leftWheel.y或leftWheel.x！ “x”和“y”未定义，您必须使用leftWheel.offset().top和leftWheel.offset().left
您已定义$leftWheel，但在您的代码中使用了leftWheel，我更改了它！
使用alert()

console.log()

height和width是函数，因此必须将它们用作height()和width()

div碰撞检测不起作用

1 个答案: