jGo – Display a Go(围棋) Game State/Animation (jGames)

javascript jquery on August 8, 2011

jGo is one module within the jGames suite used to display Go game states, as well as animations. jGo supporst both 13x13 boards as well as 19x19 boards.

Display Static Go 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. "go". This is where the go board will be rendered to.

<div id="go"></div>

Next, create the state of the go board using Javascript. The below state represents every piece in the Go game and renders the go top 13x13 go board.

var board_go_13 =
   [
       ["b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b"],
       [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", "b", "w", "w", "b", " ", " ", " ", " "],
       [" ", " ", " ", "w", " ", " ", "w", "b", "b", "b", " ", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", " ", "b", "b", "b", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", " ", " ", "w", "w", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
   ];
$("#go").go(board_go_13);

The below state represents every piece in the Go game and renders the go bottom 19x19 go board. Note that only sizes 13x13 and 19x19 work, anything else will result in an error.

var board_go = [
   ["b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b"],
   [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
   [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b", "w", "w", "b", " ", " ", " ", " "],
   [" ", " ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", "w", "b", " ", "b", " ", " ", " "],
   [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b", " ", "b", " ", " "],
   [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "w", "w", " ", " "],
   [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
   [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
   [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
   [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
   [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
   [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
   [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
   [" ", " ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
   [" ", " ", " ", "b", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b", " ", " "],
   [" ", " ", "b", " ", " ", "w", "w", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
   [" ", " ", "b", "w", " ", " ", " ", " ", " ", " ", " ", "w", " ", " ", " ", "b", " ", " ", " "],
   [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
   ["w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "w"]];
$("#go").go(board_go);

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 goAnimator() function. Below is the code to render the middle Go animation.

var board_go_13_anim =
[
   [
       ["b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b"],
       [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", "b", "w", "w", "b", " ", " ", " ", " "],
       [" ", " ", " ", "w", " ", " ", "w", "b", "b", "b", " ", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", " ", "b", "b", "b", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", " ", " ", "w", "w", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
   ],
   [
       ["b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b"],
       [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", "b", "w", "w", "b", " ", " ", " ", " "],
       [" ", " ", " ", "w", " ", " ", "w", "b", "b", "b", " ", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", " ", "b", "b", "b", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", " ", " ", "w", "w", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", "b", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
   ],
   [
       ["b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b"],
       [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", "b", "w", "w", "b", " ", " ", " ", " "],
       [" ", " ", " ", "w", " ", " ", "w", "b", "b", "b", " ", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", " ", "b", "b", "b", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", " ", "w", "w", "w", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", "b", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
   ],
   [
       ["b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b"],
       [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", "b", "w", "w", "b", " ", " ", " ", " "],
       [" ", " ", " ", "w", " ", " ", "w", "b", "b", "b", " ", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", " ", "b", "b", "b", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", " ", "w", "w", "w", " ", " "],
       [" ", "b", "w", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", "b", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
   ],
   [
       ["b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b"],
       [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", "b", "w", "w", "b", " ", " ", " ", " "],
       [" ", " ", " ", "w", " ", " ", "w", "b", "b", "b", " ", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", "w", "b", "b", "b", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", " ", "w", "w", "w", " ", " "],
       [" ", "b", "w", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", "b", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
   ],
   [
       ["b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b"],
       [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", "b", "w", "w", "b", " ", " ", " ", " "],
       [" ", " ", " ", "w", " ", " ", "w", "b", "b", "b", " ", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", "w", "b", "b", "b", " ", " "],
       [" ", "b", " ", " ", " ", " ", " ", " ", "w", "w", "w", " ", " "],
       [" ", "b", "w", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", "b", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
   ],
   [
       ["b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b"],
       [" ", " ", " ", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", "b", "w", "w", "b", " ", " ", " ", " "],
       [" ", " ", " ", "w", " ", " ", "w", "b", "b", "b", " ", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", "w", "b", "b", "b", " ", " "],
       [" ", "b", " ", " ", " ", " ", " ", " ", "w", "w", "w", " ", " "],
       [" ", "b", "w", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", "b", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
   ],
   [
       ["b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b"],
       [" ", " ", " ", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", "b", "w", "w", "b", " ", " ", " ", " "],
       [" ", " ", " ", "w", " ", " ", "w", "b", "b", "b", " ", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", "w", "b", "b", "b", " ", " "],
       [" ", "b", "b", " ", " ", " ", " ", " ", "w", "w", "w", " ", " "],
       [" ", "b", "w", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", "b", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
   ],
   [
       ["b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b"],
       [" ", " ", " ", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", "b", "w", "w", "b", "w", " ", " ", " "],
       [" ", " ", " ", "w", " ", " ", "w", "b", "b", "b", " ", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", "w", "b", "b", "b", " ", " "],
       [" ", "b", "b", " ", " ", " ", " ", " ", "w", "w", "w", " ", " "],
       [" ", "b", "w", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", "b", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
   ],
   [
       ["b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b"],
       [" ", " ", " ", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", "b", "w", "w", "b", "w", " ", " ", " "],
       [" ", " ", " ", "w", " ", " ", "w", "b", "b", "b", " ", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", "w", "b", "b", "b", " ", " "],
       [" ", "b", "b", " ", " ", " ", " ", " ", "w", "w", "w", " ", " "],
       [" ", "b", "w", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", "b", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", "b", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
   ],

   [
       ["b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b"],
       [" ", " ", " ", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", "b", "w", "w", "b", "w", " ", " ", " "],
       [" ", " ", " ", "w", " ", " ", "w", "b", "b", "b", "w", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", "w", "b", "b", "b", " ", " "],
       [" ", "b", "b", " ", " ", " ", " ", " ", "w", "w", "w", " ", " "],
       [" ", "b", "w", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", "b", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", "b", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
   ],
   [
       ["b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b"],
       [" ", " ", " ", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", "b", "w", "w", "b", "w", " ", " ", " "],
       [" ", " ", " ", "w", " ", " ", "w", "b", "b", "b", "w", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", "w", "b", "b", "b", "", " "],
       [" ", "b", "b", " ", " ", " ", " ", " ", "w", "w", "w", " ", " "],
       [" ", "b", "w", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", "b", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", "b", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", "b", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", "", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
   ],
   [
       ["b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b"],
       [" ", " ", " ", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", "b", "w", "w", "b", "w", " ", " ", " "],
       [" ", " ", " ", "w", " ", " ", "w", "b", "b", "b", "w", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", "w", "b", "b", "b", "w", " "],
       [" ", "b", "b", " ", " ", " ", " ", " ", "w", "w", "w", " ", " "],
       [" ", "b", "w", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", "b", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", "b", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", "b", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", "", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
   ],
   [
       ["b", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "b"],
       [" ", " ", " ", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", " ", " ", " ", "b", "w", "w", " ", "w", " ", " ", " "],
       [" ", " ", " ", "w", " ", " ", "w", " ", " ", " ", "w", " ", " "],
       [" ", " ", " ", " ", " ", " ", " ", "w", " ", " ", " ", "w", " "],
       [" ", "b", "b", " ", " ", " ", " ", " ", "w", "w", "w", " ", " "],
       [" ", "b", "w", " ", " ", " ", " ", " ", "w", " ", " ", " ", " "],
       [" ", " ", "b", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", "b", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", "b", "w", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", "", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", " ", "b", " ", " ", " ", " ", " ", " ", " ", " ", " "],
       [" ", " ", "w", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
   ],
        ];
$("#go_anim").go(board_go_13_anim);

jGo – Display a Go(围棋) Game State/Animation (jGames)

Projects

Site

Social

Tags