Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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



No description, website, or topics provided.






No releases published


No packages published