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

Question

我正在尝试制作一个相当简单的网格游戏，用户必须单击图块才能显示下面的内容。我正在努力解决的第一个问题是实现一个单击功能，该功能不仅可以删除单击的图块，还可以删除它周围的一些图块，最好是随机的。

我当前的代码：

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

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

Answer 1

您可以计算兄弟姐妹并随机隐藏其中一些，如下所示：

$('.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');
    });

代码增长了一点，因为我们必须控制是否没有更多的前一个或下一个兄弟姐妹，在这种情况下恢复到另一个。

Answer 2

If what you really need is something entirely more complex and with more control take a look at this example (pure javascript)

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