javascript - 我应该如何获得相同颜色的相邻块？

Question

我正在尝试制作一个简单的颜色匹配游戏，我想找到一种方法来选择相同颜色的块组。

这是我正在研究的小提琴，如果你运行它，你会发现当我尝试将鼠标悬停在游戏区域边缘的元素上时会出现问题，告诉我它正在尝试使用未定义的变量

如果你在下面检查，parse_quad_tree()你会在函数中看到我处理未定义变量的情况，但由于它刹车，这意味着我在某个地方错了......

感谢您的时间

Answer 1

您的二维数组实际上是嵌套数组。您只需要检查可能超出范围的数组级别：

var n = !!grid[x][y-1]?grid[x][y-1]:false;
var s = !!grid[x][y+1]?grid[x][y+1]:false;
var e = !!grid[x-1]?grid[x-1][y]:false;   // Instead of !!grid[x-1][y]
var w = !!grid[x+1]?grid[x+1][y]:false;   // Instead of !!grid[x+1][y]

换句话说，当您这样做时array[x][y]，javascript 首先检索array[x]，然后[y]在检索到的数组中查找索引。在您的情况下，第一次查找是未定义的（grid[x-1]），因此它无法查找grid[x-1][y]。当第一步未定义时，您正在检查最后一步的未定义。

演示：http: //jsfiddle.net/jtbowden/qWktv/

此外，如果您$(c).addClass('active')在开头parse_quad_tree，您将能够突出显示单个块，并且您不必为每个邻居调用 `.addClass('active') 因为它会在递归开始时发生。

演示：http: //jsfiddle.net/jtbowden/qWktv/1/

Answer 2

在调用子数组之前，您没有检查您的第一个数组 var 是否存在，更改，

var e = grid[x-1]&&!!grid[x-1][y]?grid[x-1][y]:false;
var w = grid[x+1]&&!!grid[x+1][y]?grid[x+1][y]:false;

Answer 3

你需要检查你的界限

var n = !! (y > 0 && grid[x][y - 1]) ? grid[x][y - 1] : false;
var s = !! (y < grid[x].length-1 && grid[x][y + 1]) ? grid[x][y + 1] : false;
var e = !! (x > 0 && grid[x - 1][y]) ? grid[x - 1][y] : false;
var w = !! (x < grid.length-1 && grid[x + 1][y]) ? grid[x + 1][y] : false;

演示在http://jsfiddle.net/gaby/yHKkg/64/

Answer 4

而不是使用var colors = ['red', 'green', 'blue'];你的颜色使用三个不同的 css 类和一个颜色集。这样，当您需要选择所有这些时，它就像$(".blue").