Javascript plugin for viewing Xiangqi games in a browser
JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
images/xiangqi_viewer move images into a folder May 26, 2014 Update Dec 21, 2014
jquery.js draw a grid May 10, 2014
screenshot.png resize May 27, 2014
xiangqi_viewer.js adjust animation speed Apr 23, 2015

Xiangqi Viewer

Xiangqi Viewer is a javascript plugin for viewing Xiangqi (象棋) games in a browser.

Screenshot of rendered XiangiViewer


Xiangqi Viewer depends on jquery and snap.svg, so include both libraries before including xiangqi_viewer.js.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="snap.svg-min.js"></script>
<script type="text/javascript" src="xiangqi_viewer.js"></script>

Xiangqi Viewer also has some required images. Copy the "images/xiangqi_viewer" directory into your "images" directory.

Next, initialize a XiangqiViewer.Board.

<div id="xiangqi-example"></div>

  var cellSize = 55; // width of each square on the board in pixels
  var lineWidth = 2.5; // width of each line on the chessboard in pixels
  var enableUI = true; // show/hide the UI for stepping through moves

  var board = new XiangqiViewer.Board('#xiangqi-example', cellSize, lineWidth, enableUI);

Then, place pieces on the board one by one:[
  // files are counted from the left, from 0 to 8
  // ranks are counted from the top, from 0 to 9
  {code: 'e', red: false, file: 2, rank: 0},
  {code: 'r', red: true, file: 0, rank: 8},

The piece codes are as follows:

Code Red piece Black piece

Or use the default positioning:


Finally, add the list of moves:

  {instruction: 'c2=5', red: true, analysis: 'This is the most common opening.'},
  {instruction: 'c8=5', red: false, analysis: 'The parallel cannon defense.'},
  {instruction: 'h2+3', red: true, analysis: "Horse comes up to defend the center."},
  {instruction: 'e3+1', red: false, analysis: "This is a terrible move."},
  {instruction: 'a6+5', red: true, analysis: "This is a defensive move."}

The analysis field is optional, and will show up in the Notes section of the viewer for its corresponding move.