Плагин коллизий jQuery | Как на самом деле проверить, не столкнулось ли что-то

Я использую jQuery Collision в простой (или мне так казалось) игре Pong. Здесь нет ИИ или онлайн-взаимодействия, только две ракетки и мяч, которым могут управлять один или два игрока в реальной жизни.

Пытаясь оживить мяч и проверить, действительно ли он с чем-то сталкивался, я теряюсь. Я прочитал документацию на 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;
}

Я просто не уверен, как проверить, действительно ли что-то было поражено или нет.


javascript collision-detection jquery-ui pong jquery-collision
person Xenolithic    schedule 28.03.2013    source источник
comment
Какую версию jQuery вы используете, она не работает с jQuery 1.8.2.   -  person Josh Bedo    schedule 28.03.2013
comment
jQuery 1.9.1 и jQuery UI 1.10.2, оба из CDN Google.   -  person Xenolithic    schedule 28.03.2013
comment
Почти уверен, что все, что выше 1.8, не будет работать, потому что API изменился.   -  person Josh Bedo    schedule 28.03.2013

Ответы (1)


arrow_upward
1
arrow_downward

У этого плагина столкновений, похоже, довольно дерьмовая документация, я думаю, было бы намного проще использовать что-то вроде пользовательского интерфейса jQuery, который имеет лучшую документацию и поддержку. Вот что-то быстрое, что я собрал, что обнаруживает столкновение.

<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/

person Josh Bedo    schedule 28.03.2013
comment
Ах, извините, я должен был упомянуть, что верхний манипулятор управляется клавишами A и D, а нижний — мышью. Можно ли связать такие события с помощью пользовательского интерфейса jQuery? Это не просто перетаскивание, как в вашем примере. - person Xenolithic; 28.03.2013