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

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

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:

tic.tac.toe

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:

JavaScript API

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

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.

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.

Categories and Tags
Links

© 2006 - 2018 Martin Ivanov