0

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

}
4

2 回答 2

2

I agree with other posters about separating your logical and graphical view, but I'd like to answer your question as presented, as it should help you think about finding commonality in your code that you can factor out.

When trying to automate the creation of a dataset like this, you need to look for commonalities and sequences. As you do that, you should be able to iterate towards a decent solution.

For a start, rather than having a set of variables called xFile (where x is a-h), why not create an object called "Files", with properties a-h, thus:

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

Even that may be more complex than you need - for ease of creation, you may find that you want a 2D array, where a=0, b=1 etc. is much easier to deal with (though see below, h=0, g=1... is even easier).

So, the next obvious commonality is that the first cell in each of the arrays you present follows the same pattern: [0+"%",0+((n/8)*100)+"%"], where n is 7->0 going from a-h. So you could easily generate each of the first cells thus:

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

Now, this is a little ugly, the Math.abs call there is because the numbers increase in the opposite direction to the array. There are other ways to do this, but IMO they are all pretty ugly. Instead, you could consider inverting the order of the array, so that it runs h-a, rather than a-h:

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

OK, so having seen this commonality, you can look at the next cells. These are all the same [0+((1/8)*100)+"%",0+((n/8)*100)+"%"] for the second, and [0+((2/8)*100)+"%",0+((n/8)*100)+"%"] for the third, both where where n is 0-7 for a-h.

Actually, we see another commonality here:
They could both be described as [0+((j/8)*100)+"%",0+((i/8)*100)+"%"] where i is the n from before, and j is the rank (1-7).

Even more, the difference between cell 0 and cells 1-7 is that cells 1-7 all start with 0+((i/8)*100)+, whereas cell 0 just starts with 0+. But what is ((0/8)*100)? It's 0!

So, there are no special cases, each cell can be defined as [0+((j/8)*100)+"%",0+((i/8)*100)+"%"]

So, taking the loop from before, we can extend it with an inner loop, thus:

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)+"%"]
    }
}

The above code is untested so I don't discount having made some error, but it should generate an array with the data you present above, (though running from h-a rather than a-h)

于 2012-07-25T10:12:20.287 回答
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');

..例如。

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

当您进行更多重构时，您会发现您的代码变得更好阅读。

并且不要写这么长的代码行！这是一个需要重新思考的明确信号！

玩得开心！:)

于 2012-07-25T09:39:11.407 回答