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”
Check out this playlist of more game development tutorials: https://www.youtube.com/playlist?list=PLWKjhJtqVAbmqFs83T4W-FZQ9kK983tZC
Hi. Im not geeting the id of the square by clicking it. Did someone else got this problem?
do you have any code for alpha beta pruning of tic tac toe
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
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!
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)
its more beautiful when you understand most of the code
if its the html and CSS or JavaScript
its amazing
would someone be able to show me their code for how they where able to overcome the problem where if the final move was a win it still resulted in a tie being displayed?
try 3 > 9 > 4 > 7 > 8 and you'll win every time.
why you need winCombos.entries()? Since you can use just:
for (win of winCombos) {
….
}
hello, can you tell me please in what min you explain the option for the dead heat
?
Is there a pvp tutorial for this?
i would have used settimeout function just to delay the AI's play so that it feels a lot like playing with an opponent.
didn't understand a single thing of javascript part..!
How do I show by console the movements that Ai made? heelp!
Says: "It's not possible to win" just after beating the AI at 44:53 The minimax algorithm needs to be fixed!
If the ai is suppose to be unbeatable then how come at 44:45 it says Tie game when O actually won?
I believe there is a flaw in your algorithm for checking tie games, at 39:01 it says Tie Game even though the human player won.
Great video! I have a question, this example is 3×3, how would it be with 4×4? any tip?
0:10 How is that game a Tie since there is three O's in the right column? lol
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.
Need someone to explain what the reduce is doing in 22:45 please.. thank you