Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Tic Tac Toe

Playable here.


I first sorted out the model of the game (the game() object), and then made the game playable in the console. Then I created DOM elements to link to the game model. The game squares are div elements, each containing a canvas element, all within the main element. The canvas elements are where the noughts and crosses are drawn. Once I had the animated hand-drawn noughts and crosses, I realised it would make a lot more sense if the game grid was hand-drawn too. Behind the main element is another canvas, where the lines for the board are drawn before play.

Cool Tech


There were a lot of things I wanted to animate, so I wrote a general function for it. Basically, each canvas drawing I want to animate is passed as a function to the animate() function. The animate() function does one thing: "Change this parameter of this function over this amount of time according to this curve, and do this other function when you're finished."


I recorded audio of myself drawing noughts and crosses with a pencil and a whiteboard marker. This also helped inform how long it should take to draw these on the screen. It turns out that in real life I can draw a line in about 200ms.


After about an hour of thinking and staring at graphs and wishing I could apply the maths I learned in high school to solve the problem of "how does the pencil accelerate when a human draws a circle?" I finally realised I wanted to mimic the ease-in-out behaviour of CSS transitions, and apply that to the speed of my animations. Google helped me do the rest once I knew "js easing equations" was what I needed to search for.

Todo List

  • HiDPI support in canvas drawings
  • persistent storage of scores
  • Changing of player names too easy to break
  • The drawing is too exact. Create an array of hand-drawn Os and Xs, pick a random one for each play (use SVG, figure out how to animate those)
  • Make highlighting of winning squares look more like somebody highlighted them with a highlighter, rather than just setting the background of the divs
  • the message box still jumps around - layout problems


You can’t perform that action at this time.