jOthello – Display a Othello Game State/Animation (jGames)

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

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

<div id="othello"></div>

Next, create the state of the othello board using Javascript. The below state represents every piece in the Othello game and renders the othello above left othello board.

var board_othello = [
    [" ", " ", " ", " ", " ", " ", " ", " "],
    [" ", " ", "b", " ", " ", " ", "w", " "],
    [" ", " ", "b", " ", " ", "w", " ", " "],
    [" ", "b", "b", "b", "w", "w", "w", " "],
    [" ", " ", "b", "w", "w", " ", " ", " "],
    [" ", "b", "w", "w", "w", "w", " ", " "],
    [" ", "w", " ", "w", " ", " ", " ", " "],
    ["w", "b", " ", "w", " ", " ", " ", " "]];

$("#othello").othello(board_othello);

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 othelloAnimator() function. Below is the code to render the above right othello animation.

var board_othello_anim =
[
    [
        [" ", " ", " ", " ", " ", " ", " ", " "],
        [" ", " ", "b", " ", " ", " ", "w", " "],
        [" ", " ", "b", " ", " ", "w", " ", " "],
        [" ", "b", "b", "b", "w", "w", "w", " "],
        [" ", " ", "b", "w", "w", " ", " ", " "],
        [" ", "b", "w", "w", "w", "w", " ", " "],
        [" ", "w", " ", "w", " ", " ", " ", " "],
        ["w", "b", " ", "w", " ", " ", " ", " "]
    ],
    [
        [" ", " ", "w", " ", " ", " ", " ", " "],
        [" ", " ", "b", " ", " ", " ", "w", " "],
        [" ", " ", "b", " ", " ", "w", " ", " "],
        [" ", "b", "b", "b", "w", "w", "w", " "],
        [" ", " ", "b", "w", "w", " ", " ", " "],
        [" ", "b", "w", "w", "w", "w", " ", " "],
        [" ", "w", " ", "w", " ", " ", " ", " "],
        ["w", "b", " ", "w", " ", " ", " ", " "]
    ],
    [
        [" ", " ", "w", " ", " ", " ", " ", " "],
        [" ", " ", "w", " ", " ", " ", "w", " "],
        [" ", " ", "w", " ", " ", "w", " ", " "],
        [" ", "b", "w", "b", "w", "w", "w", " "],
        [" ", " ", "w", "w", "w", " ", " ", " "],
        [" ", "b", "w", "w", "w", "w", " ", " "],
        [" ", "w", " ", "w", " ", " ", " ", " "],
        ["w", "b", " ", "w", " ", " ", " ", " "]
    ],
    [
        [" ", " ", "w", " ", " ", " ", " ", " "],
        [" ", " ", "w", " ", " ", " ", "w", " "],
        [" ", " ", "w", " ", " ", "w", " ", " "],
        [" ", "b", "w", "b", "w", "w", "w", " "],
        [" ", " ", "w", "w", "w", " ", " ", " "],
        [" ", "b", "w", "w", "w", "w", "b", " "],
        [" ", "w", " ", "w", " ", " ", " ", " "],
        ["w", "b", " ", "w", " ", " ", " ", " "]
    ],
    [
        [" ", " ", "w", " ", " ", " ", " ", " "],
        [" ", " ", "w", " ", " ", " ", "w", " "],
        [" ", " ", "w", " ", " ", "w", " ", " "],
        [" ", "b", "w", "b", "w", "w", "w", " "],
        [" ", " ", "w", "w", "w", " ", " ", " "],
        [" ", "b", "b", "b", "b", "b", "b", " "],
        [" ", "w", " ", "w", " ", " ", " ", " "],
        ["w", "b", " ", "w", " ", " ", " ", " "]
    ]
];

$("#othello_anim").othelloAnimator(board_othello_anim, 1000);