JavaScript Tic Tac Toe Project Tutorial – Unbeatable AI w/ Minimax Algorithm




A full web development tutorial for beginners that demonstrates how to create an unbeatable tic tac toe game using vanilla JavaScript, HTML, and CSS. Learn the Minimax algorithm!

⌨ Part 1: Introduction (0:00)
Code: none

⌨ Part 2: HTML (2:58)
Code: https://github.com/beaucarnes/fcc-project-tutorials/tree/master/tictactoe/2

⌨ Part 3: CSS (4:23)
Code: https://github.com/beaucarnes/fcc-project-tutorials/tree/master/tictactoe/3

⌨ Part 4: JavaScript: Basic Setup (10:28)
Code: https://github.com/beaucarnes/fcc-project-tutorials/tree/master/tictactoe/4

⌨ Part 5: JavaScript: Determine Winner (20:32)
Code: https://github.com/beaucarnes/fcc-project-tutorials/tree/master/tictactoe/5

⌨ Part 6: JavaScript: Basic AI & Winner Box (30:45)
Code: https://github.com/beaucarnes/fcc-project-tutorials/tree/master/tictactoe/6

⌨ Part 7: JavaScript: Minimax Algorithm (39:25)
Code: https://github.com/beaucarnes/fcc-project-tutorials/tree/master/tictactoe/7


Special thanks to David Daly and myloginistaken who found a mistake where the game sometimes incorrectly shows a tie game. The ‘Part 7’ GitHub code now contains this fix.

🔗Minimax article: https://medium.freecodecamp.org/how-to-make-your-tic-tac-toe-game-unbeatable-by-using-the-minimax-algorithm-9d690bad4b37

🐦 Beau Carnes on Twitter: https://twitter.com/carnesbeau


Learn to code for free and get a developer job: https://www.freecodecamp.com

Read hundreds of articles on technology: https://medium.freecodecamp.com

And subscribe for new programming videos every day: https://youtube.com/subscription_center?add_user=freecodecamp

Original source


22 responses to “JavaScript Tic Tac Toe Project Tutorial – Unbeatable AI w/ Minimax Algorithm”

  1. why would you put the text you saying right over the code your writing. This was a huge godamn mistake I can't read the code because your dialog box is always right onto of what your writing, why not put it at the top. So stupid

  2. This is great stuff, I was lost at 20:00 , the 0-marker did not show. I tried to find it out first by using the console, then by comparing code. I must obviously have done some type of error but I did not find it. In many other Youtube videos I would be stuck at this stage, and I found it to be very good that one can download your code for each chapter. Helped out a lot. Thanks man!

  3. The tie game at 39:00 is not a tie game. Field 0 – 4 – 8 were filled by an "o". Simple fix is to check if there is a win before checking if it is a tie, and than make sure the tie isn't checked (or you might get both)

  4. You code doesn't work! I win several game on the last move and I got a "Tie game"… If an unbeatable ai is to don't recognize a human win so it's unbeatable… And I don't speak about looooong line of code without a word about it, the "const-let-var lottery" and the "you'll see later". Just take a little more time to explain what and why you do things and it'll improve your tutorial.

Leave a Reply