0

javascript/jquery を使用してゲームを作成しており、重力効果を作成しようとしています。私は持って<div id="block"><img src="block/block1.png"/><div>おり、常に下に移動したいのですが、他のdivを通り抜けるのではなく、他のdivの上に置くことも望んでいます。これまでのところ、私は試しました：

var obj = $('#block');
function down()
{
obj.animate({top:'-=20'}, 1000, down);
}
down();
4

1 に答える 1

1

これ（フィドル）はエレガントではなく、大幅に改善できますが、機能します。非常に単純な衝突モデルとインターバル タイマーを使用します。いくつかの部分を適応させる必要があります (そしてうまくいけばそれを改善します)。

HTML:

<div class="gravity" style="width: 90px; height: 15px; background-color: red; position: absolute; top: 10px; left: 20px;"></div>
<div class="gravity" style="width: 90px; height: 25px; background-color: green; position: absolute; top: 60px; left: 30px;"></div>
<div class="gravity" style="width: 90px; height: 25px; background-color: gray; position: absolute; top: 30px; right: 45px;"></div>
<div class="obstacle" style="width: 230px; height: 40px; background-color: blue; position: absolute; top: 240px; right: 19px;"></div>
<div class="obstacle" style="width: 180px; height: 40px; background-color: blue; position: absolute; top: 90px; left: 30px;"></div>

JavaScript:

(function() {
    // All falling objects
    var gravity = $('.gravity'),
    // All static objects
        obstacle = $('.obstacle');
    var all = gravity.add(obstacle);
    setInterval(function() {
        // Calculate positions of all falling objects
        gravity.each(function() {
            var e = this,
                g = $(this),
                ypos = g.offset().top,
                xpos = g.offset().left,
                h = g.height(),
                w = g.width();
            // Check whether something is in our way
            var conflicts = false;
            all.each(function() {
                if(this === e) return;
                var a = $(this);
                if(xpos < a.offset().left + a.width() && xpos + w > a.offset().left) {
                    if(ypos + h > a.offset().top && ypos + h < a.offset().top + a.height()) {
                         conflicts = true;
                    }
                }
            });
            if(!conflicts) {
                // Move down (real gravitation would be v = a * t)
                g.css('top', g.offset().top + 3);
            }
        });
    }, 50);
})();

否定的なコメントなどを防ぐには: はい、ドキュメントが読み込まれたらこれを呼び出す必要があります。はい、このコードは汚れているため、運用環境では使用しないでください。それはまさにそれが主張するものです-実用的な例です。

于 2013-11-02T14:20:22.750 に答える