FCC Speedrun #1 — Tic Tac Toe

This was by far the most difficult project I’ve taken on since joining FreeCodeCamp. I’ve started and restarted more times than I can count, each time trying to build it a different way, so you can imagine how excited I am to finally be able to cross this off my todo list.

For my first attempt, I followed a really helpful tutorial I found by Mostafa Samir. I should use the term “followed” loosely, due to my impatience and ever shortening attention span. I basically just skipped most of the reading and assumed I would be able to figure out what I was doing after I started with the necessary chunks of code from his article. (I’m basically that one friend you have that buys something from IKEA and insists that instructions are unnecessary, I know, the WORST.)

Anyway, that obviously didn’t work. I got frustrated and put FCC on the back-burner for a while. Every few months or so I would attempt the project again, get annoyed, and give up. One of my main challenges with programming in general, is that I won’t start anything until I can figure out the absolute best way to go about it — seriously, last time I wanted to build my portfolio website, I first decided I needed to do it with Sass rather than LESS, which somehow sent me down a month-long package-manager rabbit hole — so I wasted a pretty absurd amount of time trying to decided if I should use HTML canvas for the game board or not.

I tried the HTML canvas route once, but after messing around with style and position for a while, I decided to go with some basic html/css:

<div class="container">
<div class="page-header">
<h1>FreeCodeCamp Projects</h1>
</div>
<p class="lead">Build a Tic Tac Toe Game</p>
<div class='row'>
<div class='board'>
<div class='cell' id="one"></div>
<div class='cell' id="two"></div>
<div class='cell' id="three"></div>
<div class='cell' id="four"></div>
<div class='cell' id="five"></div>
<div class='cell' id="six"></div>
<div class='cell' id="seven"></div>
<div class='cell' id="eight"></div>
<div class='cell' id="nine"></div>
</div>
</div>
</div>

After setting up the main user functionality for the modal and game interaction, my next challenge (as I assume was the case with most campers at this stage) was understanding the Minimax algorithm. While Wikipedia was helpful in understanding the concept, I relied heavily on the Tic Tac Toe tutorial I mentioned earlier when building my own.

In the tutorial, the goal was for the user to choose a level of difficulty for the game, rather than to choose between X or O. I found this especially valuable, because it forced me to really understand how the algorithm worked, and how I needed to modify it for my particular use. I had to male sure the “X” and “O” values could be replaces by variables set by the user, but I could stick to one function for selecting the computer’s move, rather than needing three functions (one for each level of difficulty).

To make the game challenging, but still sometimes beatable, I set the computer to choose the best move about 90% of the time, rather than the 40% of the time used for the “Novice” level.

This was the first project I’ve completed for the FCC Speed Run challenge and I can’t wait to finally get to move on to the Simon game.

You can see the finished product on CodePen, or check out my source code on GitHub.