My brother asked me if I could make a tic tac toe game for the command line.

It wasn’t long before I got bored with the its limitations and moved on to the glorious world of sound, color, animation, and mouse/touch interaction that is HTML5!

And this,

Became this,

Play the game here
Make sure your sound is on!

Workflow

Half the time was spent working on the appearance and visuals of the game. The other on the AI. I thought it would be quick to get the game working but it ended up taking quite a while.

Design side

In terms of sound, I had come across this tutorial series by Jos Dirksen on webAudio before, and this looked like a good chance to try integrating it into a project. I also read the free digital version of Boris Smus' book Web Audio API. To see what all this was for, win a round and check out what happens.

I used JQuery UI to make the game elements draggable. I figured this would be a fun feature in a multiplayer setting. A future goal is to integrate Box2D for gravity (like this).

In terms of CSS, the sheen seen when you hover over ‘Challenge a friend’ button comes from this awesome snippet by Kushagra Agarwal. The smooth transitions are from Daniel Eden’s animate.css.

AI side

The goal was to make the AI unbeatable but alas, it has an achilles heel. Can you find it?

It’s a stretch to call it an AI, because I spelled out strategies it should follow as per this article.

In the future, when I learn more about AI and machine learning from places like Udacity, I plan on making a “truer” AI that “thinks” and can purposefully play differently each time.