I like projects that tell a story. A good story can more effectively connect people to a brand or product, and I enjoy the challenge of telling a great story through seamless design and code.

Wanna play me in Tic-Tac-Toe? (I'll go easy 😉)

Just a little coding challenge I did for funsies.

⬇️ Jump to the game ⬇️

I was inspired after seeing Rich McLaughlin's Legend of Canvas presentation on how he recreated the NES Legend of Zelda using the Canvas API. Though I didn't have time for something that ambitious, especially never having coded a game before, so I wanted to start with something simple - and what better game to dip my toes into coding a game than Tic-Tac-Toe (sorry, I had to).

Horrible puns aside, this was a humbling lesson that even the simplest of games can have complex logic under the hood. On the surface, Tic-Tac-Toe is basically nine squares, two players, and each player alternates selecting a square until one gets three in a row.

Simple enough, right?

I thought, OK, so basically the logic should be: a player clicks on a square, then the game automatically chooses an available square after that to simulate an opponent, then rinse and repeat until either letter has three in a row. I assumed the hardest part would just be keeping track of the game state after each move.

Simple enough, right?

Actually, yes, that simple logic would satisfy basic game play and you could call it a day.

But I knew it could be better. Having the computer/opponent choose a random square, while it did occasionally create a challenging game, just wasn't challenging enough. So I started thinking about what I wanted from the game as a player to make it more fun and challenging. For example:

• What if I wanted to detect when a player has two in a row? Then I should probably add logic so that the computer blocks that win.
• What if the computer has two in a row? I should probably add logic to have the computer choose the remaining square in that row over other available squares.
• And wouldn't it be interesting to see at a glance what order squares were chosen?
• Also, if the middle square is available, the computer should take it as soon as possible since it is the most advantageous square.
• And if we're going to the trouble of adding all this functionality, it should probably look decent.

This is where things got fun and interesting! I also decided to use jQuery just to move faster and focus on the actual logic and design.

There are definitely further improvements to be made (and likely a bug or two to fix 🤣). But not too bad for a fun little side project.

Let's play!