0

ユーザーがタイルをクリックして下のコンテンツを表示する必要がある、かなり単純なグリッド ゲームを作成しようとしています。私が苦労している最初の問題は、クリックされたタイルだけでなく、その周りのいくつかのタイルも、できればランダムに削除するクリック機能を実装することです。

私の現在のコード:

        $('.layer img').click(function() {
            $(this).css ('display', 'none');
        });

私の単純なコードを拡張するための助けは大歓迎です。

4

2 に答える 2

2

本当に必要なのが完全に複雑で、より制御しやすいものである場合は、この例を見てください（純粋なJavaScript）

http://jsfiddle.net/FgQQg/1/

于 2012-10-08T17:16:41.257 に答える
2

次のように、兄弟を数えて、そのうちのいくつかをランダムに非表示にすることができます。

$('.layer img').click(function() {
     sib = $(this).siblings();
     rand = Math.floor((Math.random()*sib.length)+1);
     for (i=0;i<rand;i++) {
        sib.eq(i).css ('display', 'none');
     }
     $(this).css ('display', 'none');
});

OPがコメントしたように、ここに拡張バージョンを追加して、前または次の兄弟をランダムに選択します。合計で最大5つです。

$('.layer img').click(function() {
         sib = $(this).siblings();
         rand = Math.floor((Math.random()*sib.length)+1);
         rand = Math.min(5,rand);
         aprev = $(this);
         anext = $(this);
         for (i=0;i<rand;i++) {
            if (Math.floor((Math.random()*2)+1) == 1 ) { //random go prev or next
               if (aprev.prev().length) {
                  aprev = aprev.prev();
                  aprev.css ('display', 'none');
               } else {
                  anext = anext.next();
                  anext.css ('display', 'none');
               }
            } else {
               if (anext.next().length) {
                  anext = anext.next();
                  anext.css ('display', 'none');
               } else {
                  aprev = aprev.prev();
                  aprev.css ('display', 'none');
               }
            }
         }
         $(this).css ('display', 'none');
    });

前または次の兄弟がいないかどうかを制御し、その場合はもう一方に戻す必要があるため、コードが少し大きくなりました。

于 2012-10-08T15:34:38.750 に答える