Tic Tac Toe Code Challenge

Sam Lesser
6 min readJan 8, 2021
Can you solve this challenge?

My Tic Tac Toe Code Experience

Over the past few weeks, I’ve been working on my technical skills as an aspiring developer. I primarily used LeetCode, as a source for my coding challenges to improve my problem-solving and analytical skills. The experience is great but can be frustrating at times, especially if you time yourself.

I decided to take another approach and collaborate with a good friend of mine who is well established in the tech industry. Together we spend about an hour solving a tougher problem. In the end, we go over it and I get some much-needed feedback. One particular challenge comes to mind. It left me with a better understanding of my own initial approaches and misconceptions. I’d like to share my thoughts and experience on this. I hope this experience will give you some insight into refining your own problem-solving skills.

The Prompt

“Given a completed game of Tic Tac Toe, how can we write code to return whether the outcome of a particular game?”- My friend Co-partner

It’s an easy question to answer if your a person doing this task. You look for “3 in a row” or “3 diagonal” and you’ve got your winner. If you don’t have those patterns, you’ve got a tie. Yet breaking that down into steps a computer can understand is a bit more work than that. I found it troubling, what instructions do you start with first? I had to look at the problem as a tangible object or personal experience. From there I applied what I knew and what came to mind. It’s important to point out that we all have real-life experiences that can impact the decisions we make in life. In a challenge, we can also summon these memories as a tool. The question is will they lead us astray?

First Thoughts

The first thing that jumped out at me is the 3-D object of a tic tac toe board. You may have remembered this game in your early childhood. The pattern jumped out at me right away. It’s 2 by 2 lines that cross to make a 3 by 3 grid, which looks like this”#”. My co-coder listened carefully and agreed. I went on thinking in this manner, talking and typing up potential ideas. We went through what made sense and what was off or too ambitious. Which landed us with the following conclusions.

  • The structure is a 3 by 3 grid
  • We should treat the input as a Nested data structure
  • The input should be 3 arrays nested in a single array
  • Nest For Loops seemed like a good starting strategy

We moved on from this point to implementing code. It’s important to note that not everything was pre-planned out. Yet we had a general sense of what the layout would be, leaving us a nice space to work in and frame our thinking. It may seem odd that we spent so much time here, but it’s an important phase in the problem-solving process that often gets overlooked.

Hang-ups

In my past career, I’ve had to make a lot of decisive actions. The success I’ve had with this is firmly rooted in what I know and my past experiences. It allows me to make useful split-second decisions. The insight I had in solving this problem was I simply did not have enough experience base. So I had to rely on probing and probing at code, which wasted time. My graceful & kind co-coder helped re-position my thinking a few times, as often you can go on tangents, over-looking the obvious. Here are the major mistakes I made in solving this problem. They may seem obvious but in the driver’s seat, it can be a different experience. Just keep that in mind, we are all human. Silly mistakes can happen, it’s what you do about it that counts.

  • Viewing the tic tac toe board as a 3D nested structure vs 2D nested structure. Duh 😒😒 😒!
  • I did not catch this: In a nested for loop: invert your indices, this changes the searching pattern in a nested data structure.
  • Solving the board with one set of nested for loops
  • Rely less on debuggers, console.log(), compilers, etc.

The Solution

The solution was rather simple in the end. Yet the skill is seeing these patterns on your own and articulating them in words and code. It’s a skill, which means it requires practice like anything else. Take a look at what we came up with.

Ways to Win:

Longitude Example: 
ticTacToe[0][0]='X'
ticTacToe[0][1] ='X'
ticTacToe[0][2]='X'
Latitude Example:
ticTacToe[0][0]='X'
ticTacToe[0][1] ='X'
ticTacToe[0][2]='X'
Left Cross Example: All positions must be reflected in the matches!
ticTacToe[0][0]='X'
ticTacToe[1][1] ='X'
ticTacToe[2][2]='X'
Right Cross Example: All positions must be reflected in the matches!
ticTacToe[0][2]='X'
ticTacToe[1][1] ='X'
ticTacToe[2][0]='X'
  1. Longitude: Each sub array’s index value is the same.
  2. Latitude: sub-array1's index value is equal to sub-array 2 and sub-array 3
  3. Left Cross: Hard code, we need our counters to match with each set of indices. Otherwise will get false positives.
  4. Right Cross: Hard code, same deal here.
  5. We Divide the work into 3 nested for loops.
  6. Each nested for loop is looking for an O-player winner or an X-player winner. “X”s and “O”s are counted separately.
  7. Each nested loop has an X-counter and an O-counter. As we find a match in the nested array’s elements, we increment.
  8. If either X-counter or O-counter reaches the value of 3, we return an “X wins” or “O wins” respectively.
  9. If both counters stay under 3 we return “tie”

Take Away Dinner

Eating humble crow

Practice makes perfect. My big take away here is I just haven’t wrestled enough with the material. Exposure makes a difference, you have a robust bank of experiences to fall back on. It’s also a fair estimate as It’s only been a week that I have been seriously practicing in this way. If you’ve ever studied for an SAT or ACT test you know it can take a considerable amount of time and effort to see any sort of results. We all progress at our own rates and much like life, the race is against yourself. So don’t get frustrated, just keep trying! You have to be patient with your growth, persistent in your attempts to improve, and judge yourself from a practical standpoint. I take this approach to heart as it’s worked for me in the past. That being said let’s look at how I extract valuable feedback from my gaps in knowledge, hick-ups, and boo-boos.

  • A picture is worth a thousand words…Use more Visual tools, draw out things more, play with shapes, see if that tickles out additional patterns. Make your own use cases up some cases that trigger wins, losses, ties.
  • Potential False Positives In this challenge, spending a bit more time understanding what false positives could happen would have helped.
  • Write code like it’s a term paper… more seriously in text editors like google docs. It shows you have a great literary and understanding of syntax.
  • What Slips through the cracks…You may miss patterns at first, don’t get hung up on them. Study them instead. If you’ve learned a new pattern you’ve grown a bit more.
  • Overwhelming ?…Break down larger problems into small ones, a loop for each step isn’t so overwhelming to work with as opposed to one large one.

I hope this blog helps highlight some of your own short-comings. I like the social component in my skill-building, it makes a difference in the study, feels almost like a tutor or study group. I find you tend to get more useful feedback this way. Perhaps this can make a difference in your own development.

StackOver Flow Solutions https://stackoverflow.com/questions/1056316/algorithm-for-determining-tic-tac-toe-game-over

--

--

Sam Lesser

Career Changer, Software Engineer & Web Developer