Tic-Tac-Toe Game Recreated as a HTML5 Web Component

Last night I finished my latest experiment in recreating the classic Tic-Tac-Toe game as a HTML5 Web Component. Here’s the result and a few details:

• Two players take turns on the same computer. The next version will support one player vs. the computer.
• Game lobby for selecting player names.
• No images or JavaScript animations, CSS3 stuff only.
• Small API.
• Custom events, allowing the game to exchange data on the network or notify/interact by/with other components/controls on the page.
• Localizable via inline JSON (check the code listing below).
• Support for 3 board sizes.
• Allowing multiple instances.

The Markup

[sourcecode language=”html”]
<acidjs-xticatactoe x="Martin" o="James"></acidjs-xticatactoe>
<acidjs-xticatactoe debug="true" size="large"></acidjs-xticatactoe>
<acidjs-xticatactoe size="small"></acidjs-xticatactoe>
<acidjs-xticatactoe debug="true">
<code hidden>
{
"yourTurn": "du bist dran!",
"startNewGame": "Neues Spiel starten",
"start": "Start!",
"playerXName": "Spieler X Name",
"playerOName": "Spieler O Name",
"choosePlayerXName": "Wählen Sie Name für Spieler X",
"choosePlayerOName": "Wählen Sie Name für Spieler O",
"youWin": "Sie gewinnen!",
"draw": "Unentschieden :("
}
</code>
</acidjs-xticatactoe>
[/sourcecode]

HTML Attributes

Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:

• x – Optional name for the “x” player. Default: "Tic".
• o – Optional name for the “o” player. Default: "Tac".
• debug – Optional. If set to true, the component will output console messages. Default Default: "false".
• size – Optional size of the board. Default: "medium". Other possible values are "small" and "large".

JavaScript API

All standard JavaScript methods are supported, plus the component-specific:

• init() – Initialize the game.
• restart() – Restart the game (an alias of the init() method).
• destroy() – Destroy the game and remove the board.

Events

The component publishes the following custom events, returning event and game-specific data. The distribution, which could be downloaded from this link contains these event bindings, so you can use your browser’s console to see what data is returned upon firing those events.

• ttt:ready – Fired when game is ready to play.
• ttt:win – Fired when game is a win.
• ttt:draw – Fired when game is a draw.
• ttt:playing – Fired upon user action.

Enjoy the weekend! If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.