HTML 5 and CSS3 Tic Tac Toe

My Head of Creative Technology was visiting our Delhi team from Singapore last week and upon touching back down at Regional HQ set us the Challenge of creating a Tic Tac Toe game with nothing but HTML 5 and CSS3

So naturally I googled and got this

http://www.dreamincode.net/forums/topic/247361-simple-tic-tac-toe-using-html5-css3-and-javascript/

and

http://rodrigo-silveira.com/html5-tic-tac-toe-challenge/

In the second post Rodrigo had decided to see how fast he can code a tic-tac-toe game. Crazy but it spurred me on. Its close to 43 degrees in Delhi and rising so while I am trapped in air-conditioning lets go…

I barely remember how to create a new file on my Mac with a html extension and then remembered the TextEdit can do that and very proudly I drop a file next to my Xamp folder which weirdly is the entire contents of my document drive at home. I start working my way through FromTheSprawl post and hit my first new thing. Its a nifty tag creating dynamic pallets using JavaScript. Immediately I think I am on the wrong lines but I double check the challenge, Javascript isn’t out.

But the tutorial is still going to fast for me. So lets break it down. I have single box canvas and when I hit on it I want it to do something. Anything.

function canvasClicked(canvasNumber){alert("hello world!"); }

Ok so now lets display something in the Canvas. Putting X ontop. Wait in the post the guys are drawing their X, W3C has an example that displays words.
So combining the two we get.


function canvasClicked(canvasNumber){ var c = document.getElementById("canvas1"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("X",10,50); alert("hello world!"); }
// ]]

 

So I got a call and went out eat sushi, soaked in the swimming pool. I came back and added all the squares for the game. Just in case you thought life in Delhi was dull.


Kavita Kapoor’s amazing Tic Tac Toe game



Anyway taking out the alert box seems to break the whole thing but I shall ignore this and move onto creating the game logic. When I finally come back to this I am not sure if the computer is going to play or two humans. For now, it was straight forward task to create a variable which tracked if it was X or O turn.

At that point I played my game against myself repeatedly till bedtime and slept happy.

kavitakapoor

Kavita is an advisor to Micro:Bit Educational Foundation and Tido. She writes about technology and business. She is mostly based in London. You can contact her directly or via twitter (kavitakapoor)