jQuery碰撞插件|如何真正检查是否有碰撞

我在Pong的一个简单的（或者我认为的）游戏中使用jQuery Collision。没有人工智能或在线互动，只有两个桨和一个或两个现实生活中的球员可以控制的球。jQuery碰撞插件|如何真正检查是否有碰撞

当试图对球进行动画处理并检查它是否与任何东西实际相撞时，我就会变短。我已经阅读了SourceForge上的文档（参见上面的链接），但是我仍然在如何实际检查对撞机是否实际触及任何东西方面有点失落。在我看来，这些文档可以使用一些例子。

JavaScript代码，我目前有：

$(document).ready(function() 
{ 
    var ball = $("#ball"); 
    var topPaddle = $("topPaddle"); 
    var bottomPaddle = $("bottomPaddle"); 
    var topPaddleHits = $("#ball").collision("#topPaddle", { mode: "collision", obstacleData: "topOData" }); 
    var bottomPaddleHits = $("#ball").collision("#bottomPaddle", { mode: "collision", obstacleData: "bottomOData" }); 
    var anim = setInterval(function() 
    { 
     ball.css({ "left": "+=5", "top": "+=5" }); 
     if (bottomPaddleHits.data("bottomOData") == bottomPaddle) 
     { 
      anim = clearInterval(anim); 
      alert("Bottom paddle hit!"); 
     } 
    }, 50); 
});

我也试过if (bottomPaddleHits == 1)但这是没有好，无论是。

CSS的顶部/底部桨和球，如果它的问题：

#ball 
{ 
    width: 10px; 
    height: 10px; 
    position: absolute; 
    background: #FFF; 
    top: 200px; 
    left: 100px; 
} 
#topPaddle 
{ 
    position: absolute; 
    width: 300px; 
    height: 10px; 
    background: lime; 
    top: 100px; 
    left: 50px; 
} 
#bottomPaddle 
{ 
    position: absolute; 
    width: 300px; 
    height: 10px; 
    background: lime; 
    bottom: 100px; 
    left: 50px; 
}

我只是不知道如何去检查，如果有什么东西竟然打与否。

来源

2013-03-28 Xenolithic

。 – 2013-03-28 07:28:00

的jQuery 1.9.1和jQuery UI 1.10.2均来自谷歌的CDN工作， – Xenolithic 2013-03-28 07:31:13

很确定1.8以上的东西无法工作，因为API已经改变。 – 2013-03-28 07:33:47

这个碰撞插件似乎有非常糟糕的文档，我认为使用像jQuery UI之类的方法会更容易，它具有更好的文档和支持。这里有一些很快我把它放在一起，检测碰撞。

<div class="drop"> 
    <div class="drag"></div> 
    <div class="drag"></div> 
    <div class="drag"></div> 
    <div class="drag"></div> 
    <div class="drag"></div> 
</div> 

$('.drop').droppable({ 
    tolerance: 'fit' 
}); 

$('.drag').draggable({ 
    revert: 'invalid', 
    stop: function(){ 
     $(this).draggable('option','revert','invalid'); 
    } 
}); 

$('.drag').droppable({ 
    greedy: true, 
    tolerance: 'touch', 
    drop: function(event,ui){ 
     //ui.draggable.draggable('option','revert',true); 
     alert('touched'); 
    } 
});

以及放置警报的位置，您可以使用ui参数获取碰撞发生位置和偏移量。

http://jsfiddle.net/kAXdE/

您正在使用什么版本的jQuery它不使用jQuery 1.8.2

来源

2013-03-28 07:33:16

啊，对不起，我应该提到顶部的桨由A和D键控制，而底部的桨由鼠标控制。是否有可能使用jQuery UI绑定这些事件？这不只是像你的例子一样拖放。 – Xenolithic 2013-03-28 07:42:07

jQuery碰撞插件|如何真正检查是否有碰撞

回答

相关问题