jChess is one module within the jGames suite used to display Chess game states, as well as animations. jGames can be downloaded from the jGames home page.
Display Static Chess State
First include the following lines to your webpage
1 2 | <script type="text/javascript" src="js/jgames/jquery.jgames.js"></script> <link href="js/jgames/css/style.css" rel="stylesheet" type="text/css" /> |
Create an empty div tag and give it an ID, i.e. “chess”. This is where the chess board will be rendered to.
1 | <div id="chess"></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 above left chess board.
1 2 3 4 5 6 7 8 9 10 | var board_chess = [ ["br", "bn", "bb", "bk", "bq", "bb", "bn", "br"], ["bp", "bp", "bp", "bp", "bp", "bp", "bp", "bp"], [" ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " "], ["wp", "wp", "wp", "wp", "wp", "wp", "wp", "wp"], ["wr", "wn", "wb", "wk", "wq", "wb", "wn", "wr"]]; $("#chess").chess(board_chess); |
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 chessAnimator() function. Below is the code to render the above right Chess animation.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | var chess_anim [ [ ["br", "bn", "bb", "bk", "bq", "bb", "bn", "br"], ["bp", "bp", "bp", "bp", "bp", "bp", "bp", "bp"], [" ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " "], ["wp", "wp", "wp", "wp", "wp", "wp", "wp", "wp"], ["wr", "wn", "wb", "wk", "wq", "wb", "wn", "wr"] ], [ ["br", "bn", "bb", "bk", "bq", "bb", "bn", "br"], ["bp", "bp", "bp", "bp", "bp", "bp", "bp", "bp"], [" ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", "wp", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " "], ["wp", "wp", "wp", " ", "wp", "wp", "wp", "wp"], ["wr", "wn", "wb", "wk", "wq", "wb", "wn", "wr"] ], [ ["br", "bn", "bb", "bk", "bq", "bb", "bn", "br"], ["bp", "bp", "bp", "bp", " ", "bp", "bp", "bp"], [" ", " ", " ", " ", "bp", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", "wp", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " "], ["wp", "wp", "wp", " ", "wp", "wp", "wp", "wp"], ["wr", "wn", "wb", "wk", "wq", "wb", "wn", "wr"] ], [ ["br", "bn", "bb", "bk", "bq", "bb", "bn", "br"], ["bp", "bp", "bp", "bp", " ", "bp", "bp", "bp"], [" ", " ", " ", " ", "bp", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", "wp", " ", " ", " ", " "], [" ", " ", " ", " ", " ", "wn", " ", " "], ["wp", "wp", "wp", " ", "wp", "wp", "wp", "wp"], ["wr", "wn", "wb", "wk", "wq", "wb", " ", "wr"] ], [ ["br", "bn", "bb", "bk", " ", "bb", "bn", "br"], ["bp", "bp", "bp", "bp", "bq", "bp", "bp", "bp"], [" ", " ", " ", " ", "bp", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", "wp", " ", " ", " ", " "], [" ", " ", " ", " ", " ", "wn", " ", " "], ["wp", "wp", "wp", " ", "wp", "wp", "wp", "wp"], ["wr", "wn", "wb", "wk", "wq", "wb", " ", "wr"] ] ]; $("#chess_anim").chessAnimator(chess_anim, 1000); |
Posted in 
Tags: 
[...] be wary of any bugs and also keep in mind that I will be updating it continuously. jGame links 1. jChess 2. jCheckers 3. jGo 4. jXiangQi 5. jShogi 6. jOthello 7. [...]