** Disclaimer: I’m not an affiliate for anything here, just sharing my honest opinion. **
In an effort to keep working on code, I found another browser game to play with. It’s not as entertaining as my Feed the Snake game, but it’s good practice for looking over code and trying to figure out a different (maybe better) way to write it.
As before, I’m taking my starting point from a Udemy course, Projects in JavaScript & jQuery. The idea is fairly simple – click a square to change it to X or O (they alternate based on turn number), and when there are 3 in a row with the same mark, a winner is declared. It also has the ability to detect a tie game, and provides reset functionality if you want to start over before the game officially ends.
Where did I come from?
For reference, here’s what the JavaScript looked like after I followed along with the videos: First commit to bitbucket
There were a LOT of If statements with AND and OR, and a few lines were repeated. It felt clumsy and quick. So I asked myself, how could I change this?
First, since the original was written in 2014, and had more folders than I felt necessary, I cleaned up the paths and updated the jQuery CDN link.
Then I said let’s get rid of the anonymous functions and set up some actual reusable functions. I also defined what a winning row looks like and made a list of matching variables. From there I was able to create the shell of the check4win() function.
I also did some rearranging. The original had almost everything set within the single click handler. As I created functions and defined variables, I moved them to the level that made sense – some at the very top, even before the page is loaded, and others deeper within. This took a little while, because I had to make sure everything in the function was being accessed at the right time. You see, the tricky thing about JavaScript is the DOM (document object model – aka the elements of the page being loaded and accessible). If you try to access an element of the DOM that you haven’t actually created yet, or before the page is completely loaded, you’ll get an error. So I had to keep testing until I had everything in the right order.
Finally I was ready to do some testing. Played through once, then started a new game only to realize that the winning condition had not been cleared at the end of the last game, so as soon as I clicked the first square on a new game, it gave me the same winning popup. Had to fix that…
Where am I going?
Then, before stopping for the day, I thought I would see how it plays on the phone. So I quickly added the files to my webhost and pulled up hitsaru.com/tictactoe from my phone, only to realize the board was much too small. Easy fix: just make sure meta name="viewport" content="width=device-width, initial-scale=1.0" is set in a <meta> tag in the <head> of the index file. I don’t know too much about improving sites for mobile (YET), but from what I can tell, it plays just fine as is.
On top of it all, I used this as a chance to practice using git to publish changes. If you’re interested, the full repo is available on my Bitbucket.
There you have it – my fun little project for this afternoon. Like I said, I know Tic Tac Toe is way less fun than Feed the Snake, but I’d appreciate if you took a look at it and let me know what you think. Suggestions on improvements are absolutely welcomed – hit me up on Twitter @chillsunfire.