3

HTML、CSS、JavaScript（jQuery）を使って簡単なゲームを作成しています。すべての粒子（弾丸）が由来する本船があります。それらはそれぞれ単なるdivです。次に、敵のdivが画面全体にランダムに配置されます。

各パーティクルが特定の敵に当たっているかどうかをテストする効率的な方法を探しています。私はうまくいき始めたものがありますが、信じられないほど速く行き詰まります。私はjsを初めて使用するので、私のコードはかなり乱雑で、他の多くの点でおそらく非効率的です。任意の提案をいただければ幸いです！

これが敵を作成し、攻撃するためのテストを行う私のセクションです：

var createEnemy = function(){
    var xRandom = Math.floor(Math.random() * (containerW-50));
    var yRandom = Math.floor(Math.random() * (containerH-50));
    var newEnemy = $('<div class="enemy"></div>');
    $(newEnemy).css({'left':xRandom,'top':yRandom}).appendTo('#container').fadeTo(200, .7);

    var hitTest = setInterval(function(){
        var enemy = $(newEnemy);
        var particle = $('.particle');  

        var enemyT = enemy.offset().top;
        var enemyB = enemy.height()+enemyT;
        var enemyL = enemy.offset().left;
        var enemyR = enemy.width()+enemyL;

        var particleT = particle.offset().top;
        var particleB = particle.height();
        var particleL = particle.offset().left;
        var particleR = particle.width();

        if(particleT >= enemyT-particleB && particleT <= enemyB && particleL >= enemyL-particleR && particleL <= enemyR){
            enemy.hide();
            var removeEnemy = setTimeout(function(){
                newEnemy.remove();
                clearInterval(hitTest, 0);
            },500);
        }
    }, 20);
}

var enemyInt = setInterval(createEnemy, 1000);

このようなものをブラウザでスムーズに実行することは現実的ですか？私のコードはいくつかの変更が必要ですか？おそらくより多くのコンテキストが必要になるので、次のようにします。

2012年1月12日編集： ゲームリンクが削除されました//関連性がありません

注：現時点では、これはChromeとSafariで最適に機能します。

2011年3月22日編集： 敵が消えたときを正確に確認できるように、敵のfadeOut（）をhide（）に変更しました（遅延する場合があります）。hitTestは、実際の敵をクリックしたときにのみトリガーされるように見えるので、通過してもトリガーされません。また、hitTestのclearIntervalを忘れました。これはパフォーマンスを劇的に向上させるように見えましたが、それでもまだ十分ではありません。

4

1 に答える 1

3

最高のパフォーマンスが必要な場合は、jQueryを削除してネイティブJavaScriptを使用してください。

それがオプションでない場合は、最も遅い部分をプロファイリングし、そこでネイティブDOMを使用します。

var newEnemy = $('<div class="enemy"></div>');

...になる...

var newEnemy = document.createElement('div');
newEnemy.className = 'enemy';
于 2011-03-21T05:33:16.310 に答える