jTicTacToe – Display a Tic Tac Toe Game State/Animation (jGames)

jTicTacToe is one module within the jGames suite used to display Tic Tac Toe game states, as well as animations.

Display Static Tic Tac Toe 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. "tictactoe". This is where the tic tac toe board will be rendered to.

<div id="tictactoe"></div>

Next, create the state of the tic tac toe board using Javascript. The below state represents every piece in the Tic Tac Toe game and renders the tic tac toe above left tic tac toe board.

var board_tictactoe = [
    ["o", "o", "x"],
    ["o", "x", "x"],
    [" ", "o", " "]
];
$("#tictactoe").tictactoe(board_tictactoe);

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 tictactoeAnimator() function. Below is the code to render the above right Tic Tac Toe animation.

var board_tictactoe_anim =
[
    [
        [" ", " ", " "],
        [" ", " ", " "],
        [" ", " ", " "]
    ],
    [
        [" ", " ", "o"],
        [" ", " ", " "],
        [" ", " ", " "]
    ],
    [
        [" ", " ", "o"],
        [" ", "x", " "],
        [" ", " ", " "]
    ],
    [
        [" ", " ", "o"],
        [" ", "x", " "],
        [" ", " ", "o"]
    ],
    [
        [" ", " ", "o"],
        [" ", "x", "x"],
        [" ", " ", "o"]
    ],
    [
        [" ", " ", "o"],
        [" ", "x", "x"],
        [" ", "o", "o"]
    ],
    [
        [" ", " ", "o"],
        ["x", "x", "x"],
        [" ", "o", "o"]
    ]
];

$("#tictactoe_anim").tictactoeAnimator(board_tictactoe_anim, 1000);