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

我正在尝试使用jquery制作一个包含可拖动棋子的棋盘，棋子将捕捉到新的目标方块。我一直在尝试各种各样的概念，但我没能让我尝试的任何东西起作用

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

我已经编写了一些代码，将一些片段加载到一块板上，并使它们可以拖动，但我还没有弄清楚如何在没有手动数学的情况下定义网格。我可以在使用下面的手动系统后放置碎片。它似乎是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)+"%"]];

}

你在用一种“肮脏”的方式做这件事

您可以使用数组来表示棋盘，例如

var board = [];  //make a new array

//push 8 new arrays of length 8 onto this board array - ie 8 x 8
for (var i=0; i<8; i++) board.push(new Array(8));

然后你可以说

board[0][4] = new piece('white','queen');

例如

尝试在类中编码游戏逻辑，例如你能有一个蓝色皇后吗？你能要一头白母牛吗？白人国王会跳吗？等等

您会发现，随着您进行更多的重构，您的代码变得更易于阅读

不要写这么长的代码行！！这是一个肯定的迹象，有些事情需要重新思考

玩得开心！：）

你在用一种“肮脏”的方式做这件事

您可以使用数组来表示棋盘，例如

var board = [];  //make a new array

//push 8 new arrays of length 8 onto this board array - ie 8 x 8
for (var i=0; i<8; i++) board.push(new Array(8));

然后你可以说

board[0][4] = new piece('white','queen');

例如

尝试在类中编码游戏逻辑，例如你能有一个蓝色皇后吗？你能要一头白母牛吗？白人国王会跳吗？等等

您会发现，随着您进行更多的重构，您的代码变得更易于阅读

不要写这么长的代码行！！这是一个肯定的迹象，有些事情需要重新思考

---

玩得开心！：）

我同意其他海报中关于将逻辑视图和图形视图分开的说法，但我想回答您提出的问题，因为这会帮助您思考如何在代码中找到可以考虑的共性

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

首先，与其拥有一组名为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，而不是AH:

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

---

上面的代码未经测试，因此我不认为犯了一些错误，但它应该使用您上面提供的数据生成一个数组（虽然是从h-a而不是从a-h运行）

我同意其他海报关于分离逻辑视图和图形视图的说法，但我想回答您提出的问题，因为它应该帮助您考虑在代码中找到可以考虑的共性

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

首先，与其拥有一组名为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，而不是AH:

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

---

上面的代码未经测试，因此我不认为犯了一些错误，但它应该使用您在上面提供的数据生成一个数组（虽然是从h-a而不是a-h运行）

我建议您找到另一种方法来执行此操作！您当前的方法似乎将棋盘的“模型”与图形表示紧密地结合在一起……我同意，即使您的最终目标对我来说也只是一个大的

WTF

。用抽象的语言，El Ronnoco，这就是我来问你的原因！好的，Phantom——简单地说：我想要一个棋盘，它能将棋子初始化到正确的位置，可以拖动，并且能捕捉到鼠标所在的正方形。我发布的代码是我如何能够将碎片放在正确的位置。但是必须有一种方法来自动化所有的数学运算！对于一个变量名，必须有一种方法来遍历字母表中的a-h？[a] 文件，[g]文件？还是有一些其他的想法我完全错过了？你有没有考虑看看JQuery UI，比如拖动和可下拉？我建议你找到另一种方法来做这件事！您当前的方法似乎将棋盘的“模型”与图形表示紧密地结合在一起……我同意，即使您的最终目标对我来说也只是一个大的

WTF

。使用抽象概念