DEV Community

Sunfire
Sunfire

Posted on • Originally published at blog.hitsaru.com on

2

Tic Tac Toe – another browser game

** 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.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay