This weekend I spent my weekend hobbyist energy on some simple game based on HTML 5 canvas element and Javascript. The game is now playable on the main site. The snapshot is as follows. Remember to click “Start” to play!

HTML5 TicTacToe Game

The game does not have an AI yet, only two players all controlled by you, so the code logic is quite simple. The key point for me is to start from zero background in HTML 5 canvas and little Javascript to build things up. I’ve learned how to use the canvas, how to interact with the mouse, how to load images, how to use Javascript arrays, and so on, and those did not took long.

There are some issues with browser support. On Google Chrome it is working fine (at least as I intended). On Safari, the last stroke (circle or cross) only shows after an alert box is shown, not before. On Firefox, everything is a mess because of the way I take mouse locations. Very occasionally on Firefox you’ll get the “somebody wins” alert, but those does not make sense at all. For now I do not have a plan to fix it.

Update: On the iPhone, Safari and Google Chrome has the same issue as with Safari on Mac; this is not surprising since they are using the same kernel. On Android browser (Honeycomb) this game does not work.