Question

As it is right now I have a Board object which contains an 8×8 2 dimensional array (the grid, as I call it) and pieces are represented with ints 1/2, and I use a bitwise operation to mark a piece as king.

I also have a Checkers object which handles the rendering of the board and the user’s clicks on the canvas, etc. The Checkers object has a Draw method which simply iterates over the grid on the Board object to create a graphical representation of the board. As such, with each call to Draw(), the board is redrawn and the pieces positions are recalculated.

Now I want to add animations. One way I have been able to achieve this is to keep track of the most recent move (source and destination X Y coordinates), and then run the Draw() routine at a set interval, and have the Draw() routine check to see if the coordinates of the piece it’s about to draw are the same as the coordinates recorded in the previous move’s destination variable, and adjusts the position of the piece accordingly.

While this works, I find it to be a tad messy.

An alternative model I experimented with was to use objects for the pieces instead of integers, and then I could record the pixel X Y coordinates on the piece, and update them after each move (or in an animation loop). This I also found messy, and didn’t like the way my board object was now tied into the rendering logic.

Can anyone with experience in this area suggest a better way of doing things?

It’s worth noting that I use the same Board class on the server side (NodeJS), so ideally i’d like to keep the Board class identical on both the client and server to ensure that moves made and validated by the client will never be rejected by the server.

Answer 1

I would suggest that for each from you first draw all the pieces that aren’t moving, then draw the moving piece along some interpolated line from it’s start to end position (given by time).

To be honest, for something with this level of graphical complexity, I would stick with HTML/CSS/jQuery, using position: absolute images to represent the pieces. Then you could use jQuery’s animate function to show the last piece moving from it’s start to end position really easily (and with parameters like swing or linear to get the behaviour you want).
e.g.:

// Assumes pieces are objects with id and position properties
// and for each piece there is an image with id: piece.id

$('#'+piece.id).animate({
    left:  piece.position.x * board_scale,
    top:   piece.position.y * board_scale
});