Summary: Learning to code by following the instructions of experienced coders is one of the best ways to learn a programming language. What I have found is that by watching them code, I learn not only what specific commands do, but I also learn how they think about solving problems. Then when the code is working, I can go back in and modify it with my own customizations and that’s where the real learning happens for me as I now have a sense of pride with “my program” (even though I may have modified just a small percentage of it).
One hour to learn how to code a Tic-Tac-Toe Game
The total time of the 6 videos that I watched to learn how to create a Tic-Tac-Toe Game in the browser was 1 hour. In reality between pausing the videos to keep up with the typing of the code and finding my mis-typed commands that led to syntax errors, this course took more like 2 hours to finish. Then when I added in some of my own code to customize it, that took another hour to figure out how to do the change I wanted to make.
Here’s the FREE Tic-Tac Toe Game Course available on Upskill Courses (you’ll have to sign up with your email address and password the first time to gain access).
The course has 6 video lessons as follows:
✓ 1. Intro (4:41)
✓ 2. Drawing Board (10:20)
✓ 3. Executing Moves (11:55)
✓ 4. Updating Dom (7:10)
✓ 5. Scoring the Game (13:49)
✓ 6. Code Review (9:04)
There are 3 files you’ll create as part of the game:
- index.html
- style.css
- code.js
I like the course design because you type in the code as you see it on the screen. I think this is very helpful because you are participating in the typing of the code as opposed to just copying and pasting the code from some files — you don’t really learn anything by copying/pasting. As you type and duplicate what you see on the screen you hear the thought process of the instructor and you are thinking more deeply about the coding itself. You’ll understand how to debug your code in the Console in the browser.
Here’s what the game looks like when Player X wins:
If you’d like to try out the game, click this LINK and then click the Green Run button at the top of the page. Then just click any square and play Tic-Tac-Toe.
Note: I have obfuscated the javascript file in the above link, because if you want to actually learn how this game works, the way you learn is actually following along with the videos and duplicating the typing of the code. And, I wanted to introduce you to this cool JavaScript Obfuscator online site that you can use as well, if you want to learn how to hide your JavaScript for future projects.
I also added in an additional feature to the game that is different from the videos in the case where there is a Tie or “Cats Game” and there is no winner. In the game on the video at the end of the game if there is no winner, it would just look like the screenshot below and the only way to restart the game was to refresh the page:
Now, with the additional code I added, the player is notified that it is a “Cats Game” and there is no winner and when the player clicks okay the game starts over:
I would encourage you to take the course. You will learn some basics of HTML, CSS and Javascript. The course is relatively short and set aside 2 hours to complete it.
BONUS: Can you figure out how to add in the additional code you’ll need to determine if the game is a Tie (“Cats Game”)? Let me give you a hint:
- Before the javascript function that tests if this.gameHasWinner(), create a javascript function and test if this.catsGame() is true or false.
- In the catsGame function test to see if each element in the array is not blank. If they are all not blank, then you would return “true” otherwise return “false”
If you can’t figure it out, here’s a link to the three files needed for the Tic-Tac-Toe Game in our Upskill Create Community for you to download: LINK.
Join our community of “Upskillers” who are passionate about learning, collaborating and encouraging others to reach their career goals. Click the JOIN NOW! button below.
Leave a Reply