Tic-Tac-Toe Game (FCC Speedrun Project #9)
The “Magic Squares” Version. Because why not?
When I was young, my dad would often take the family out for Sunday drives after church. We’d stop by the donut shop, pick up some treats for the road, and then off we’d go. This was back before GPS, and my dad always had a new “shortcut” to try out — inevitably some long, meandering, scenic route. We complained about his shortcuts — even eventually started calling them “long cuts” — but we enjoyed the drives nonetheless.
With this project, I decided to take a bit of a “shortcut” by placing my game of tic-tac-toe on top of a magic square. It may not be shorter (let alone better) than a more typical implementation… but I definitely enjoyed the trip.
Magic Squares
It turns out that magic squares — those grids of numbers we all remember from childhood — have a lot in common with a tic-tac-toe board.
Suppose, for a second, that you were given the task of coming up with all the combinations of three different numbers from 1–9 that sum to 15. After doing a bit of arithmetic, you’d come up with 8 combinations:
And here’s where the “magic” in the magic square comes in. These numbers (1–9) can be arranged on a grid so that summing the numbers across a row, or down a column, or along a diagonal always gets you 15. Like so:
You have a little bit of flexibility with moving the numbers. You can rotate the board, or flip it along an axis. But that flexibility is limited. You’ll always have 5 in the center, for example, because 5 is part of four different “combinations” that make 15, and there are four lines through the center of the magic square.
Tic-Tac-Toe
Okay, great. We know how magic squares work.
But now imagine that you are playing a game of tic-tac-toe on top of a magic square:
In tic-tac-toe, you win by getting three tokens (X’s or O’s) in a row. But if you’re playing tic-tac-toe on a magic square, there’s another way that we can think about winning.
On a magic square, you “win” when you have X’s (or O’s) on any three squares that, when added together, total 15. In the game above, O’s win because there is an O on the “6” square, the “1” square, and the “8” square, and 6 + 1 + 8 = 15.
You can even eliminate the board entirely:
That might not sound helpful, but it does mean that we can do some fun tricks when we’re coding up our game. We can choose whether we want to think about moves and strategies in terms of positions on the board, or in terms of arithmetical operations. Here are some of the “shortcuts” that I included in my version:
Setting up the board
Before I could start, I needed to convert my tic-tac-toe board into a magic square. I did this by assigning appropriate id values to the squares on the board:
Looking at win conditions
A common way to check whether a player has won the game is to create a collection (often an array) of winning combinations, and then compare the X’s and O’s on the game board to those patterns. Like so:
But if you’re playing tic-tac-toe on a magic square, you have other options. Instead of trying to match a winning combination, I searched for combinations of 3 numbers that total 15:
Forming strategies
On a magic square, we can also think about strategy a little bit differently. How can you tell whether a player already has two in a row? How do you determine if that player can win? And how do you find the winning move?
Instead of checking to see if a player had two X’s (or two O’s) along each row, column, or diagonal, I checked for two-in-a-rows using arithmetic: I calculated the sum of every “pair” of numbers a player had, and then subtracted that sum from 15. If the resulting number represented an unclaimed square, I’d found a winning move.
And those aren’t the only strategy decisions that can be made using magic squares.
Want to play a corner? Choose any even number. Want to play opposite your opponent, through the center of the board? Choose 10 minus wherever your opponent played. And so on.
Concluding Thoughts
Is playing tic-tac-toe on a magic square simpler? Probably not. But it’s definitely interesting.
Next Up: Image Search Abstraction Layer.
