Question

I am trying to make a chess board with draggable pieces using jquery where the pieces snap to the new destination square. I have been experimenting with a variety of concepts but I have not been able to make anything I try work.

I believe I’m missing some fundamental concepts.

I have written some code that loads a few pieces on a board and makes them draggable, but I haven’t been able to figure out how to define the grid without manual math. I can place the pieces after using the below manual system.It seems like an excellent candidate for a for loop and a multidimensional array. I would ultimately like to say that

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

so I can later use algebraic notation, etc. for all ranks and files.

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

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)