1

私はポンの単純な（またはそう思った）ゲームでjQuery Collisionを使用しています。AI やオンライン インタラクションはなく、2 つのパドルと、実際に 1 人または 2 人のプレイヤーがコントロールできるボールだけです。

ボールをアニメーション化して、実際に何かと衝突したかどうかを確認しようとすると、うまくいきません。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 に答える