I began to study the node, so I am writing my first game, these are checkers.

I have 2 functions (on the client), 1 function draws a field, the second function draws checkers, based on their coordinates.

So when 2 users play, everything looks the same, that is: black at the top, white at the bottom. For example, if I play white, this is very convenient, but an opponent who plays black is still not very comfortable.

Are there any ideas how to deploy a board for a user who plays with black checkers?

Server sends:

return { "white": { "P": ["5.0","5.2","5.4","5.6", "6.1","6.3","6.5","6.7", "7.0","7.2","7.4","7.6"], "K": [], }, "black": { "P": ["0.1","0.3","0.5","0.7", "1.0","1.2","1.4","1.6", "2.1","2.3","2.5","2.7"], "K": [], } };

These are the coordinates of where the pawn is based on the type of queen or pawn.

Users get the coordinates and the client draws:

Customer:

 /** * Π˜Π³Ρ€ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ */ board: function() { // ID для Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ поля var board_id = "#board"; for (var i = 0; i < 8; i++) { for (var j = 0; j < 8; j++) { var coord = i + '.' + j; if ((i%2==0 && j%2==0)|| (i%2!=0 && j%2!=0)) { $(board_id).append('<div class="cell cell_white" data-item="cell" data-coord="'+coord+'">'+coord+'</div>'); } else { $(board_id).append('<div class="cell cell_black" data-item="cell" data-coord="'+coord+'">'+coord+'</div>'); } } } }, /** * Π Π°Π·Π»ΠΎΠΆΠΈΡ‚ΡŒ шашки */ expanded: function(coordChecker) { $('[data-item="cell"]').find($('.checker')).remove(); var checkers_coords = coordChecker; for (var checkerColor in checkers_coords) { var checkers = checkers_coords[checkerColor]; // Ρ‚ΠΈΠΏ шашки [Π΄Π°ΠΌΠΊΠ° ΠΈΠ»ΠΈ пСшка] for (var checkerType in checkers) { // ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ шашки var checkersCoord = checkers[checkerType]; checkersCoord.forEach(function(checkerCoord) { if(checkerColor == 'white') { if(checkerType == 'K') { console.log('БСлая Π΄Π°ΠΌΠΊΠ°'); } else { $('[data-item="cell"][data-coord="'+checkerCoord+'"]').html('<div class="checker ck_white" data-item="checker" data-checker="white" data-coord="'+checkerCoord+'"></div>'); } } else { if(checkerType == 'K') { console.log('ЧСрная Π΄Π°ΠΌΠΊΠ°'); } else { $('[data-item="cell"][data-coord="'+checkerCoord+'"]').html('<div class="checker ck_black" data-item="checker" data-checker="black" data-coord="'+checkerCoord+'"></div>'); } } }); } } },

Here are the coordinates:

alt text

  • Draw on the client player's checkers always below, the business ... - deivan_
  • Checkers are drawn based on the coordinates sent by the server - Nepster
  • You then need to memorize not coordinates relative to pixels, but coordinates relative to the game board. - lampa
  • to be honest, you didn’t quite understand, added implementation to the question - Nepster
  • @NEPSTER 4234223 so turn your chessboard in your mind)) What will change? Coordinates will be the opposite. How to start drawing not from the origin, but from the end. - lampa

1 answer 1

I have here sketched my vision for solving your problem.

img

  • Is it anyway necessary to turn the blackboard for black, and when sending coordinates to the server from black, turn them back? - Nepster