jShogi – Display a Shogi(将棋) Game State/Animation (jGames)

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

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

<div id="shogi"></div>

Next, create the state of the chess board using Javascript. The below state represents every piece in the Chess game and renders the chess top chess board. (Note: To promote a piece you will add "p" to the end of the name, that should be updated by the end of this week!)

var board_shogi = [
    ["L-", "N-", "S-", "G-", "K-", "G-", "S-", "N-", "L-"],
    [" ", "R-", " ", " ", " ", " ", " ", "B-", " "],
    ["p-", "p-", "p-", "p-", "p-", "p-", "p-", "p-", "p-"],
    [" ", " ", " ", " ", " ", " ", " ", " ", " "],
    [" ", " ", " ", " ", " ", " ", " ", " ", " "],
    [" ", " ", " ", " ", " ", " ", " ", " ", " "],
    ["p", "p", "p", "p", "p", "p", "p", "p", "p"],
    [" ", "B", " ", " ", " ", " ", " ", "R", " "],
    ["L", "N", "S", "G", "K", "G", "S", "N", "L"]
];
$("#shogi").shogi(board_shogi);

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

var board_shogi_anim =
    [
        [
            ["L-", "N-", "S-", "G-", "K-", "G-", "S-", "N-", "L-"],
            [" ", "R-", " ", " ", " ", " ", " ", "B-", " "],
            ["p-", "p-", "p-", "p-", "p-", "p-", "p-", "p-", "p-"],
            [" ", " ", " ", " ", " ", " ", " ", " ", " "],
            [" ", " ", " ", " ", " ", " ", " ", " ", " "],
            [" ", " ", " ", " ", " ", " ", " ", " ", " "],
            ["p", "p", "p", "p", "p", "p", "p", "p", "p"],
            [" ", "B", " ", " ", " ", " ", " ", "R", " "],
            ["L", "N", "S", "G", "K", "G", "S", "N", "L"]
        ],
        [
            ["L-", "N-", "S-", "G-", "K-", "G-", "S-", "N-", "L-"],
            [" ", "R-", " ", " ", " ", " ", " ", "B-", " "],
            ["p-", "p-", "p-", "p-", "p-", "p-", "p-", "p-", "p-"],
            [" ", " ", " ", " ", " ", " ", " ", " ", " "],
            [" ", " ", " ", " ", " ", " ", " ", " ", " "],
            [" ", " ", " ", " ", " ", "p", " ", " ", " "],
            ["p", "p", "p", "p", "p", " ", "p", "p", "p"],
            [" ", "B", " ", " ", " ", " ", " ", "R", " "],
            ["L", "N", "S", "G", "K", "G", "S", "N", "L"]
        ],
        [
            ["L-", "N-", "S-", "G-", "K-", "G-", "S-", "N-", "L-"],
            [" ", "R-", " ", " ", " ", " ", " ", "B-", " "],
            ["p-", "p-", "", "p-", "p-", "p-", "p-", "p-", "p-"],
            [" ", " ", "p-", " ", " ", " ", " ", " ", " "],
            [" ", " ", " ", " ", " ", " ", " ", " ", " "],
            [" ", " ", " ", " ", " ", "p", " ", " ", " "],
            ["p", "p", "p", "p", "p", " ", "p", "p", "p"],
            [" ", "B", " ", " ", " ", " ", " ", "R", " "],
            ["L", "N", "S", "G", "K", "G", "S", "N", "L"]
        ],
        [
            ["L-", "N-", "S-", "G-", "K-", "G-", "S-", "N-", "L-"],
            [" ", "R-", " ", " ", " ", " ", " ", "B-", " "],
            ["p-", "p-", " ", "p-", "p-", "p-", "p-", "p-", "p-"],
            [" ", " ", "p-", " ", " ", " ", " ", " ", " "],
            [" ", " ", " ", " ", " ", " ", " ", " ", " "],
            [" ", " ", " ", " ", "p", "p", " ", " ", " "],
            ["p", "p", "p", "p", " ", " ", "p", "p", "p"],
            [" ", "B", " ", " ", " ", " ", " ", "R", " "],
            ["L", "N", "S", "G", "K", "G", "S", "N", "L"]
        ]
    ];

$("#shogi_anim").shogiAnimator(board_shogi_anim, 1000);