jXiangQi – Display a XiangQi(象棋) Game State/Animation (jGames)

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

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

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

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

var board_xiangqi = [
    ["br", "bn", "bb", "ba", "bk", "ba", "bb", "bn", "br"],
    [" ", " ", " ", " ", " ", " ", " ", " ", " "],
    [" ", "bc", " ", " ", " ", " ", " ", "bc", " "],
    ["bp", " ", "bp", " ", "bp", " ", "bp", " ", "bp"],
    [" ", " ", " ", " ", " ", " ", " ", " ", " "],
    [" ", " ", " ", " ", " ", " ", " ", " ", " "],
    ["rp", " ", "rp", " ", "rp", " ", "rp", " ", "rp"],
    [" ", "rc", " ", " ", " ", " ", " ", "rc", " "],
    [" ", " ", " ", " ", " ", " ", " ", " ", " "],
    ["rr", "rn", "rb", "ra", "rk", "ra", "rb", "rn", "rr"]];
$("#xiangqi").xiangqi(board_xiangqi);

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 xiangqiAnimator() function. Below is the code to render the bottom xiangqi animation.

var board_xiangqi_anim =
[
    [
        ["br", "bn", "bb", "ba", "bk", "ba", "bb", "bn", "br"],
        [" ", " ", " ", " ", " ", " ", " ", " ", " "],
        [" ", "bc", " ", " ", " ", " ", " ", "bc", " "],
        ["bp", " ", "bp", " ", "bp", " ", "bp", " ", "bp"],
        [" ", " ", " ", " ", " ", " ", " ", " ", " "],
        [" ", " ", " ", " ", " ", " ", " ", " ", " "],
        ["rp", " ", "rp", " ", "rp", " ", "rp", " ", "rp"],
        [" ", "rc", " ", " ", " ", " ", " ", "rc", " "],
        [" ", " ", " ", " ", " ", " ", " ", " ", " "],
        ["rr", "rn", "rb", "ra", "rk", "ra", "rb", "rn", "rr"]
    ],
    [
        ["br", "bn", "bb", "ba", "bk", "ba", "bb", "bn", "br"],
        [" ", " ", " ", " ", " ", " ", " ", " ", " "],
        [" ", "bc", " ", " ", " ", " ", " ", "bc", " "],
        ["bp", " ", "bp", " ", "bp", " ", "bp", " ", "bp"],
        [" ", " ", " ", " ", " ", " ", " ", " ", " "],
        [" ", " ", " ", " ", " ", " ", "rp", " ", " "],
        ["rp", " ", "rp", " ", "rp", " ", "", " ", "rp"],
        [" ", "rc", " ", " ", " ", " ", " ", "rc", " "],
        [" ", " ", " ", " ", " ", " ", " ", " ", " "],
        ["rr", "rn", "rb", "ra", "rk", "ra", "rb", "rn", "rr"]
    ],
    [
        ["br", "bn", "bb", "ba", "bk", "ba", "bb", "bn", "br"],
        [" ", " ", " ", " ", " ", " ", " ", " ", " "],
        [" ", "bc", " ", " ", " ", " ", " ", "  ", " "],
        ["bp", " ", "bp", " ", "bp", " ", "bp", " ", "bp"],
        [" ", " ", " ", " ", " ", " ", " ", " ", " "],
        [" ", " ", " ", " ", " ", " ", "rp", " ", " "],
        ["rp", " ", "rp", " ", "rp", " ", "", " ", "rp"],
        [" ", "rc", " ", " ", " ", " ", " ", "rc", " "],
        [" ", " ", " ", " ", " ", " ", " ", " ", " "],
        ["rr", "rn", "rb", "ra", "rk", "ra", "rb", "bc", "rr"]
    ],
    [
        ["br", "bn", "bb", "ba", "bk", "ba", "bb", "bn", "br"],
        [" ", " ", " ", " ", " ", " ", " ", " ", " "],
        [" ", "bc", " ", " ", " ", " ", " ", "  ", " "],
        ["bp", " ", "bp", " ", "bp", " ", "bp", " ", "bp"],
        [" ", " ", " ", " ", " ", " ", " ", " ", " "],
        [" ", " ", " ", " ", " ", " ", "rp", " ", " "],
        ["rp", " ", "rp", " ", "rp", " ", "", " ", "rp"],
        [" ", "rc", " ", " ", " ", " ", " ", "rc", "rr"],
        [" ", " ", " ", " ", " ", " ", " ", " ", " "],
        ["rr", "rn", "rb", "ra", "rk", "ra", "rb", "bc", " "]
    ]
];

$("#xiangqi_anim").xiangqiAnimator(board_xiangqi_anim, 1000);