JavaScript Tic Tac Toe Project Tutorial - Unbeatable AI w/ Minimax Algorithm
Vložit
- čas přidán 27. 07. 2024
- 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: github.com/beaucarnes/fcc-pro...
⌨ Part 3: CSS (4:23)
Code: github.com/beaucarnes/fcc-pro...
⌨ Part 4: JavaScript: Basic Setup (10:28)
Code: github.com/beaucarnes/fcc-pro...
⌨ Part 5: JavaScript: Determine Winner (20:32)
Code: github.com/beaucarnes/fcc-pro...
⌨ Part 6: JavaScript: Basic AI & Winner Box (30:45)
Code: github.com/beaucarnes/fcc-pro...
⌨ Part 7: JavaScript: Minimax Algorithm (39:25)
Code: github.com/beaucarnes/fcc-pro...
---
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: medium.freecodecamp.org/how-t...
🐦 Beau Carnes on Twitter: / carnesbeau
---
Learn to code for free and get a developer job: www.freecodecamp.com
Read hundreds of articles on technology: medium.freecodecamp.com
And subscribe for new programming videos every day: czcams.com/users/subscription_cent...
Check out this playlist of more game development tutorials: czcams.com/play/PLWKjhJtqVAbmqFs83T4W-FZQ9kK983tZC.html
What tools and software you are using to make this tutorial video . can you tell me? And how can make this types of videos?
Man not much can match the feeling of getting to the end result and it works!!! I love that feeling of accomplishment! Thanks man! Definitely make more of these!
This is so helpful. Its simple but creates an end project which feels like you've accomplished something
This video has been helpful for not only getting a better understanding of how functions calling other functions works, but also for getting a better understanding of how algorithms work, thank you
Doing more of projects like this will help us a lot
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...
Well, it wasn't designed to be an Android application. It's called Web Development for a reason.
Channel Channel look into google flutter for android apps that's been great for me
Love it! This might now be my favorite video on this channel. The more like this the better.
Super great tuto Beau!! Keep them coming!!
I always dreamed of that these robots that could control themselves with AI was just mind blowing.
Now I couldn't believe that I am only creating this AI.
Thank you very much!
*MIND BLOWN*
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)
Yupp correct ...!
I loved this tutorial, thank you so much!
This is awesome and your lesson and explanations are very helpful!
its more beautiful when you understand most of the code
if its the html and CSS or JavaScript
its amazing
You my friend are a genius! Love this. keep it up!
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...help
@@tewarishivam .apk files are for android devices bro for a laptop there are .exe files
@@tewarishivam2 years has passed, how are you doing, i bet in 2 years you must already get a job in the industry
THANK YOU! I appreciate ALL of the time you put into teaching this!!! "THANK YOU"!!!
Complex, but very iteresting and beneficial project. I have been watching and trying to code like 5 or 7 times)) Now, I am starting to understand... After coding them myself maybe the same times) I hope I can write similar codes on my own.
Thanks a lot for this tutorial.
Great tutorial. I will be chewing on this one for a while.
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.
Great explanation. I wish this video was around when I did my tic tac toe. It took me more than 20 tries just to wrap my head around minimax. :..)
Thanks, I had to read your article quite a few times to wrap my head around minimax. :)
Nice tutorial thanks. However just a side note here: at 38:59 it was not a tie game, you actually won the game but the program did not stop when you won, rather it continued to evaluate if(!checkTie()) which caused the declareWinner("Tie Game") to execute. I fixed this by having a global variable "var finish= null". I set this var to true once I win the game, and I add it to be checked at if(!finish && !checkTie()).
This var will also fix the scenario of the computer still playing his turn even though you won the game.
Of course this var needs to be reset to false once you click on reset otherwise the computer wont play his turns next game.
definitely like and subscribe clean and understandable code also great explanation thank you very much
man you're a genius
dang you type fast bro, great video
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 CZcams 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!
hi man, im russian and i understood everything, very cool lesson)
5:00 ah i see, you are a man of culture as well, Beau
I remember having to do this without a GUI.It was fun to find a way to create a playable tic tac toe in text form purely.
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>
Says: "It's not possible to win" just after beating the AI at 44:53 The minimax algorithm needs to be fixed!
Thank You very much!
in the last attempt there's a case when u hit the 3 cross but the program consider it like it's a tie
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.
Agreed. First focus on algorithm to solve the problem then create whatever you need for that. That's why it is difficult to understand codes without documentation, you'll know the "what" but takes a long time to figure out "why".
@@abhinabacharya7398 Like @Code Explained. He goes first to algorithm how to solve the problem and then actually starts coding. In this order you actually start developing your programming mind.
Here is his youtube channel: czcams.com/channels/8n8ftV94ZU_DJLOLtrpORA.html
True
this is what called Curse of knowledge
Exactlyyyyyyyy😭😭😭😭
Brilliant tutorial. Btw can you tell me how you got the browser output display to the right of the editor?
Thanks,
Anish
0:10 How is that game a Tie since there is three O's in the right column? lol
True
@@anuragbudakoti755
Something is false;
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.
Read the description.
Yes, I added a little check to fix that. I added a global "winner" variable that starts as "false" and is set to "true" when a winner is discovered in "checkWin" reset it to "false" again at startGame.Then when I call "the basic AI" I check to also make sure there isn't a winner. This solves that problem. But yes there is a flaw. Good tutorial still thought thanks!
@@macnlinux69 would you be able to show me your code for this step? I understand your logic/reasoning but as im pretty new to coding my knowledge of javascrpt syntax isnt great.
at 44:45. Didn't you win from the combo [2,5,8]. So shouldn't it be you win and not a tie?
great tutorial, however i checked the gih hub repo and there are 0 comments in the JS code, zou have comments in the tutorial, bus still might be better do always add comments in the JS code you are writing...
its funny that you declare also a huPlayer win text , but it's impossible to win
Great video!
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...
Great video! I have a question, this example is 3x3, how would it be with 4x4? any tip?
Thank you bro
I know you can pause the tutorial at any point but it's funny to see how fast you type when you know what you're doing and typing.. I promise it looked like you were FF lol.. In comparison to me who can type but I have no clue yet lol
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
at 41 min, line 94 in the video, the line should be - if(checkWin(newBoard, huPlayer)){
ahi ta paaaa, era esto fierita
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 :)
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?
Every time the game ends with all the cells values === numbers, the result will be "Tie Game". After verify the cells values, you have to check if any player had won the game.
It's a great tutorial, I really enjoy it and wish you do more of this sort - but at 39:02 you actually win. It' s not a Tie game...
And after implementing minimax you win again at 44:45 - and the display Tie game is wrong...
You can always win, if you play 1, 3, 8, 6, 9 sequence (up left 1, down right 9).
I tried this sequence in the tic tac toe I programmed and can't win. Whenever you win, minimax is not implemented correctly
I was just laughing at the 39:02 mark too! It's because he said if all squares are chosen with either an X or O then it's a Tie, but as we all now know it's not correct. I thought that was an amusing moment personally. Just goes to show you that having another pair or eyes is so important in our work. Good video otherwise though.
You are right with regard to the code shown within the video. However, he removed the error within the code uploaded on Git. The solution for this problem is to change the following line of code:
if (checkWin(newBoard, player)) {
to
if (checkWin(newBoard, huPlayer)) {
@@stefanocarniel4015 My comment was for the code in this tutorial at the time it was published. If you played the sequence I mention, you won. The code was latter corrected (on GIT) and yes, you don't have a chance to win.
Thumbnail is epic!!!!! 🤣🤣🤣🤣🤣🤣
* 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
Nice video
superb tutorial the thing is it is not coming winner or losser
Thanks thanks very much
Some people are here saying human can win game, but there was an error in 1st if else statement of minmax function. In video, he has used player but should be human. They have corrected it, check their github.
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 CZcams, for those of us who are constantly pausing to try and keep up with your super fast autocomplete, that I am very jealous of.
Most of the books on the subject are obfuscating and lacking in sufficient examples and projects to master the concepts. I have a book called ‘A Smarter Way to Learn Javascript’ on the way from Amazon. I’m not giving up in general, but I lack the experience and knowledge to comb through this code to find the problem. I can make the example work by using a method that is simpler to me.
good tutorial, really well explained but i would like to put some pictures instead of X or O
You can do this pretty easily.. refer to this stackoverflow link.. hope it helps :)
stackoverflow.com/questions/35397728/storing-images-in-javascript-variables
i would have used settimeout function just to delay the AI's play so that it feels a lot like playing with an opponent.
I want to delay ai turn.
please help me how should i do that.
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..
Hi bro code very useful
hello, can you tell me please in what min you explain the option for the dead heat
?
Nice tutorial. A couple of things: that's an awful way of centering simple elements like a table. You could have used "auto" for the left and right margins. Also, that class of "cell" was unnecessary. Even in the CSS you targeted the cells by their tag name. Why not do the same in the JS? Still, I think you did a great job. Keep up the good work.
What code editor are you using?
44:52 How is that a win for O? In fact, the code gets ties wrong pretty often.
0 -> 2 -> 7 -> 5 -> 8 = I win
Btw, with all of the newbies trying to learn as much as they can, I feel like you should be really trying to focus on best practices, like consistency in your for loops of using let.
There is an error in your githubrepo of part 5 at line 44 ) is missing which you initially declared at if statement
Help my lines are in the pattern of a cross but its not actually the shape of a cross what should i do
Hi. Im not geeting the id of the square by clicking it. Did someone else got this problem?
may i know the complexity of this search algorithm? and is there any limitation of this search strategy?
also i get to a point is the 6th section where is i win where the entire board is filled it still says tie
If the ai is suppose to be unbeatable then how come at 44:45 it says Tie game when O actually won?
You could have simply centered the board by using margin-left: 50px auto; on the table
i have little knowledge in JS should I first work on JS or am i good to go with little knowledge for this tictac
I love JavaScript
12:19 - I didn't understand a diagonal win combination [0, 3, 6] ?
when AI plays X, why AI's first move isn't 5th cell?
Great video. Am trying to make an S.O.S game on a 7x7 grid. its alot like tic-tac.toe. how do i do it with this logic?
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.
Is there a pvp tutorial for this?
30:25 an error appears in which elem is not defined.
This code before the ai functions in place has a problem. If human player wins at the last move the system return "Tie Game"
checkTie finction needs to be readdressed here
Great video!
But the checkTie function needs improvement even before adding minimax algorithm.
The current logic first checks for empty squares and then for a win. But it is entirely possible to win when all the last square has been filled.
Thank you for the video!
Just a small question, Why are we using '==' instead of '===' @35:21 ln:66 & 74? Isn't it better to use '==='?
Good question! I just started learning JS this past week but I think that '===' makes more sense since it's only deciding "is the value 0 or not?" however I don't believe it matters as both operations are equally efficient. correct me if I'm wrong!
It's definitely not like that. '==' allows type coercion whereas '===' doesn't. stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in-javascript It is advised to always use '==='.
Good resource, thanks!
Yeah, your right, I should have used '==='. I would have been following my own advice from this video: czcams.com/video/kVOmc7NK1M0/video.html
Yeah I was amused by that, since your whole code base allows for coercion in this video, but let's be honest at this point in FCC no one is going to care that you did that or didn't. I think it would actually matter if it was an earlier video like some of your others, but this one it's more like 'whatever'. Nice effort to contribute btw; I'm sure we all appreciate it.
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.
I was trying to understand the code as I was testing around before the min/max function was added. When the bestMoves is just calling the first index. If I go on cell 3, 4, 6 and I'm suppose to be the winner it shows computer as a winner.
After adding the minimax function I was able to beat the AI by going to these cells in this order [5, 6, 0, 1, 7] even tho there is a but that shows it as a tie. Nonetheless it was a helpful video maybe you can make one to address and fix some issues to better logic in checking wins and the order.
Your right, there is a bug in the code. It has been fixed in the code on GitHub.
Why cant I play it in my default browser using Visual Studio? It wont allow me to make any marks when I click. The game works fine in codepen.io though.
Can't you do document.getElementByClassName(".cell"); instead of document.querySelectorAll(".cell"); ?
thanks
PLEASE HELPPPPP!!! I can’t even add the files to the folder, or rename them
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. :P
When I was doing this, I did 0,2,7,5,8 and won. Was there something I coded wrong or did I find an actual win con?
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.
0:10 Is not a Tie Game, it is Win game for circle. Someone know what is missing for this algorithm to work?
it was not the game of complete code
@@user_avadakedavra 44:40 aswell. It is the final version that is not working. It says tie game there aswell.
I had to introduce a gameAlreadyOver boolean/variable @ line 2, set it to false at the start of startGame, check for it in turnClick function ..if(!gameAlreadyOver && !checkTie()) {.. and set it to true at the end of gameOver function
@@SrynYT Im very new to coding so excuse the stupid question but how to you initially write the gameAlreadyOver boolean/variable? I put "var GameAlreadyOver" on line 2, "Let GameAlreafyOver= false" at the start of the startGame function then at the end of the GameOver function put "Let GameAlreadyOver = True" . However this didnt have the desired result
jake moseley I don’t think JS uses LET. Just type ‘gameAlreadyOver = false;’.
I always see people using var instead of let... I know the difference, but I almost always use let... Is it just personal preference?
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);
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?
The "s" in line 66 is arbitrary. It is just a variable name and could be switched to any other string. I think it is supposed to stand for 'square'. In line 43, the parameters that can be passed into a reduce function are part of JaveScript. You can read more about reduce here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce . A stands for accumulator and e stands for element but like before, the variable names can really be anything. Hope this helps!
How do I show by console the movements that Ai made? heelp!
I have done the tutorial and there are no errors, but the O and X does not print onto the screen. Could it be something to do with the browser? I have checked the code against your and it is correct.
I was having the same issue then I realised over on my html side, my td class was set as "row" instead of "cell". Works fine after changing them.
Need someone to explain what the reduce is doing in 22:45 please.. thank you
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"
Same.
Use querySelectorAll();
I encountered a syntax error which I cannot account for at line 34. CANNOT SET PROPERTY ‘INNERTEXT’ OF NULL.
You may be using the wrong id