javascript - 如何将其自动化为 for 循环？

Question

我正在尝试使用 jquery 制作一个带有可拖动棋子的棋盘，其中棋子会捕捉到新的目标方 block 。我一直在尝试各种概念，但我无法让我尝试的任何东西发挥作用。

我相信我遗漏了一些基本概念。

我已经编写了一些代码，可以在板上加载一些部件并使它们可拖动，但我无法弄清楚如何在没有手动数学的情况下定义网格。我可以在使用下面的手动系统后放置这些片段。它似乎是 for 循环和多维数组的绝佳候选者。最后我想说的是

a1 = [0+"%",0+((7/8)*100)+"%"],[0+((1/8)*100)+"%"], a2 = [0+((2/8)*100)+"%",0+((7/8)*100)+"%"]

这样我以后就可以对所有等级和文件使用代数符号等。

function initCoords(){

var aFile = [[0+"%",0+((7/8)*100)+"%"],[0+((1/8)*100)+"%",0+((7/8)*100)+"%"],[0+((2/8)*100)+"%",0+((7/8)*100)+"%"],[0+((3/8)*100)+"%",0+((7/8)*100)+"%"],[0+((4/8)*100)+"%",0+((7/8)*100)+"%"],[0+((5/8)*100)+"%",0+((7/8)*100)+"%"],[0+((6/8)*100)+"%",0+((7/8)*100)+"%"],[0+((7/8)*100)+"%",0+((7/8)*100)+"%"]];

var bFile = [[0+"%",0+((6/8)*100)+"%"],[0+((1/8)*100)+"%",0+((6/8)*100)+"%"],[0+((2/8)*100)+"%",0+((6/8)*100)+"%"],[0+((3/8)*100)+"%",0+((6/8)*100)+"%"],[0+((4/8)*100)+"%",0+((6/8)*100)+"%"],[0+((5/8)*100)+"%",0+((6/8)*100)+"%"],[0+((6/8)*100)+"%",0+((6/8)*100)+"%"],[0+((7/8)*100)+"%",0+((6/8)*100)+"%"]];

var cFile = [[0+"%",0+((5/8)*100)+"%"],[0+((1/8)*100)+"%",0+((5/8)*100)+"%"],[0+((2/8)*100)+"%",0+((5/8)*100)+"%"],[0+((3/8)*100)+"%",0+((5/8)*100)+"%"],[0+((4/8)*100)+"%",0+((5/8)*100)+"%"],[0+((5/8)*100)+"%",0+((5/8)*100)+"%"],[0+((6/8)*100)+"%",0+((5/8)*100)+"%"],[0+((7/8)*100)+"%",0+((5/8)*100)+"%"]];

var dFile = [[0+"%",0+((4/8)*100)+"%"],[0+((1/8)*100)+"%",0+((4/8)*100)+"%"],[0+((2/8)*100)+"%",0+((4/8)*100)+"%"],[0+((3/8)*100)+"%",0+((4/8)*100)+"%"],[0+((4/8)*100)+"%",0+((4/8)*100)+"%"],[0+((5/8)*100)+"%",0+((4/8)*100)+"%"],[0+((6/8)*100)+"%",0+((4/8)*100)+"%"],[0+((7/8)*100)+"%",0+((4/8)*100)+"%"]];

var eFile = [[0+"%",0+((3/8)*100)+"%"],[0+((1/8)*100)+"%",0+((3/8)*100)+"%"],[0+((2/8)*100)+"%",0+((3/8)*100)+"%"],[0+((3/8)*100)+"%",0+((3/8)*100)+"%"],[0+((4/8)*100)+"%",0+((3/8)*100)+"%"],[0+((5/8)*100)+"%",0+((3/8)*100)+"%"],[0+((6/8)*100)+"%",0+((3/8)*100)+"%"],[0+((7/8)*100)+"%",0+((3/8)*100)+"%"]];

var fFile = [[0+"%",0+((2/8)*100)+"%"],[0+((1/8)*100)+"%",0+((2/8)*100)+"%"],[0+((2/8)*100)+"%",0+((2/8)*100)+"%"],[0+((3/8)*100)+"%",0+((2/8)*100)+"%"],[0+((4/8)*100)+"%",0+((2/8)*100)+"%"],[0+((5/8)*100)+"%",0+((2/8)*100)+"%"],[0+((6/8)*100)+"%",0+((2/8)*100)+"%"],[0+((7/8)*100)+"%",0+((2/8)*100)+"%"]];

var gFile = [[0+"%",0+((1/8)*100)+"%"],[0+((1/8)*100)+"%",0+((1/8)*100)+"%"],[0+((2/8)*100)+"%",0+((1/8)*100)+"%"],[0+((3/8)*100)+"%",0+((1/8)*100)+"%"],[0+((4/8)*100)+"%",0+((1/8)*100)+"%"],[0+((5/8)*100)+"%",0+((1/8)*100)+"%"],[0+((6/8)*100)+"%",0+((1/8)*100)+"%"],[0+((7/8)*100)+"%",0+((1/8)*100)+"%"]];

var hFile = [[0+"%",0+((0/8)*100)+"%"],[0+((1/8)*100)+"%",0+((0/8)*100)+"%"],[0+((2/8)*100)+"%",0+((0/8)*100)+"%"],[0+((3/8)*100)+"%",0+((0/8)*100)+"%"],[0+((4/8)*100)+"%",0+((0/8)*100)+"%"],[0+((5/8)*100)+"%",0+((0/8)*100)+"%"],[0+((6/8)*100)+"%",0+((0/8)*100)+"%"],[0+((7/8)*100)+"%",0+((0/8)*100)+"%"]];

}

Answer 1

我同意其他发帖者关于分离逻辑 View 和图形 View 的观点，但我想回答您所提出的问题，因为它应该帮助您思考在代码中找到可以分解的共性。

当尝试自动创建这样的数据集时，您需要寻找共性和序列。当您这样做时，您应该能够迭代出一个不错的解决方案。

首先，与其拥有一组名为 xFile 的变量(其中 x 是 a-h)，不如创建一个名为“Files”且具有 a-h 属性的对象，因此:

files = {
  a:[],
  b:[],
  ...
}

即使这可能比您需要的更复杂 - 为了便于创建，您可能会发现您需要一个 2D 数组，其中 a=0、b=1 等更容易处理(尽管见下文，h =0, g=1...更容易)。

因此，下一个明显的共同点是您提供的每个数组中的第一个单元格遵循相同的模式:[0+"%",0+((n/8)*100)+"%"] ，其中n从 a-h 是 7->0。因此，您可以轻松地生成每个第一个单元格:

files = [];
for (i = 7; i >= 0; i -= 1) {
    files[Math.abs(i-7)] = [0+"%",0+((i/8)*100)+"%"]
}

现在，这有点难看，Math.abs 调用是因为数字以与数组相反的方向增加。还有其他方法可以做到这一点，但在我看来，它们都非常丑陋。相反，您可以考虑反转数组的顺序，以便它运行 h-a，而不是 a-h:

files = [];
for (n = 0; n <= 7; n += 1) {
    files[n] = [0+"%",0+((n/8)*100)+"%"]
}

好的，看到这种共性后，您可以查看接下来的单元格。这些都是一样的[0+((1/8)*100)+"%",0+((n/8)*100)+"%"]第二个，[0+((2/8)*100)+"%",0+((n/8)*100)+"%"]对于第三个，都是 where where n a-h 的值为 0-7。

实际上，我们在这里看到了另一个共同点:
它们都可以被描述为 [0+((j/8)*100)+"%",0+((i/8)*100)+"%"]哪里i是n从之前，和 j是排名(1-7)。

更重要的是，单元格 0 和单元格 1-7 之间的区别在于，单元格 1-7 均以 0+((i/8)*100)+ 开头。 ，而单元格 0 仅以 0+ 开头。但什么是 ((0/8)*100) ？这是0 !

所以，没有特殊情况，每个单元格都可以定义为[0+((j/8)*100)+"%",0+((i/8)*100)+"%"]

因此，从之前的循环中，我们可以用内部循环来扩展它，因此:

files = [];
for (i = 0; i <= 7; i += 1) {
    files[i] = []
    for (j = 0; j <=7; j += 1) {
        files[i][j] = [0+((j/8)*100)+"%",0+((i/8)*100)+"%"]
    }
}

上面的代码未经测试，所以我不否认犯了一些错误，但它应该使用上面提供的数据生成一个数组，(尽管从 h-a 而不是 a-h 运行)