1

我在一个简单的（或者我认为的）乒乓球游戏中使用jQuery Collision 。没有人工智能或在线互动，只有两个桨和现实生活中一两个玩家可以控制的球。

当试图为球设置动画并检查它是否真的与任何东西发生碰撞时，我做不到。我已经阅读了 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;
}

我只是不确定如何检查某些东西是否真的被击中。

4

1 回答 1

1

那个碰撞插件似乎有相当糟糕的文档我认为使用像 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/

于 2013-03-28T07:33:16.313 回答