JavaScript Tic Tac Toe Project Tutorial - Unbeatable AI w/ Minimax Algorithm
HTML-код
- Опубликовано: 6 июн 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: ruclips.net/user/subscription_cent...
Check out this playlist of more game development tutorials: ruclips.net/p/PLWKjhJtqVAbmqFs83T4W-FZQ9kK983tZC
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 ...!
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
@@shivamtewarii .apk files are for android devices bro for a laptop there are .exe files
@@shivamtewarii2 years has passed, how are you doing, i bet in 2 years you must already get a job in the industry
its more beautiful when you understand most of the code
if its the html and CSS or JavaScript
its amazing
This is awesome and your lesson and explanations are very helpful!
I loved this tutorial, thank you so much!
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.
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: ruclips.net/channel/UC8n8ftV94ZU_DJLOLtrpORA
True
this is what called Curse of knowledge
Exactlyyyyyyyy😭😭😭😭
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.
Brilliant tutorial. Btw can you tell me how you got the browser output display to the right of the editor?
Thanks,
Anish
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.
Great tutorial. I will be chewing on this one for a while.
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 RUclips 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!
definitely like and subscribe clean and understandable code also great explanation thank you very much
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. :)
in the last attempt there's a case when u hit the 3 cross but the program consider it like it's a tie
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.
Great video! I have a question, this example is 3x3, how would it be with 4x4? any tip?
Thank You very much!
Says: "It's not possible to win" just after beating the AI at 44:53 The minimax algorithm needs to be fixed!
dang you type fast bro, great video
man you're a genius
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
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...
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>
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.
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.
its funny that you declare also a huPlayer win text , but it's impossible to win
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.
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 :)
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...
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.
at 41 min, line 94 in the video, the line should be - if(checkWin(newBoard, huPlayer)){
ahi ta paaaa, era esto fierita
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
* 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
at 44:45. Didn't you win from the combo [2,5,8]. So shouldn't it be you win and not a tie?
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..
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.
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 RUclips, for those of us who are constantly pausing to try and keep up with your super fast autocomplete, that I am very jealous of.
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.
What code editor are you using?
0:10 How is that game a Tie since there is three O's in the right column? lol
True
@@anuragbudakoti755
Something is false;
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.
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
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!
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.
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.
Thanks thanks very much
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: ruclips.net/video/kVOmc7NK1M0/видео.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.
Hi. Im not geeting the id of the square by clicking it. Did someone else got this problem?
There is an error in your githubrepo of part 5 at line 44 ) is missing which you initially declared at if statement
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
Nice video
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?
hello, can you tell me please in what min you explain the option for the dead heat
?
thanks
i have little knowledge in JS should I first work on JS or am i good to go with little knowledge for this tictac
also i get to a point is the 6th section where is i win where the entire board is filled it still says tie
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);
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?
12:19 - I didn't understand a diagonal win combination [0, 3, 6] ?
may i know the complexity of this search algorithm? and is there any limitation of this search strategy?
44:52 How is that a win for O? In fact, the code gets ties wrong pretty often.
Help my lines are in the pattern of a cross but its not actually the shape of a cross what should i do
superb tutorial the thing is it is not coming winner or losser
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.
You could have simply centered the board by using margin-left: 50px auto; on the table
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?
can i write this project in my resume? And please suggest some good projects for my resume for web development and software development profile.
30:25 an error appears in which elem is not defined.
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?
have you already fix 'score is undefined'?how?
zeal ace I did. I’m on mobile so it hard to explain right now, but my problem was I made a typo with some of the operators in the last portion of my code. The last bunch of for loops and if statements.
I think i added the wrong > or < operator somewhere.
I had to look at the source code and methodically replace portions of my code with the source code.
Eventually I tracked my error to the last few for loops and if statements.
Although I am not sure what you may be seeing was the same problem I was seeing. Just fyi
zeal ace but I can say the source code provided really does work. So it’s really helpful in see potential mistakes in your code when u compare.
@@blinktheworld33 I had the same issue. I found I had put a "> bestScore" in both my if and else statements. Changing to a "< bestScore" in the else statement fixed mine. I too found it by comparing to the source code on GitHub.
When did you define 'Square' parameter or how did the computer know that 'Square' is referring to the 'Ids' if the cells ?
on turnClick he pass Square as Event cuz every Eventlistener has event you can call it square or e or event it doesn't matter
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.
when AI plays X, why AI's first move isn't 5th cell?
Hi bro code very useful
Is there a pvp tutorial for this?
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.
Yeah... 🙈
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?
Hi, I think you should use better editor or ide to see errors. I'm using webstorm. Also you can use "includes" instead of "indexOf"
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
Thumbnail is epic!!!!! 🤣🤣🤣🤣🤣🤣
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
Great tutorial!
But in Part6, when huPlay win at final step the result shows Tie Game!
found the same thing, major bug there
@@buddhaburrito He has updated the code. Check the Github repo for part 7.
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.
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 love JavaScript
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 had to stop at part 4: "Property 'innerText' does not exist on type 'Element'.ts(2339)" and similar errors
In part 6, there is one bug, both winners highlight at step 3 if you keep selecting from 2nd or 3rd rows.
Adding one more condition works for me.
if (!checkTie() && !checkWin(originalBoard, humanPlayer))
turn(bestSpot(), aiPlayer);
we should check the win condition first then check the tie.
if (!checkWin(originalBoard, humanPlayer) && !checkTie())