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

[@freecodecamp]

Check out this playlist of more game development tutorials: kzbin.info/aero/PLWKjhJtqVAbmqFs83T4W-FZQ9kK983tZC

[@education8020]

What tools and software you are using to make this tutorial video . can you tell me? And how can make this types of videos?

[@OliverMensahDev]

Doing more of projects like this will help us a lot

[@tewarishivam]

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

[@PaoloDiBello98]

Well, it wasn't designed to be an Android application. It's called Web Development for a reason.

[@harjitsingh7308]

Channel Channel look into google flutter for android apps that's been great for me

[@Lino9026]

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!

[@dj_tika]

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

[@brambakker1788]

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)

[@premshah7685]

Yupp correct ...!

[@EvaRadio]

This is so helpful. Its simple but creates an end project which feels like you've accomplished something

[@lolettoa2971]

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.

[@noah77]

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*

[@sugarcaneross]

Love it! This might now be my favorite video on this channel. The more like this the better.

[@salih-khan]

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

[@Nsane-One]

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.

[@alonattar3836]

* 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

[@fantasmagoria00]

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.

[@abhinabacharya7398]

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

[@jovannovakovic5975]

​@@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: kzbin.info/door/8n8ftV94ZU_DJLOLtrpORA

[@sidheshwartiwari9834]

True

[@simplydesign5972]

this is what called Curse of knowledge

[@anishmadan13]

Exactlyyyyyyyy😭😭😭😭

[@michaelpimenteljr3530]

You my friend are a genius! Love this. keep it up!

[@tewarishivam]

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

[@meteachesprogramming9395]

@@tewarishivam .apk files are for android devices bro for a laptop there are .exe files

[@LuisMorales-yx8di]

@@tewarishivam2 years has passed, how are you doing, i bet in 2 years you must already get a job in the industry

[@Ninja747A]

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

[@Ninja747A]

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.

[@AryanSingh2512.]

Read the description.

[@macnlinux69]

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!

[@jakemoseley7750]

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

[@josselinmilon7616]

Super great tuto Beau!! Keep them coming!!

[@antonsmid4362]

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

[@stefanocarniel4015]

I tried this sequence in the tic tac toe I programmed and can't win. Whenever you win, minimax is not implemented correctly

[@misterhtmlcss]

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.

[@georgijalekseev5271]

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)) {

[@antonsmid4362]

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

[@youssefyoussef3266]

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

[@afnan1354]

5:00 ah i see, you are a man of culture as well, Beau

[@sauravbharti2709]

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.

[@EwokPanda]

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.

[@ldwabananattqw]

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>

[@sarvarkhalimov111]

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.

[@ahmadabdolsaheb]

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. :..)

[@BeauCarnes]

Thanks, I had to read your article quite a few times to wrap my head around minimax. :)

[@matarloum2894]

at 41 min, line 94 in the video, the line should be - if(checkWin(newBoard, huPlayer)){

[@Franee741852]

ahi ta paaaa, era esto fierita

[@rodrigoniederauer]

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.

[@i0o201]

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.

[@gremlincc]

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 KZbin, for those of us who are constantly pausing to try and keep up with your super fast autocomplete, that I am very jealous of.

[@ninjaasmoke]

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.

[@drinkeatandthink]

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

[@josephhauger5701]

This is awesome and your lesson and explanations are very helpful!

[@lilmint6514]

hi man, im russian and i understood everything, very cool lesson)

[@LasTCursE69]

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

[@anuragbudakoti755]

True

[@mrvic3952]

@@anuragbudakoti755 Something is false;

[@zero_cool]

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.

[@desis.6434]

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

[@luki121212]

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 :)

[@LumasTV]

I loved this tutorial, thank you so much!

[@EpicBizHero]

THANK YOU! I appreciate ALL of the time you put into teaching this!!! "THANK YOU"!!!

[@sandordeli8735]

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.

[@freecodecamp]

Yeah... 🙈

[@awekeningbro1207]

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

[@piyushagarwal3262]

I want to delay ai turn. please help me how should i do that.

[@Felixxxxxxxxx]

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 KZbin 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!

[@LordJesus1447]

man you're a genius

[@kneekoo]

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

[@bigmancozmo]

heres the basic start code

[@ThiagoLimaRocks]

I think there is something wrong in that code, because I beat the AI. I'll try to figure out where is the error, but I think it's the checkTie function, cause in my tests I beat the AI, but the game said it was a tie. Anyway.. really good video. And it was awsome to do some like that. Thanks.

[@prajaktabhalerao1239]

Same happened with me. Did you find the error??

[@santiagotonda8872]

@@prajaktabhalerao1239 at 41:20, Line 94 should be huPlayer, not player. That way you can't beat the IA

[@sumanmaurya1326]

superb tutorial the thing is it is not coming winner or losser

[@likeashitremixit]

dang you type fast bro, great video

[@davidgrig4608]

definitely like and subscribe clean and understandable code also great explanation thank you very much

[@AnishSah_artist]

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

[@EwokPanda]

I've fixed the algorithm: Due to the nature of recursively finding more possible winning moves when choosing another spot over the winning spot for the AI (many times, it could win, but doesn't choose the winning spot), I've added a third parameter to the function - a weighted counter to multiply the score. function minimax(newBoard, player, counter = 256) { counter = counter/2 ... return: {score: 20*counter} ... let result = minimax(newBoard, huPlayer, counter); ... let result = minimax(newBoard, aiPlayer, counter); Now the AI really does always win.

[@animeloverpakbj8229]

Thumbnail is epic!!!!! 🤣🤣🤣🤣🤣🤣

[@kamaboko1]

Great tutorial. I will be chewing on this one for a while.

[@fuhelen180]

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);

[@chrisjones469]

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.

[@khainguyentan8414]

I love JavaScript

[@yervandbaghdasaryan8156]

Thank You very much!

[@alonattar3836]

its funny that you declare also a huPlayer win text , but it's impossible to win

[@Siderite]

44:52, you actually won, and the game said Tie Game anyway.

[@alejanbdroechezuria]

yes,

[@alejanbdroechezuria]

they solve it in the code on GitHub.

[@EwokPanda]

I spotted this while following along. Simply add an enclosing if statement to turnClick() before the if !checkTie with an if !checkWin(origBoard, player)

[@markh9646]

Thank you!!

[@ufotofu9]

I know right. And it happens in my games too! Thanks!

[@simonburyan1669]

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

[@wowotuninggonzalezmesa1513]

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

[@TheMetalhead1311]

You can do this pretty easily.. refer to this stackoverflow link.. hope it helps :) stackoverflow.com/questions/35397728/storing-images-in-javascript-variables

[@DarkAnarquI]

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

[@sorrychou]

Great tutorial! But in Part6, when huPlay win at final step the result shows Tie Game!

[@buddhaburrito]

found the same thing, major bug there

[@ashishrao3069]

@@buddhaburrito He has updated the code. Check the Github repo for part 7.

[@GamingFan666]

at 44:45. Didn't you win from the combo [2,5,8]. So shouldn't it be you win and not a tie?

[@akshitsingh9080]

There are many bugs. the code is great but lengthy, doesn't take the fastest route possible and an example of the bug is go to 39:00 it says tie game whereas the human won

[@akshitsingh9080]

@Symbol Thanks a lot. Your video is really great. I just commented that to report it to you. NO OFFENSE

[@info-Travels]

Thank you bro

[@kristopherwerlinder6446]

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

[@user_avadakedavra]

it was not the game of complete code

[@kristopherwerlinder6446]

@@user_avadakedavra 44:40 aswell. It is the final version that is not working. It says tie game there aswell.

[@SrynYT]

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

[@jakemoseley7750]

@@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

[@SrynYT]

jake moseley I don’t think JS uses LET. Just type ‘gameAlreadyOver = false;’.

[@thrisharamkumar9566]

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

[@tsundoku9578]

I have actually played and won like three times :O Maybe something is wrong with the way I wrote the code.

[@TapanAnand]

You could have simply centered the board by using margin-left: 50px auto; on the table

[@disjorden4613]

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

[@joellongie]

Great video!

[@tewarishivam]

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

[@tartancub8836]

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.

[@freecodecamp]

Your right, there is a bug in the code. It has been fixed in the code on GitHub.

[@mkayisforme123]

Playing squares 5, 0, 6, 8, 7 in that order beats the algorithm yet displays tie game.

[@UnworthyRellik]

Also happens with 5,1,4,0,8

[@sandoxs]

change line 94, instead: if (checkWin(newBoard, player)) make it: if (checkWin(newBoard, huPlayer)) and evrything is going to be ok, and you will never win the game again ;)

[@mohamedmld4675]

thanks

[@rashmisinghal6035]

Thanks thanks very much

[@alonattar3836]

Nice video

[@Stevesteacher]

I always see people using var instead of let... I know the difference, but I almost always use let... Is it just personal preference?

[@yashmundada2483]

why would you not write the arrow functions in full syntax. it makes it far easier to understand. without the braces etc, life becomes far harder. apart from that, excellent video

[@yashmundada2483]

same with usage of foreach, map instead of loops and .every

[@vineetkapoor6950]

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 '==='?

[@xGanariax1]

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!

[@shaileshsundram]

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 '==='.

[@xGanariax1]

Good resource, thanks!

[@BeauCarnes]

Yeah, your right, I should have used '==='. I would have been following my own advice from this video: kzbin.info/www/bejne/oYeynpZtg7Bkg5I

[@misterhtmlcss]

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.

[@mohdsarwarealamazad]

❤

[@emretekince]

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"

[@juanandresrodriguezpedreir8922]

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

[@JenniferStewart100]

What code editor are you using?

[@user_avadakedavra]

when AI plays X, why AI's first move isn't 5th cell?

[@ken9861]

My ai is still beatable with your tutorial. Thanks for trying though

[@cardcode8345]

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"

[@niclee1863]

Same.

[@asmat.soomro]

Use querySelectorAll();

[@artistic__08]

I used table{ margin: 15% auto 5% auto;} for positioning.

[@chandarababup3876]

Hi bro code very useful

[@funkyghost8751]

There is an error in your githubrepo of part 5 at line 44 ) is missing which you initially declared at if statement

[@dlxa9207]

30:25 an error appears in which elem is not defined.

[@silkshocker]

anyone else getting an error 'cannot read property 'style' of null at the 'startgame' function?

[@silkshocker]

Never mind. Fixed!

[@MrPacalicious]

sorry, how did you fix it

[@powerfulduasandwazifaz]

YES! How did u fix it? :(

[@haythemsaidi91]

Put in the end of the body and the problem solved.

[@haythemsaidi91]

powerful duas and wazifas Put in the end of the body and the problem solved.

[@sarahamin5869]

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?

[@freecodecamp]

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!

[@nathanwhite4345]

Good vid, but sometimes when the CheckTie and CheckWin function combated tie took precidence. Change the tie function to: Note: I made diffrent gamemodes, so you can remove that part. function checkTie() { if (emptySquares().length == 0 && checkWin(origBoard, huPlayer) === null) { for (let i = 0; i < cells.length; i++) { cells[i].style.backgroundColor = "blue"; if(gameMode === 0){ cells[i].removeEventListener('click', multiplayer, false); }else{ cells[i].removeEventListener('click', turnClick, false); } } declareWinner("You Tied. :(") return true; } return false; }

[@elthomas_]

lol tic-tac-toe took an hour to make gj!

[@indunekkili666]

can i write this project in my resume? And please suggest some good projects for my resume for web development and software development profile.

[@jojojuice29]

Is there a pvp tutorial for this?

[@lisaford7376]

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

[@adityagupta232]

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);

[@adityagupta232]

we should check the win condition first then check the tie. if (!checkWin(originalBoard, humanPlayer) && !checkTie())

[@bottletyre]

12:19 - I didn't understand a diagonal win combination [0, 3, 6] ?