Question

我正在尝试使用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)+"%"]];

}

Answer 1

你这样做是一种“讨厌”的方式！

您可以使用诸如

之类的数组来代表国际象棋棋盘

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));

此数组中的每个位置都可以存储任何Javascript对象 - 我建议从一些简单的表示方式开始。

您需要将图形组件与电路板的逻辑表示分开 - 我不认为您目前正在这样做。

也许有一个像......这样的课程。

function piece(col, typ) {
    var colour = col, 
        pieceType = typ;

    return {
        colour : colour,
        pieceType : typ
    }
}

然后你可以说......

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

..例如。

尝试在类中编码游戏逻辑，例如，你有蓝皇后吗？你有白牛吗？白王可以跳吗？等等

当您进行更多重构时，您会发现您的代码更易于阅读。

不要写这么长的代码!!这是一个需要重新思考的确定标志！

玩得开心！：）

Answer 2

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

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

首先，不要使用一组名为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调用它是因为数字在与数组相反的方向上增加。还有其他方法可以做到这一点，但IMO他们都非常难看。相反，您可以考虑反转数组的顺序，以便它运行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)+"%"]，其中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)+"%"]
    }
}

上面的代码是未经测试的，所以我不打算做出一些错误，但它应该生成一个包含你上面提供的数据的数组，（虽然从ha运行而不是啊）

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

2 个答案: