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

如果您真正需要的是一些完全更复杂且控制更多的东西，请看一下这个例子（纯javascript）

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

如何为平铺网格中的元素实现点击功能，点击它时其中的元素接近消失

2 个答案: