• Wednesday , 29 January 2020

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

Code Canyon



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

3d Ocean

Related Posts

22 Comments

  1. freeCodeCamp.org
    December 9, 2019 at 07:37

    Check out this playlist of more game development tutorials: https://www.youtube.com/playlist?list=PLWKjhJtqVAbmqFs83T4W-FZQ9kK983tZC

  2. Juan Andrés Rodríguez Pedreira
    December 9, 2019 at 07:37

    Hi. Im not geeting the id of the square by clicking it. Did someone else got this problem?

  3. farhan shahriar
    December 9, 2019 at 07:37

    do you have any code for alpha beta pruning of tic tac toe

  4. david rose
    December 9, 2019 at 07:37

    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

  5. Felix
    December 9, 2019 at 07:37

    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!

  6. Bram Bakker
    December 9, 2019 at 07:37

    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)

  7. Human Civilisation
    December 9, 2019 at 07:37

    its more beautiful when you understand most of the code
    if its the html and CSS or JavaScript
    its amazing

  8. jake moseley
    December 9, 2019 at 07:37

    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?

  9. disjorden
    December 9, 2019 at 07:37

    try 3 > 9 > 4 > 7 > 8 and you'll win every time.

  10. Tarntanate Memanee
    December 9, 2019 at 07:37

    why you need winCombos.entries()? Since you can use just:
    for (win of winCombos) {
    ….
    }

  11. Pony
    December 9, 2019 at 07:37

    hello, can you tell me please in what min you explain the option for the dead heat
    ?

  12. Nadia Jody-Anne Huang
    December 9, 2019 at 07:37

    Is there a pvp tutorial for this?

  13. Frozen Viking
    December 9, 2019 at 07:37

    i would have used settimeout function just to delay the AI's play so that it feels a lot like playing with an opponent.

  14. Arogya Garg
    December 9, 2019 at 07:37

    didn't understand a single thing of javascript part..!

  15. Alfonso Reyes1337
    December 9, 2019 at 07:37

    How do I show by console the movements that Ai made? heelp!

  16. Daniel Wan
    December 9, 2019 at 07:37

    Says: "It's not possible to win" just after beating the AI at 44:53 The minimax algorithm needs to be fixed!

  17. Daniel Wan
    December 9, 2019 at 07:37

    If the ai is suppose to be unbeatable then how come at 44:45 it says Tie game when O actually won?

  18. Daniel Wan
    December 9, 2019 at 07:37

    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.

  19. Alfonso Reyes1337
    December 9, 2019 at 07:37

    Great video! I have a question, this example is 3×3, how would it be with 4×4? any tip?

  20. LasTCursE69
    December 9, 2019 at 07:37

    0:10 How is that game a Tie since there is three O's in the right column? lol

  21. Boris Hypecode
    December 9, 2019 at 07:37

    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.

  22. Yung Audacity
    December 9, 2019 at 07:37

    Need someone to explain what the reduce is doing in 22:45 please.. thank you

Leave A Comment

You must be logged in to post a comment.