jCheckers - Display a Checkers Game State/Animation (jGames)

jCheckers is one module within the jGames suite used to display Checkers game states, as well as animations.

Display Static Checkers State First include the following lines to your webpage

<script type="text/javascript" src="/assets/js/jgames/jquery.jgames.js"></script>
<link href="/assets/js/jgames/css/style.css" rel="stylesheet" type="text/css" />

Create an empty div tag and give it an ID, i.e. "checkers". This is where the chess board will be rendered to.

<div id="checkers"></div>

Next, create the state of the chess board using Javascript. The below state represents every piece in the checkers game and renders the chess above left checkers board. (Note that currently "kings" are not supported, however they will be in later releases).

var board_checkers = [
   ["r", " ", "r", " ", "r", " ", "r", " "],
   [" ", "r", " ", "r", " ", "r", " ", "r"],
   ["r", " ", "r", " ", "r", " ", "r", " "],
   [" ", " ", " ", " ", " ", " ", " ", " "],
   [" ", " ", " ", " ", " ", " ", " ", " "],
   [" ", "b", " ", "b", " ", "b", " ", "b"],
   ["b", " ", "b", " ", "b", " ", "b", " "],
   [" ", "b", " ", "b", " ", "b", " ", "b"]];
$("#checkers").checkers(board_checkers);

Creating an Animation Creating an animation is very easy. You simply pass an array of states, and the time interval between states (in milliseconds) to the checkersAnimator() function. Below is the code to render the above right Checkers animation.

var board_checkers_anim =
[
   [
       ["r", " ", "r", " ", "r", " ", "r", " "],
       [" ", "r", " ", "r", " ", "r", " ", "r"],
       ["r", " ", "r", " ", "r", " ", "r", " "],
       [" ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", " "],
       [" ", "b", " ", "b", " ", "b", " ", "b"],
       ["b", " ", "b", " ", "b", " ", "b", " "],
       [" ", "b", " ", "b", " ", "b", " ", "b"]
   ],
   [
       ["r", " ", "r", " ", "r", " ", "r", " "],
       [" ", "r", " ", "r", " ", "r", " ", "r"],
       ["r", " ", "r", " ", "r", " ", "r", " "],
       [" ", " ", " ", " ", " ", " ", " ", " "],
       ["b", " ", " ", " ", " ", " ", " ", " "],
       [" ", "", " ", "b", " ", "b", " ", "b"],
       ["b", " ", "b", " ", "b", " ", "b", " "],
       [" ", "b", " ", "b", " ", "b", " ", "b"]
   ],
   [
       ["r", " ", "r", " ", "r", " ", "r", " "],
       [" ", "r", " ", "r", " ", "r", " ", "r"],
       [" ", " ", "r", " ", "r", " ", "r", " "],
       [" ", "r", " ", " ", " ", " ", " ", " "],
       ["b", " ", " ", " ", " ", " ", " ", " "],
       [" ", "", " ", "b", " ", "b", " ", "b"],
       ["b", " ", "b", " ", "b", " ", "b", " "],
       [" ", "b", " ", "b", " ", "b", " ", "b"]
   ],
   [
       ["r", " ", "r", " ", "r", " ", "r", " "],
       [" ", "r", " ", "r", " ", "r", " ", "r"],
       [" ", " ", "r", " ", "r", " ", "r", " "],
       [" ", "r", " ", " ", " ", " ", " ", " "],
       ["b", " ", " ", " ", " ", " ", " ", " "],
       [" ", "b", " ", "b", " ", "b", " ", "b"],
       [" ", " ", "b", " ", "b", " ", "b", " "],
       [" ", "b", " ", "b", " ", "b", " ", "b"]
   ],
   [
       ["r", " ", "r", " ", "r", " ", "r", " "],
       [" ", "r", " ", "r", " ", "r", " ", "r"],
       [" ", " ", " ", " ", "r", " ", "r", " "],
       [" ", "r", " ", "r", " ", " ", " ", " "],
       ["b", " ", " ", " ", " ", " ", " ", " "],
       [" ", "b", " ", "b", " ", "b", " ", "b"],
       [" ", " ", "b", " ", "b", " ", "b", " "],
       [" ", "b", " ", "b", " ", "b", " ", "b"]
   ],
   [
       ["r", " ", "r", " ", "r", " ", "r", " "],
       [" ", "r", " ", "r", " ", "r", " ", "r"],
       [" ", " ", "b", " ", "r", " ", "r", " "],
       [" ", "", " ", "r", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", " "],
       [" ", "b", " ", "b", " ", "b", " ", "b"],
       [" ", " ", "b", " ", "b", " ", "b", " "],
       [" ", "b", " ", "b", " ", "b", " ", "b"]
   ],
   [
       ["r", " ", "r", " ", "r", " ", "r", " "],
       [" ", "r", " ", " ", " ", "r", " ", "r"],
       [" ", " ", " ", " ", "r", " ", "r", " "],
       [" ", "r", " ", "r", " ", " ", " ", " "],
       ["", " ", " ", " ", " ", " ", " ", " "],
       [" ", "b", " ", "b", " ", "b", " ", "b"],
       [" ", " ", "b", " ", "b", " ", "b", " "],
       [" ", "b", " ", "b", " ", "b", " ", "b"]
   ]
];
$("#checkers_anim").checkers(board_checkers_anim);