javascript - 如何为平铺网格中的元素实现单击功能，当单击它时，它及其附近的元素会淡出

Question

我正在尝试制作一个相当简单的网格游戏，用户必须单击图 block 才能显示下面的内容。我遇到的第一个问题是实现一个点击功能，该功能不仅会删除点击的图 block ，还会删除其周围的一些图 block ，最好是随机的。

我当前的代码:

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

非常感谢任何扩展我的简单代码的帮助。

Answer 1

您可以计算 sibling 的数量并随机隐藏其中的一些，如下所示:

$('.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所评论的，我在这里添加增强版本，以随机选择上一个或下一个 sibling ，总共最多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');
    });

代码增长了一点，因为我们必须控制是否不再有上一个或下一个 sibling ，并且在这种情况下恢复到另一个。