0
\$\begingroup\$

I'm making a chess game from scratch and I got stuck.

So far I have all my figures placed, I have the positions set, I've already done the collision detection and everything.

When I click the figure that is in position A1 for example, I want to make two green rectangles at positions A2 and A3, and they will be used to make the figure move.

Is there a method for to add 1 to the string "A1" to form the string "A2" or something? Because thats all I really need right now.

Also if there's a more clever way to make the positions please let me know.

As an example, here is how I currently look up my display positions using the A1, A2 etc. location codes:

let positions = {
        A1 : [10, 710],B1 : [110, 710],C1 : [210, 710],D1 : [310, 710],E1 : [410, 710],F1 : [510, 710],G1 : [610, 710],H1 : [710, 710],
        A2 : [10, 610],B2 : [110, 610],C2 : [210, 610],D2 : [310, 610],E2 : [410, 610],F2 : [510, 610],G2 : [610, 610],H2 : [710, 610],
        A3 : [10, 510],B3 : [110, 510],C3 : [210, 510],D3 : [310, 510],E3 : [410, 510],F3 : [510, 510],G3 : [610, 510],H3 : [710, 510],
        A4 : [10, 410],B4 : [110, 410],C4 : [210, 410],D4 : [310, 410],E4 : [410, 410],F4 : [510, 410],G4 : [610, 410],H4 : [710, 410],
        A5 : [10, 310],B5 : [110, 310],C5 : [210, 310],D5 : [310, 310],E5 : [410, 310],F5 : [510, 310],G5 : [610, 310],H5 : [710, 310],
        A6 : [10, 210],B6 : [110, 210],C6 : [210, 210],D6 : [310, 210],E6 : [410, 210],F6 : [510, 210],G6 : [610, 210],H6 : [710, 210],
        A7 : [10, 110],B7 : [110, 110],C7 : [210, 110],D7 : [310, 110],E7 : [410, 110],F7 : [510, 110],G7 : [610, 110],H7 : [710, 110],
        A8 : [10, 10], B8 : [110, 10], C8 : [210, 10], D8 : [310, 10], E8 : [410, 10], F8 : [510, 10], G8 : [610, 10], H8 : [710, 10],
    }

the [0] of the arrays is x and the [1] is y, and that's also how I placed the figures.

\$\endgroup\$
  • \$\begingroup\$ Instead of strings have you considered using numbers? Top-left is square 0. Second from the left is square 1. Second from the top is square 8. And so on. Or coordinates: top-left: [0,0], second from the left: [1,0], second from the top: [0,1] and so on. \$\endgroup\$ – user253751 Feb 12 at 12:22
  • \$\begingroup\$ ye thats what im about to do , thanks for the answer! \$\endgroup\$ – Chrissisbeast Feb 12 at 12:39
2
\$\begingroup\$

It looks to me like what you really want is a 2D array for managing your board state, which in JavaScript you can accomplish with a nested array.

Your x & y coordinates stay as plain integers internally, so you can use them as indexes into the first/outer and second/inner dimensions of the array. This makes it easy to add and subtract coordinates, or compute other useful spatial patterns, like potential knight moves.

You then convert to "A1" style chess notation for display only, rather than using it as your underlying model. For example, using internal x, y indices in the range 0...7:

siteToLabel = function(x, y) {
    // 65 is the ASCII code for capital A, and the
    // rest of the alphabet proceeds sequentially.
    return String.fromCharCode(65 + x) + (y + 1).toString();
}

You can similarly compute your display coordinates this way, without the lookup table you're using now:

siteToDisplayCoords = function(x, y) {
    return [10 + 100 * x, 710 - 100 * y];
}

Once you're using integer indices internally, it's trivial to navigate to adjacent sites: just add/subtract one from your x or y index.

|improve this answer|||||
\$\endgroup\$
  • \$\begingroup\$ thats so smart , i didnt think of that , thank you so much it will make my life so much easier ! \$\endgroup\$ – Chrissisbeast Feb 11 at 16:11
  • \$\begingroup\$ I started making it and i didnt understand one thing , i did the 2d array and now im computing the old A1 as [0][0] , A2 as [0][1] ec. and thats ok if i have 1 number in it , but i need to have 2 , x and y , i didnt understand how ill that work , if the pawn is at [0][1] , how will the green things pop in [0][2] and [0][3] ? is there a way to add up to an index to become [0][1] from [0][0] for example? \$\endgroup\$ – Chrissisbeast Feb 11 at 16:27
  • \$\begingroup\$ If you need to store 2 variables in one entry of an array, you can always just nest the array one layer deeper: positions[xIndex][yIndex] = [xValue, yValue]; xPosition = positions[xIndex][yIndex][0]; But you don't need to store positions in a table because the method shown above already lets you calculate your positions from x & y directly, no lookup table required. \$\endgroup\$ – DMGregory Feb 11 at 17:11
  • \$\begingroup\$ I don't really understand what the functions you wrote in your main answer do , if you can break them down a bit for me it would be perfect , because i really want to learn . \$\endgroup\$ – Chrissisbeast Feb 12 at 12:47
  • \$\begingroup\$ The first takes an x, y coordinate pair for a square and produces the chess notation for it, like (0,0)→"A1", (1,3)→"B4", (7,7)→"H8". The second returns an array containing the x & y display positions for that square, replacing the positions map shown in your question. \$\endgroup\$ – DMGregory Feb 12 at 12:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.