title: Suitable model for a Checkers board game implemented in Canvas, with animations in mind
body: <p>As it is right now I have a Board object which contains an 8x8 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.</p>
  
  <p>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.</p>
  
  <p>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 <code>Draw()</code> routine at a set interval, and have the <code>Draw()</code> 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.</p>
  
  <p>While this works, I find it to be a tad messy.</p>
  
  <p>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.</p>
  
  <p>Can anyone with experience in this area suggest a better way of doing things?</p>
  
  <p>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.</p>