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

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

100 thoughts on “JavaScript Tic Tac Toe Project Tutorial – Unbeatable AI w/ Minimax Algorithm

  1. I have made the same implementation of the minimax algorithm…although still the AI is not working properly.
    https://codepen.io/helsey/pen/oEGrjy?editors=0010

  2. Great video. Am trying to make an S.O.S game on a 7×7 grid. its alot like tic-tac.toe. how do i do it with this logic?

  3. Please zoom out and scroll down so not all of the code relevant to what you're talking about is covered up by the progress bar on Youtube, for those of us who are constantly pausing to try and keep up with your super fast autocomplete, that I am very jealous of.

  4. Program is bugged, if you play the sequence "1,3,9" the computer will answer with "5,2,6" instead of going "5,2,8" and winning.

  5. Who knows plz Relpply. I'm new in coding world and this video is great but my simple doubt is how to save apk file in laptop and also how to add Banner ad in this games…

  6. Isn't it 308px in width not 310?
    There is 4 borders and each one is 2px, so three boxes plus borders is not 310.

  7. on 20:00 wow , on the first time I've watch this I'm having a hard time figuring out where that getElementByID(squareID) came from, I'm so slow I guess, because I thought you can only use getElementById by only getting the id when you declare it on the DOM, I was so frustrated that I stop watching this, now for the second time, I figure it now, so that squareID is a reference of the Cell ID itself and you also don't need to put a a quote to the getElementById("squareID") because the event squareId came from a square.targe.id so it is an id by itself, AM I right ? May I also ask if there is any way I can do that by using the querySelector ? like this
    document.querySelector(squareId).innerText = player; so only getElementById is allowed for this?

  8. there is a problem in the logic..you can find it in a 39:00 minute..when it pops up saying tie game instead of saying "You Win" otherwise it is very informative.. thank you..

  9. Playing 5, 4, 3 will result in a loss. This should be a win. How do I fix this? I tried it with my code and the GitHub provided code.

  10. good tutorial, really well explained but i would like to put some pictures instead of X or O

  11. At 39:05 it wasnt a TIE, than you WON actually (altough all the fields are reserved, you have 3 squares in a row from the top left to the bottom right)… Anyway I really appreciate your video it has helpd a me a lot. Thank you for it.

  12. Hey dude, Many thanks for the video. Has been great to go through it. Learned a lot. I noticed some errors, which I think allows the algorithm to be beaten. Another user in the comments also mentioned it.

    at 41.20 Line 94 should be huPlayer, and not Player.

    With it being Player, I could always win if I played 1,8,6,3,9. But once that was corrected, I couldn't win.
    Also I'm still learning a lot, but early on you state the game is a tie, however you clearly won. I think that is because the checkTie function only checks for empty spaces, and not if the game has already been won (because of this when testing early on I noticed, if you win, and there are still spaces on the board, the aiPlayer takes a turn. I guess this doesn't matter as with the minimax algorithm, its impossible to win, so the best you can hope for is a tie).

    Hope this helps other people who go through this video. Really awesome, and thank you so much for sharing.

  13. Great tutorial. How did you figure out what properties of the game were required, and which order you'd have to go through? Is there a resource you use that lists the game mechanics?

  14. thanks so much for your effort, i'm learning javascript and i have a question, what S in line 66 stands for i'm confused and also a and e in line 43?

  15. Trying to work out a lil bug on my end. My problem is with the minimax function. I get the whole, score is undefined. I will be able to work it out, but just wondering does the .score property become defined to the minimax function at line 95 and line 97, in the code written by you guys at 41:53?

  16. HELP PLEASE!
    This is a really great tutorial and I'm currently done with part 4. The O's aren't showing up and the console says there's an error and 'style' is not defined, so i copy and pasted the html, css, and JS (part 4 only) and the O's still don't show up and 'style' is still not defined, what do i do? 🙁

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

  18. I need help on part 5, the blue squares aren't showing up when I win, I'm using codepen.io here's the link
    https://codepen.io/Love2program/pen/GBaBwa

    EDIT: Nvrm, it works! Just some silly mistakes I made.

  19. * If only one square is marked on the board and the middle slot is free – mark the middle square. i am coding my tic tac toe by this logic , and until now it wotks great

    * If a row, column, or diagonal is marked with two slots of the computer – mark my disruptor.

    * If the row, column or diagonal is marked with two squares of the opponent – mark the third slot.

    * If three squares are marked and my central squares – to mark a block in a row or line in which one of the opponent's squares is marked, preferably a corner slot.

    * If there is a vacant corner and on either side of it two empty lines – mark the corner

    * If the middle slot is free, mark it

    * If there are three available slots in a row, in a row or diagonally – mark the corner

    * If there is an available slot – mark it

  20. Not sure what I'm doing wrong, but I have the code exactly like in the video. However I get an error and the O's don't show when I click the spaces.

    This is my line 32:
    funtion turn(squareId, player) {

    I get this error code:
    Uncaught SyntaxError: Unexpected identifier script.js:32

    I also get this error when pressing the 'replay' button:
    Uncaught ReferenceError: startGame is not defined
    at HTMLButtonElement.onclick (tictactoe.html:34) tictactoe.html:34

    This is my line 34 in html:
    <button onClick="startGame()">Replay</button>

  21. It would be better tutorial if you'd showed your thought process and order in which you would actually create those functions. You just follow line by line from the finished code trying to explain why. Too much of: 'You will see later, we will need later on, You'll understand when I get to it…' etc. which is confusing. In real life you don't know exactly what you will need later.

  22. You don't really teach anything properly, you just explain how things work.
    You just quickly tell what this does to this and you go so fast. Even when I set the speed of the video to .75 I can't keep along.

    Would have been a great tutorial with a bit more effort.

  23. At 38:44 after you won, the computer makes a new move ! The game must be over by then and it should not be possible for the computer to make another move..

  24. so the only thing I'm confused about is lets say huPlayer has three in a row but on the next move the aiPlayer has a space that would allow them to win the game it still says ai wins although the huPlayer took the first move
    how would you fix that?

  25. How does one get the game to work on TOUCHSCREEN? With the vast majority of devices being touchscreen, I am a little disappointed that the functionality required a mouse.

    I am learning JS, so any mention of targeting DOM elements is well beyond my capability presently.

  26. 51:10 – It looks like the game cares more about the human player not to win, than defeating the player. Instead of making the winning move on cell 4, it blocked the human player (cell 2) from winning. 😛

  27. I am at 20:33, just got done with the turn function. It seems in the turn function that origBoard can also be huPlayer or aiPlayer and still work. There must be a reason to choose origBoard over the other two. Anyone know why?

    Another way:

    function turn(squareId, player) {
    origBoard[squareId] = player;
    document.getElementById(squareId).innerText = player;
    }

    can be:

    function turn(squareId, player) {
    huPlayer[squareId] = player;
    document.getElementById(squareId).innerText = player;
    }

    and still work.

    Thanks you geniuses.

  28. Instead of using the AI player, is it possible to simply replace the AI player with a second human player? Been trying to play around with the code but so far no success.

  29. Revised method in Github to prevent player winning: in the minmax function change the line **moves.push(move);** to:

    if ((player === aiPlayer && move.score === 10) || (player === huPlayer && move.score === -10))

    return move;
    else
    moves.push(move);

  30. play my own version of tic-tac-toe at http://tonixhub.com/. This is purely written in JavaScript using classes with singleton. 😉 enjoy! You may download my code at https://github.com/tonix00/tic-tac-toe

  31. 19. document.querySelector(".endgame").style.display = "none"; this part is pain in the neck every time I enter it inside my code it displays this message "Uncaught TypeError: Cannot set property 'display' of null
    Line: 19"

  32. when i win sometimes it still tells me its a tie…i have checked the arrays in the const winCombos and all the posibilties are there…is anyone else running up on this problem

  33. Im new to coding, but very curious as to why not use margin: 0 auto to center it instead of that odd looking styling ?

  34. 0:10 Is not a Tie Game, it is Win game for circle. Someone know what is missing for this algorithm to work?

  35. thanks a lot
    I made my first js game . ..
    I can't understand how is the Algorithm works
    but it's a great start . . .
    +
    the links in the description are so helpful 3>

  36. I found bug. (Which occurs only b4 minmax alg. is implemnted) however -> if you race with AI for win EG i put O on left bottom corner then AI X in the top left corner I shall win when going bottom mid O AI goes middle top X then I put 3rd O in the bottom right corner and now instead win for me there is an AI turn and win for AI.

  37. Another bug when you win with last move the game is also draw. I know that Player vs minmax will never win. However if someone want to apply PvP have to fix that 🙂

  38. Would somebody help me make my Tic Tac Toe have a scoreboard and make the board size user input (anywhere from 3×3 to 6×6)?

  39. in the last attempt there's a case when u hit the 3 cross but the program consider it like it's a tie

  40. Brilliant tutorial. Btw can you tell me how you got the browser output display to the right of the editor?
    Thanks,
    Anish

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

Your email address will not be published. Required fields are marked *