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碰撞插件|如何真正檢查是否有碰撞

回答

相關問題