Creating a Connect Four Game with JavaScript and HTML

Inside index.html, we just go ahead and add a restart button so i say button restart within a new line. All right so when we click it inside main.js we can just say um whenever we click the restart button just call connect4.dot.restart of course i'll add an id called restart to this so if i were to place a bunch of stuff down and then restart oh so now it's placing two grids i forgot to um what we need to do is just empty out the container that we have. On connect four if i were to say great grid i could just say board.dot.empty and that's going to go ahead and remove all the html elements from the board when we restart.

The Last Piece of the Puzzle

Okay so the last thing i'm going to do is i want to be able to display instead of hello world like when it's your turn like it's player red's turn or whatever. So if i go back to index.html and inside here if i say it's a span id of player just start off with like red or something or i can keep it blank actually no i will keep it with red i'll say it's players or it's reds turn when i save this it says it's reds turn is reds turn okay so now we click we need to switch it to whatever the player was. What we could do is just add like a callback listener so i could say connect four.on.player booth set it equal to some function and i can say set the player text to connect or not player of course we don't actually have an on.player move called anywhere in connect four so if i were to go here inside the constructor and say create a new function hold on player move and then whenever i click and place something inside the cell i could just say that.dot.on.player.move and call it. So now when i click notice that it is rotating in fact it's off by one it's saying the wrong thing so instead i'm going to do it there after we change the player so right now says it's reds turn click it says it's blacks turn i can keep alternating between the different players and i can restart so that's an issue when i restart it's not actually changing the player up here.

A Recap

So basically we create an html file which has its h4 so we can display its redstone or black turn and we're changing that every time we click or place a piece. We have this connect four div which basically our connect4 class is going to render stuff into and then of course we have a restart button which basically will just restart the state of our game. Then inside connect four when the grade is created we create the grid and we set up some event listeners and then on every time we click on a cell or column we're going to just do different things so like if it is player reds turn we're going to place a red token or if it's player blacks turn we place a black token. And then same thing when we hover over different columns we again just change the hover state um every time we click after we click we check to see if someone has one or the last pers last player who went to see if they won if they have we just display an alert and say the game's over and then we switch players from black to red here um we trigger al's enter just because that fixes a bug with the hover states.

Conclusion

Um yeah so feel free to leave me feedback let me know if this tutorial was way too fast or fast paced i should have slowed it down in the future um i didn't want this thing to take too long to do but i think right now we're pushing around an hour and again feel free to grab the project from my repo so js-hyphen-connect-hyphen-4 and again i'll put this on youtube so you can easily just grab it and use it or i'll put a link in the youtube description so you can play around with it um yeah hopefully the tutorial was useful uh feel free to subscribe and look forward to new videos in the future alright thanks for watching

"WEBVTTKind: captionsLanguage: enhey everyone i'm cody and welcome to a video where i'm going to show you how to build a js a javascript connect 4 game using jquery javascript html5 css whatnot and um let's go ahead and just get started right so obviously you know what connect four is or you should so if you don't i'll go to connect four go to images you know connect four is this game where you have this grid and each player can alternate taking terms placing their color circle so we're gonna try to build that which basically whenever you get four in a row you win the game so that's kind of a reference that we can go off of um let's go ahead and get started so on the left i have an empty project over here which has absolutely no files in it it's just a blank git repo and on the right i have that project hosted using http hyphen server which is a node module you can use if you want to host um like html files or whatnot that's kind of my setup so to start off how would you build a website or a web page which displays a grid that has this type of a structure in it like here is a good example i guess we can go off of so to start off we need to first build up a blank html file so if i go over here and just say new file index.html here we can actually write our html file if you want to and say build an html we need a head and we need a body inside the head i'll just go ahead and get the title and call it connect 4 and also inside here we can start including some things the first thing i'm going to do is include a style sheet i'm going to say there's a local style sheet hosted in this folder which we can add in one second now called style.css go ahead and make this font a little bit smaller so we can see it so this page is going to load in style.css which we haven't created yet so i'll go ahead and just create a dial.css and i'm also going to create a main.js file so inside our index we can just go ahead and import that as well up here i'm going to go to add a new element called script i'm going to first include main.js down here i can just do something simpler like hello world just to make sure this is working and if i were to refresh the page we have hello world printing out and inside the console my dev tools if i were to go to the console over here i want to make sure that this main.js thing is loading and running correctly i can go over to my main.js file and say console.log here save that file and refresh this page and we get here printed out all right so we have our basic setup going and again we can just test to make sure that the body is working so i can say background color is orange save that and it is refreshing the screen using live reload on the background so if you remember i did mention that we're going to be using jquery and i'm mainly using jquery because it has a lot of helper functions which allow us to do our job much more efficiently than using vanilla javascript might be kind of overkill but i like to use it just because it's really easy to select stuff and change data on stuff and whatnot so i'm going to go ahead and go to cdnjs and search for jquery and i'll go ahead and grab the jquery min.js copy this and then over here i can just first of all close my editor i can load that script in here and to verify that it is working i can say document ready it's going to go ahead and print out working if that isn't if that is indeed working all right so it says money sign is not defined that's because i loaded jquery after main so of course you need to load it before you run your script and now we get working printed out to the console so now we have jquery working we have our style sheets hooked up and we have our main.js file running as expected so to start off what we want to do is we want get rid of that body background color is we want to first figure out a way to dynamically build up a grid so inside our body if we were to just go ahead and make a div and call it connect 4 or something we want to populate that connect for div with some rows and columns that kind of show a grid that looks like this if you notice you have 1 2 3 4 5 6 7 columns and six rows so what we can do in our main js file is i'm going to go ahead and just clear out those console logs and just do a little to do here so is it to do draw a grid and they kind of help abstract this into different modules what i'm going to do first of all is make a connect 4 file and also include that right above main and what we're going to do inside connect 4. include connect 4 as a script and i have connect 4 over here basically what connect4 is going to do is declare a class called connect4 which we can use in our main file so i'm going to go ahead and just type this out i'll make a class called connect4 i'll give it a constructor i'll say this dot rows is equal to six and this dot columns is equal to seven over here on main i could just say make us a new grid our new connect four object so up here i can say const connect four is equal to new connect four and i'm gonna go ahead and pass it some type of selector so i'm just gonna do a string and you know this is up to us this is we can customize it however we want to but our constructor is going to take a selector so over here i'm gonna pass in selector but it knows where to render the grid if you remember on our html file we have an id called connect4 so what we want to do is inside main.js we're gonna pass that element or that id of connect 4 into this new connect4 object and what we want our connect for class to do is just go ahead and build up a grid so to kind of just show you what exactly is going on and kind of jumping around first thing i'm going to do is just to demonstrate i can say grid is equal to use jquery and grab that selector and then i can say grid.html is equal to hello so now when i say this notice that what it's doing is main is running it's creating this connect4 object passing the selector then the connect4 class is grabbing the selector grabbing the div and then adding html to the inside of that div all right so that's pretty awesome so what we want to do at this point again is we're trying to build that six by seven grid so i'm going to go ahead and create a method on this connect four class called create grid and the purpose of this function is to basically build up a bunch of divs like you know six different rows inside each row we have seven different columns and we're going to go ahead and call dot this dot create grid here so whenever this connect4 object initializes we're gonna go ahead and create the html for the grid and i'm gonna go ahead and just get rid of these things um and keep track of that selector that was passed in so to start off how would we create a grid the first thing i want to do is i want to grab that dom element so i can say const board is equal to jquery of this dot selector and that should give us if i were to print this out that should give us the div of connect 4. and inside of this connect 4 div we want to go ahead and just loop over and create six rows the one way you could do that is obviously use a for loop so set let row is equal to zero and i'll say row is less than this dot rows and row plus plus i'll do the same thing with the columns here so instead of let row i'll say let column in fact i'll take a step back so i don't want to confuse you all yet so let's just start with the row so for each row what we're going to do is create a new div so i'll say constant row and the way i kind of use this money sign in front of variable names it's just so i know that it's a jquery object this is just my convention you don't have to follow this but it just easily lets me know that hey this is a jquery object that we're messing with so we're saying const money sign row is equal to i'm going to create a new div using jquery and to do that you just do money sign and pass it the name of the dom element you want to create in this case it's div and i'm just going to go ahead and add a class to it called row and then of course i can say board dot append row and now if i were to print out the board after here we see that the board has actually put out the html of the board the board now has a bunch of rows nested inside of it and in course i can go here just kind of demonstrate that we have a div called id connect four and inside that we're creating six rows so six divs with the class row inside here so that's step one right we need to create six rows and the second step is we need to create seven columns inside of each of those rows so instead i can add another for loop here and again the one i put out a second ago i'm just going to loop over the columns now and for every iteration of this for loop i'm going to say constant call is equal to and then let's go ahead and create another div this one's going to have a class of call and empty so we can kind of style it and you know give it a style when it is empty versus when it has a red or a black token inside of it and i think that should be good for there and i need to append that column if i say money assign row dot append and then i pin the column onto the row and then for each row we append into the board if i were to save this now and go into the body we have a div called connect four it has six rows and each side each row it has seven columns so the dom element structure is there ready to go but we still don't really visualize it so what we can do at this point is we can dive into the style.css and the first thing i want to do is just add a couple of attributes to first of all connect four object which is our grid and we want to set the background color to yellow and we want to make it display in line block the body i'm just going to go text align center so that the grid is centered so again this made everything centered and this made the grid with the background color of yellow which we can't see right now because it has no height um but we will visualize that in one second so for every column that we have on the page we want to give it a particular width and height so we'll say width is equal to 70 pixels i do height is equal to 70 pixels save that and then so you saw here it kind of created all those but they're all on one like column which is not what we want so we can just go ahead and do a display inline block on the columns and that makes them all appear on the same row um or to hover over them you see that we have these columns side by side and that's because we added display inline block on line 13. almost done with this first let's set the background color to white and i'm going to add a border radius of 50 to make it round and finally we could probably add some margin over all the slots just so it looks more like a grid awesome so that wasn't too difficult let me just do a really quick recap so we're not really confused as to what just happened so inside this connect4 class we all create grid when the constructor is called and inside this constructor we basically loop over every row and create a div called row which you can see here and then inside of every row we just append seven different columns and then we went ahead and just add a bunch of different styles so it makes it look more like a connect four grid so not not too difficult right and jquery allows us to do this type of logic much more simple than just using vanilla js where you have to do like dot query selector and if you want to add a class or remove a class you'd have to do a bunch of other um in my opinion just like hacky ways to do it versus jquery just gives you really useful utility functions to do with the same thing just go ahead and minimize this a little bit so we have a grid again and what we can do at this point the next thing we're trying to achieve in fact before i go too much further let me just go ahead and commit what i have so i'll say added the grid or initial setup of grid add that go ahead and omit that or push that i mean and again as we work through this project i'm going to be committing and pushing stuff to our repo so if you were to go here and you wanted to actually kind of walk through how we did this stuff you could just look through all the different commits here and then first one i did initial setup of grid which has all these different changes and of course i'll add a read mean a little bit so you can actually run this um just do read me md really quick and we'll come back to that at the very end and i'll explain how you can run this easily on your computer alrighty so now for the next step what we want to do is as you hover over the cells in this grid we want to go ahead and just drop different colors so the easiest way to do that or at least the way i'm going to do it in this tutorial is i'm going to create another function inside this class which is going to set up event listeners and again there's more than one way to hold this up so if you find a better way to do this or if you think of a more elegant solution feel free to do it and give me feedback but this is just the way that i feel is a decent solution of this project so the first thing we want to do is call set up event listeners here so basically when we create the grid we're going to create a bunch of event listeners which are going to listen to different things such as hover events click events or whatnot um so the first thing i think would be useful is we want to kind of when we we enter one of these columns or cells we want to place an indicator as to where the piece is going to drop because again if you have like three pieces here already and you're hovering over this column it should drop it at this location so the first thing let's just go ahead and do const board is equal to this dot selector again i'm just grabbing that dom element called connect 4 or id of connect 4 and we're going to do a different listeners on that so i can say the first one is board dot on mouse enter and then this is a jquery method where you pass it the event you want to listen to the second argument is going to be the selector that you're going to listen to as well so i'm saying whenever we click on or hover over sorry an empty column let's invoke a function make this font a little bit smaller so we can see everything on one page in fact i could probably just a little bit because we're not going to be using more than that grid okay so basically when we enter one of these cells so i'll say here print out the cell that we've entered go ahead and go to the console now as we hover over these cells notice that it's printing out the different cells that we've heard over that's kind of how you'd add event listeners using jquery on different dom elements and again these are set up when the constructor is ran for connect four so basically the moment we call new connect four and pass a selector it's going to set up those event listeners okay so again what we're trying to do is when you hover over one of these pieces it's going to put an indicator at the bottom so how do we do that the first thing i think you need to know is how do we know which column or row that we've hovered over in this case we just need to know the column id right so we can't really you know do there's not really good ways to do that i guess so what we can do is go back to when we're creating the grid and we can add different attributes to the column so here i could say add attribute actually in fact it's just attr instead of add it's attr and i can pass the attribute i want to add so i can say data call and then of course we want to give it the attribute of column index and then here for row which we'll use later on we're going to go ahead and give it the the row index here so here you have the row index which will be 0 through 5 and then here would be the column index which is zero through six now at this point if i save this and we were to hover over we see that now every time we hover over a different column we have a easy way to grab you know which index like zero zero being the top left as we go down we get the zero five and as we go to the far bottom right corner we get to six five so again we use these two attribute methods in jquery to just go ahead and add an attribute to the cell and then over here what we could easily do is just print those out so if i were to say on to column is equal to money sign this dot data of column then print out what column is equal to and go ahead and save that notice that it's going to print out 0 1 2 3 4 5 6 as i hover over things you might ask okay so what was the purpose of that why do we why do we need to get the column index so again we need to kind of when we hover over column let's say one we need to grab all of the cells in that column and loop it backwards over them until we find an empty one and once we do find an empty one we can just go ahead and change the look of that column it might not make too much sense let me just go ahead and start working on coding it up and we will see what i mean so what we want to do again is as we hover over one of these cells we want to get the last empty cell that's in that column so let's just first assume that we have a method that we can do that so we use a con's last empty cell is equal to find last empty cell and then pass it the column index and so up here inside set up event listeners we can just go ahead and declare that function and assuming that it does return something that we can use we could just go ahead and add a class to it so last empty cell dot add class is equal to i'm just going to do something called next i'll say red and we'll probably change the name of this later in a second but of course if we had a style called next red we could just change the background color to a red value with some opacity i'll make it a really really really faint red if we hover over one of the columns rearrange this okay so now we want to implement that fine last empty cell method which we defined up here on line 29 so to do that remember what we're trying to do is we need to grab all of these cells in that column that we selected so the way to do that using jquery is we we can say const cells is equal to and then using jquery say grab me all the columns that have the same attribute data hyphen column if you remember we added that earlier on equal to the column index that we passed in if i were to print out what cells is at this point we should get an array of a lot of different elements as we hover over stuff um let's see add class of well right now i'll count that out because it's not going to work as intended but now i hovered over something and i go here and we have a i'm not 100 sure this is working yet because i forgot to put a a colon there or a comma there okay there so i added this single quote here and that fixed the bug and basically now when we hover over one of these columns it's going to show us all of the cells that are in that column and so kind of visualizing here what we need to do programmatically is we just need to start at the very end and just keep looping backwards until we find an empty one it turns out in all these cases these are all empty so we can just grab the last one if it's empty we just add a class or remove a class empty from it and we could just add something else to it so in this one i'll say loop over all of these things backwards and then grab the cell that we're currently at i'll say cells of i basically again we loop over backwards we get the jquery representation of the cell that we're at and we say if the cell has a class of empty we want to just go ahead and return that cell and otherwise we just return null but now this method will just return as the last jquery instance that has an empty class attached to it if i were to go down here and then of course add that new class notice that as we hover it's going to add kind of a placeholder at the bottom and of course we need to add a a mouse leave event to kind of remove that class so let's go ahead and just work on fixing that bug and it shouldn't be too difficult basically inside the setup event listeners what we can do is add another on callback function so i'll say on mouse leave and if this is invoked on any column we could just say all a function and then of course we can say remove all of the classes that have next red attached to them now as we hover over notice that it's going to remove the last one that it added and of course there's probably other ways to do this but um this is a decent way that comes to mind just from coding so let's go ahead and commit this to the repo this is a good um some good functionality we added so i'm going to go ahead and say edit functionality for hovering over columns go ahead and add that go ahead and push that and just make sure that it's here now and we have just now we updated some stuff so now if you want to see the functionality changes from setting up the initial grid to seeing these event listeners you can do so by just simply clicking commits here and then viewing the commits to um sorry so now at this point what we can do is if we were to click on one of these columns we want to go ahead and just place a piece in the bottom row or wherever the next quote-unquote slot should be again we could just add another listener which is going to be money sign board on click and then if we click on an empty cell or empty dom element that has the class empty what we can do is again we know what we clicked on so we can get the column and the row so i'll say cons to call is equal to this of data call and then same thing with row so we know which column in row was clicked in fact i'm not sure if we even need this at this point but it would be good to know um so remember yeah if we were to let's say an example if we were hovering over this one here and we click it we want to place the player's token or the circle at the very last one so we can call that same method called find last empty cell and pass it the column index which will give us that last empty cell and then what we can do is just simply remove the empty from it so i can say last empty cell remove class of empty move class empty and then last empty cell i could add a class of red in fact i'll get rid of row for now we don't really even need row so just to demonstrate what's going on if i again were to try this out and just click on one of these we should now have a class of red attached to that which we do but we didn't actually declare a style for it so let's go back here and say all of red is equal to background color of red so notice here we get a red every time we click which is pretty awesome so secondly let's go ahead and make a column of black because we know we're gonna have red in a black player and again i'll do a next black so at this point what we want to do is kind of alternate between if i was player um red or if i was player black so up here we can just go ahead and add another member to this class and i'll say player is equal to red so we start off as player red and then after we drop that cell into um the grid we just need to kind of switch around the player so if i wanted to kind of switch from player red player black on this member here we first need access or we need to keep reference to the original object so a little hack if you're familiar with javascript you typically have to do something like this to retain access to the original this attribute um you may say okay why don't you just use a fat arrow here but the issue is i also need access to the event called this and this function so instead on line 29 i'm just going to say const that is equal to this and then down here i can say that dot player is equal to and then if player is already equal to red i'm going to change it to black otherwise i'll change it to red this is going to kind of alternate between placing a red piece and a black piece and of course here we can say that dot player instead of just placing red every single time and up here outside these two functions instead of placing um red every time we hover or removing red every time we hover we could instead just say uh that dot player as well so again recap we added a player attribute to the class which is going to be either the string red or the string black and then as we enter or leave or click on these different columns we're going to be using that to remove classes and add classes so the first thing is if we're player red actually one second there's an issue so as we hover we see that we are placing next hyphen black but i think the color is not what because 255 is white let me change it to black so now as we hover over we have black okay so start over first player that goes is red and when he clicks it's going to place a red piece and now when i move over it's going to be an indicator of a black when i click it's going to place a black piece so i can just go ahead and just keep alternating between these which is pretty cool um one thing i noticed is that when i click the indicator doesn't show up anymore and also there should be a pointer so the first thing i'm going to do here is go back to column i'll say column of empty a pointer or cursor is equal to pointer now when we hover over empty cells it's going to be a pointer and the second bug i'm trying to fix is once you click i want the indicator to show up automatically again for the next player so to fix that bug look at the code really quick and try to understand what's going on i think basically we all we need to do is just kind of force the event mouse enter to trigger on the piece that we just laced i believe so the last empty cell obviously need to remove that we can also remove um at next that dot player and just go ahead and change that to back tick so we can interpolate the string there and then update player at the very end and then of course we need to just invoke that mouse leave or mouse enter function on that column like say this dot mouse or this dot trigger mouse enter see if that kind of fixes the issue okay which it kind of does but one issue is that we're retaining that last piece that we okay so did spent some time trying to figure out what the issue was and i think it's because i'm adding um mouse enter trigger right before we switch the player and instead we need to do it after so if i were to do this okay i think that's working as is cool so now we have the functionality to alternate between the different players so red player and black player and at this point i think this is a good stopping point to again commit our changes so i'm gonna go ahead and say alternate alternating between players go ahead and add that push that to the repo cool so we have a really cool connect 4 grid that we can click and play around with to alternate between red and black so now the next step is once we place these pieces how do we know if a player wins when they connect four um so basically whenever we click a piece right after that we need to check the grid see if someone has one or not so to do so let's go ahead and just start off with making another function and that function i'm going to call is check for winner and inside this function as two parameters or arguments is going to take is the row and the column that you last clicked so for example let's say we were to click on this column here and place that black one at this point we need to then check if there's a diagonal or a vertical or a horizontal row or line which allows that last piece which was black to win so if i were to click and check in those directions if that last piece dropped wins then we know that the game's over so basically what we can do is inside the click method before we change the player we could just do a const winner is equal to that dot check for winner and i'm going to pass in the row and the column so here i can say row and then i can say column here and in fact we could just go ahead and parse these as ins i'm not sure if we need the parts those as in um yeah when we click on the cell we just go ahead and check for winner of row and column and then down here we can say if there is a winner we can just do some stuff and in fact i'll just do an alert and say game over do backtick so we can do a string interpolation so game over player that dot player as one and just go ahead and return out of that um and we can also kind of keep track of well do something like that later okay so whenever there is a winner which in this case this function doesn't return anything so if this function does return a string or a boolean or something that's equivalent to true then it's going to print out this alert so to implement this function let's go ahead and go down to check for winner and what we want to do is we kind of want to check on all the different directions so horizontally vertically or diagonally if there are four in a row so to kind of start off i'm just going to write a first function so i'll say return check verticals so that assumes that we have a function called check verticals up here i'll say function check verticals and what check verticals is going to do is we want to have it return a call to a function called check when so inside here i'm just going to pass it some directions like remember we were to so if we take a step back and just think let's say we pass in row of two and column of two if we were to check the verticals we know that we need to check in the direction up in the direction down so here for check when we're just going to assume that there's a function called check when and that's going to have direction a and direction b and in this case for verticals we can just pass in i of negative one and j of zero and then again we can check in the down direction so i of one and j of zero as well and that's going to kind of pass in a direction which is going up in this case and the direction b would be going down in this case and so at this point the function check when is what we need to do is kind of sum up all of the tokens or cells that match the current player's color up here i'll say that is equal to this just so we can keep track of that just in case we need player um i'm inside here we're going to say keep track of the total which is going to be equal to 1 plus we're going to have another match called check direction of a and then we're gonna also check the direction of b and so what we mean by this is obviously the piece we just placed down is going to be equivalent to one we know that there's already one piece that's red now we need to check in the up direction in this case which is i negative one and then we also need to check in the down directions which is going to be i of one and j of 0. and so if the total added up you know 1 plus everything above which is also red and everything below which is also red is equal to 4 or greater so i say if total is greater than equal to 4 we know that we can just return the player that we found so i could say that dot player and then otherwise we could just return null because we haven't found an actual player who has one yet um so to get to the player that is at the cell that we just clicked on right now that dot player may not let's see if that player is fine pick for winner yeah because we don't change the player until after so this is fine the next method we need to do is a check direction method so i'll say direction inside the track direction method what we need to do is basically increment in that direction while we're still inside the grid and check if the color that we just hit also matches the color that we're looking for so i'm going to say let total is equal to 1 let's keep track of the number of slots that we found that are the exact same color that we're looking for so let i is equal to um that's going to be equal to the row thus passed in plus the direction in the i direction and then let j is equal to the column plus the direction in the j direction now this point if let's say we were checking the direction up we're just going to go ahead and add in like one step further and check it and then we can just go ahead and get the cell so we don't really have a method to do that so let's just go ahead and write a function called get cell ticks in a row and a column and what we can do is just return using jquery same row which matches that so if i were to do this in fact i'll do i and i'll do j give me the row that is equal to the i and then give me the column which is equal to j now we have a method for getting the jquery cell i'll do money sign get cell and then here i can say let cell is equal to get cell of i and j so this point we've gotten the cell which is one iteration above the current one that we dropped again if we were to click here it will grab us this one above and what we want to do is just keep on doing this logic while we're still in bounds so i can say while i is equal to 0 and i is less than to that dot rows and j is greater than equal to zero and of course j is equal to that dot columns or j is less than that dot columns and then finally i can say while the player that we're currently looking at is still equal to the player that we just dropped we need to keep incrementing and doing this loop again so i can say total plus plus the i is plus equal to step of i same thing with j and of course increment next the next is equal to get the cell of i and j change that to next instead of that one thing i'm not sure if we're adding to the actual cell that we dropped is the player so i'm going to say last empty cell dot data of player is equal to that dot player but we actually know what you know cell is set to what player um so that was a win in the vertical direction let's go ahead and see if this is going to crash when we're just playing around with it we're already getting an error so let me go to the console thing a is not defined because i did not put direction a and direction b there okay all right so check direction step is not defined that should be called direction not sure why i did step let's try it again all right so now we're running into an issue where it's not saying the game is over when it should um so what we can do is a little bit of debugging here and say obviously the winner is not being set correctly so let's see probably because i'm not returning the total here again keep on trying cool so it actually checks in the vertical direction and it says player red has one and in this case the game is over but we can keep on placing crap because we haven't added like a an ending condition to our game so let's try to do the same thing with the other directions so we need to check the horizontals as well so if i add another function and just call it check horizontals and this one's going to be static in the row direction but we're going to go from left to right i'm just going to go ahead and say call check verticals in or or with check horizontal so that if any of these return a string it's just going to go ahead and return the string otherwise it's going to return null and we know that there's no winner if that's the case so now by simply adding that method here we should be able to check wins in the horizontal direction so if i were to just do the same thing like this oops black has one all right so there's a bug where it made player black win even though we only dropped three let me refresh the page and try to test out the horizontals again so there's a bug going on let me just double check what's going on so sometimes when you run into issues like this it just helps to start running the debugger so here i'm just going to go ahead and add a debugger here so we can kind of step through our logic try to figure out what's going on every time we place a key i'm gonna stop in our debugger and we can walk through what the issue may be x is a little bit too big so let's go ahead and do that i'm basically just setting it up so i can just check that last case where i do a horizontal so here when i place this piece we're into the debugger now and we can kind of step through and try to figure out where we're going so i is in the zero direction j is in the one direction which means it's going to go to the right and check remember the last piece we put was this one right here then we go ahead and grab the cell here which is not finding anything so that might be our issue some reason this is negative one which it shouldn't be and this is one um let's step forward and see if we can find something here the row and column is zero in okay so i think the issue is row and column for some reason they're zero and one but they should be set to whatever this down here was which was like five and two or something so if i were to go back to check for winner and find out what exactly we're passing into it out row and column go ahead and refresh this page when we click this it should be printing out not that value 0 and 2. the column is correct but the row is not correct this should be row 0 1 2 3 4 5. i must be adding the incorrect data to row here that is added somewhere up here i believe when we create the data of row set to row data of column is set to call oh i know why because i'm i'm passing in the one that i clicked instead of the last empty one right so what i need to do instead is i need to pass in here a last empty cell dot data of row and a last in cell of data of column let's go ahead and save that get rid of the debugger because that might just have fixed the issue there cool so now horizontals seem to be working fine and the last thing we need to do is check the diagonals so there's going to be two functions we need to do for the diagonals there is a bottom left the top right so i'll say check diagonal bottom left to top right and then here we can just return check when and if we know the directions we say i need to go down and then j we need to go negative so to the left so that would be from the point that we clicked go down to the left and then also both positive up into the right and of course we need to use that they check diagonals here and we could add that last method which is going to be called check diagonal of top left to bottom right and the difference is this is going to go up right sorry down to the right and then up left and of course i'll just call it down here so now when i say this we should be able to check if diagonals are working so let's go ahead and make layer redwin and it works in the top right diagonal and let's try it again with the other diagonal and it's working there as well in fact i don't think i've checked it with black so let me just take black one cool so that's working as well all right so now we have the functionality to check who won by checking the horizontals the verticals and the diagonals that are from top left to bottom right and from bottom left to top right and we ran into a little bit of issues debugging because i named some stuff wrong but luckily we got to see how to debug stuff in the debugger um i think now at this point what we want to do is we're we're seeing some issues so even though the game is over we can still place crap down so what we want to do now is we can say add a new member called is game over set equal to false when the game starts and then what we can do is down here when we've won we can say this dot sorry that dot is game over is equal to true and then whenever this is true we could just return our stuff so if the game is already over we don't want to be able to click on anything if the game is over we don't want to be able to do any of this mouse enter stuff so let's see if i were to save this now and then just go ahead in the game notice that i can no longer place and when i hover over stuff nothing happens then one more thing i'm noticing is that the hover for empty is still there so i'm just going to go ahead and remove every class that has it so when the game is set to true i can just go ahead and say grab me all the empty cells or columns so i say call empty i'll say remove class of all right so let's try to make a redwin and now i don't have that pointer cursor anymore when i hover over the empty cells yeah so that i think that basically wraps up the connect four i mean the last thing i could probably do is i could add a restart method to this class so i can say restart and i could say this dot create grid um inside create grid i can say this is game over it's equal to false desktop player equal to red again see i'm not sure there's anything else so inside index html we just go ahead and add a restart button so i say button restart within a new line all right so when we click it inside main.js we can just say um whenever we click the restart button just call connect4 dot restart of course i'll add an id called restart to this so if i were to place a bunch of stuff down and then restart oh so now it's placing two grids i forgot to um what we need to do is just empty out the container that we have so on connect four if i were to say great grid i could just say board dot empty and that's going to go ahead and remove all the html elements from the board when we restart all right so that's pretty cool it's still working um i think okay so the last thing i'm going to do is i want to be able to display instead of hello world like when it's your turn like it's player red's turn or whatever so if i go back to index.html and inside here if i say it's a span id of player just start off with like red or something or i can keep it blank actually no i will keep it with red i'll say it players or it's red's turn when i save this it says it's red's turn is red's turn okay so now we click we need to switch it to whatever the player was so here what we could do is just add like a callback listener so i could say connect four on player booth set it equal to some function and i can say set the player text to connect or not player of course we don't actually have an on player move called anywhere in connect four so if i were to go here inside the constructor and say create a new function hold on player move and then whenever i click and place something inside the cell i could just say that dot on player move and call it so now when i click notice that it is rotating in fact it's off by one it's saying the wrong thing so instead i'm going to do it there after we change the player so right now says it's red's turn click it says it's black's turn i can keep alternating between the different players and i can restart so that's an issue when i restart it's not actually changing the player up here so what we could do is again just call bat whenever we create the grid or whenever we restart so create the grid let's say this dot or that dot on player move let's see what happens if we do this so i'll go ahead and commit this stuff so i'll say final stages of allowing alternate players to check if someone is one go ahead and push that to the repo yeah so i don't know if that was maybe that was too quick hopefully that was well explained or if it wasn't too confusing but i'll do a really quick recap one more time um basically we create an html file which has it's h4 so we can display its redstone or black turn and we're changing that every time we click or place a piece we have this connect four div which basically our connect4 class is going to render stuff into and then of course we have a restart button which basically will just restart the state of our game then inside connect four when the grade is created we create the grid and we set up some event listeners and then on every time we click on a cell or column we're going to just do different things so like if it is player red's turn we're going to place a red token or if it's player black's turn we place a black token and then same thing when we hover over different columns we again just change the hover state um every time we click after we click we check to see if someone has one or the last pers last player who went to see if they won if they have we just display an alert and say the game's over and then we switch players from black to red here um we trigger al's enter just because that fixes a bug with the hover states um yeah so again feel free to leave me feedback let me know if this tutorial was way too fast or fast paced i should have slowed it down in the future um i didn't want this thing to take too long to do but i think right now we're pushing around an hour and again feel free to grab the project from my repo so js hyphen connect hyphen 4 and again i'll put this on youtube so you can easily just grab it and use it or i'll put a link in the youtube description so you can play around with it um yeah hopefully the tutorial was useful uh feel free to subscribe and look forward to new videos in the future alright thanks for watchinghey everyone i'm cody and welcome to a video where i'm going to show you how to build a js a javascript connect 4 game using jquery javascript html5 css whatnot and um let's go ahead and just get started right so obviously you know what connect four is or you should so if you don't i'll go to connect four go to images you know connect four is this game where you have this grid and each player can alternate taking terms placing their color circle so we're gonna try to build that which basically whenever you get four in a row you win the game so that's kind of a reference that we can go off of um let's go ahead and get started so on the left i have an empty project over here which has absolutely no files in it it's just a blank git repo and on the right i have that project hosted using http hyphen server which is a node module you can use if you want to host um like html files or whatnot that's kind of my setup so to start off how would you build a website or a web page which displays a grid that has this type of a structure in it like here is a good example i guess we can go off of so to start off we need to first build up a blank html file so if i go over here and just say new file index.html here we can actually write our html file if you want to and say build an html we need a head and we need a body inside the head i'll just go ahead and get the title and call it connect 4 and also inside here we can start including some things the first thing i'm going to do is include a style sheet i'm going to say there's a local style sheet hosted in this folder which we can add in one second now called style.css go ahead and make this font a little bit smaller so we can see it so this page is going to load in style.css which we haven't created yet so i'll go ahead and just create a dial.css and i'm also going to create a main.js file so inside our index we can just go ahead and import that as well up here i'm going to go to add a new element called script i'm going to first include main.js down here i can just do something simpler like hello world just to make sure this is working and if i were to refresh the page we have hello world printing out and inside the console my dev tools if i were to go to the console over here i want to make sure that this main.js thing is loading and running correctly i can go over to my main.js file and say console.log here save that file and refresh this page and we get here printed out all right so we have our basic setup going and again we can just test to make sure that the body is working so i can say background color is orange save that and it is refreshing the screen using live reload on the background so if you remember i did mention that we're going to be using jquery and i'm mainly using jquery because it has a lot of helper functions which allow us to do our job much more efficiently than using vanilla javascript might be kind of overkill but i like to use it just because it's really easy to select stuff and change data on stuff and whatnot so i'm going to go ahead and go to cdnjs and search for jquery and i'll go ahead and grab the jquery min.js copy this and then over here i can just first of all close my editor i can load that script in here and to verify that it is working i can say document ready it's going to go ahead and print out working if that isn't if that is indeed working all right so it says money sign is not defined that's because i loaded jquery after main so of course you need to load it before you run your script and now we get working printed out to the console so now we have jquery working we have our style sheets hooked up and we have our main.js file running as expected so to start off what we want to do is we want get rid of that body background color is we want to first figure out a way to dynamically build up a grid so inside our body if we were to just go ahead and make a div and call it connect 4 or something we want to populate that connect for div with some rows and columns that kind of show a grid that looks like this if you notice you have 1 2 3 4 5 6 7 columns and six rows so what we can do in our main js file is i'm going to go ahead and just clear out those console logs and just do a little to do here so is it to do draw a grid and they kind of help abstract this into different modules what i'm going to do first of all is make a connect 4 file and also include that right above main and what we're going to do inside connect 4. include connect 4 as a script and i have connect 4 over here basically what connect4 is going to do is declare a class called connect4 which we can use in our main file so i'm going to go ahead and just type this out i'll make a class called connect4 i'll give it a constructor i'll say this dot rows is equal to six and this dot columns is equal to seven over here on main i could just say make us a new grid our new connect four object so up here i can say const connect four is equal to new connect four and i'm gonna go ahead and pass it some type of selector so i'm just gonna do a string and you know this is up to us this is we can customize it however we want to but our constructor is going to take a selector so over here i'm gonna pass in selector but it knows where to render the grid if you remember on our html file we have an id called connect4 so what we want to do is inside main.js we're gonna pass that element or that id of connect 4 into this new connect4 object and what we want our connect for class to do is just go ahead and build up a grid so to kind of just show you what exactly is going on and kind of jumping around first thing i'm going to do is just to demonstrate i can say grid is equal to use jquery and grab that selector and then i can say grid.html is equal to hello so now when i say this notice that what it's doing is main is running it's creating this connect4 object passing the selector then the connect4 class is grabbing the selector grabbing the div and then adding html to the inside of that div all right so that's pretty awesome so what we want to do at this point again is we're trying to build that six by seven grid so i'm going to go ahead and create a method on this connect four class called create grid and the purpose of this function is to basically build up a bunch of divs like you know six different rows inside each row we have seven different columns and we're going to go ahead and call dot this dot create grid here so whenever this connect4 object initializes we're gonna go ahead and create the html for the grid and i'm gonna go ahead and just get rid of these things um and keep track of that selector that was passed in so to start off how would we create a grid the first thing i want to do is i want to grab that dom element so i can say const board is equal to jquery of this dot selector and that should give us if i were to print this out that should give us the div of connect 4. and inside of this connect 4 div we want to go ahead and just loop over and create six rows the one way you could do that is obviously use a for loop so set let row is equal to zero and i'll say row is less than this dot rows and row plus plus i'll do the same thing with the columns here so instead of let row i'll say let column in fact i'll take a step back so i don't want to confuse you all yet so let's just start with the row so for each row what we're going to do is create a new div so i'll say constant row and the way i kind of use this money sign in front of variable names it's just so i know that it's a jquery object this is just my convention you don't have to follow this but it just easily lets me know that hey this is a jquery object that we're messing with so we're saying const money sign row is equal to i'm going to create a new div using jquery and to do that you just do money sign and pass it the name of the dom element you want to create in this case it's div and i'm just going to go ahead and add a class to it called row and then of course i can say board dot append row and now if i were to print out the board after here we see that the board has actually put out the html of the board the board now has a bunch of rows nested inside of it and in course i can go here just kind of demonstrate that we have a div called id connect four and inside that we're creating six rows so six divs with the class row inside here so that's step one right we need to create six rows and the second step is we need to create seven columns inside of each of those rows so instead i can add another for loop here and again the one i put out a second ago i'm just going to loop over the columns now and for every iteration of this for loop i'm going to say constant call is equal to and then let's go ahead and create another div this one's going to have a class of call and empty so we can kind of style it and you know give it a style when it is empty versus when it has a red or a black token inside of it and i think that should be good for there and i need to append that column if i say money assign row dot append and then i pin the column onto the row and then for each row we append into the board if i were to save this now and go into the body we have a div called connect four it has six rows and each side each row it has seven columns so the dom element structure is there ready to go but we still don't really visualize it so what we can do at this point is we can dive into the style.css and the first thing i want to do is just add a couple of attributes to first of all connect four object which is our grid and we want to set the background color to yellow and we want to make it display in line block the body i'm just going to go text align center so that the grid is centered so again this made everything centered and this made the grid with the background color of yellow which we can't see right now because it has no height um but we will visualize that in one second so for every column that we have on the page we want to give it a particular width and height so we'll say width is equal to 70 pixels i do height is equal to 70 pixels save that and then so you saw here it kind of created all those but they're all on one like column which is not what we want so we can just go ahead and do a display inline block on the columns and that makes them all appear on the same row um or to hover over them you see that we have these columns side by side and that's because we added display inline block on line 13. almost done with this first let's set the background color to white and i'm going to add a border radius of 50 to make it round and finally we could probably add some margin over all the slots just so it looks more like a grid awesome so that wasn't too difficult let me just do a really quick recap so we're not really confused as to what just happened so inside this connect4 class we all create grid when the constructor is called and inside this constructor we basically loop over every row and create a div called row which you can see here and then inside of every row we just append seven different columns and then we went ahead and just add a bunch of different styles so it makes it look more like a connect four grid so not not too difficult right and jquery allows us to do this type of logic much more simple than just using vanilla js where you have to do like dot query selector and if you want to add a class or remove a class you'd have to do a bunch of other um in my opinion just like hacky ways to do it versus jquery just gives you really useful utility functions to do with the same thing just go ahead and minimize this a little bit so we have a grid again and what we can do at this point the next thing we're trying to achieve in fact before i go too much further let me just go ahead and commit what i have so i'll say added the grid or initial setup of grid add that go ahead and omit that or push that i mean and again as we work through this project i'm going to be committing and pushing stuff to our repo so if you were to go here and you wanted to actually kind of walk through how we did this stuff you could just look through all the different commits here and then first one i did initial setup of grid which has all these different changes and of course i'll add a read mean a little bit so you can actually run this um just do read me md really quick and we'll come back to that at the very end and i'll explain how you can run this easily on your computer alrighty so now for the next step what we want to do is as you hover over the cells in this grid we want to go ahead and just drop different colors so the easiest way to do that or at least the way i'm going to do it in this tutorial is i'm going to create another function inside this class which is going to set up event listeners and again there's more than one way to hold this up so if you find a better way to do this or if you think of a more elegant solution feel free to do it and give me feedback but this is just the way that i feel is a decent solution of this project so the first thing we want to do is call set up event listeners here so basically when we create the grid we're going to create a bunch of event listeners which are going to listen to different things such as hover events click events or whatnot um so the first thing i think would be useful is we want to kind of when we we enter one of these columns or cells we want to place an indicator as to where the piece is going to drop because again if you have like three pieces here already and you're hovering over this column it should drop it at this location so the first thing let's just go ahead and do const board is equal to this dot selector again i'm just grabbing that dom element called connect 4 or id of connect 4 and we're going to do a different listeners on that so i can say the first one is board dot on mouse enter and then this is a jquery method where you pass it the event you want to listen to the second argument is going to be the selector that you're going to listen to as well so i'm saying whenever we click on or hover over sorry an empty column let's invoke a function make this font a little bit smaller so we can see everything on one page in fact i could probably just a little bit because we're not going to be using more than that grid okay so basically when we enter one of these cells so i'll say here print out the cell that we've entered go ahead and go to the console now as we hover over these cells notice that it's printing out the different cells that we've heard over that's kind of how you'd add event listeners using jquery on different dom elements and again these are set up when the constructor is ran for connect four so basically the moment we call new connect four and pass a selector it's going to set up those event listeners okay so again what we're trying to do is when you hover over one of these pieces it's going to put an indicator at the bottom so how do we do that the first thing i think you need to know is how do we know which column or row that we've hovered over in this case we just need to know the column id right so we can't really you know do there's not really good ways to do that i guess so what we can do is go back to when we're creating the grid and we can add different attributes to the column so here i could say add attribute actually in fact it's just attr instead of add it's attr and i can pass the attribute i want to add so i can say data call and then of course we want to give it the attribute of column index and then here for row which we'll use later on we're going to go ahead and give it the the row index here so here you have the row index which will be 0 through 5 and then here would be the column index which is zero through six now at this point if i save this and we were to hover over we see that now every time we hover over a different column we have a easy way to grab you know which index like zero zero being the top left as we go down we get the zero five and as we go to the far bottom right corner we get to six five so again we use these two attribute methods in jquery to just go ahead and add an attribute to the cell and then over here what we could easily do is just print those out so if i were to say on to column is equal to money sign this dot data of column then print out what column is equal to and go ahead and save that notice that it's going to print out 0 1 2 3 4 5 6 as i hover over things you might ask okay so what was the purpose of that why do we why do we need to get the column index so again we need to kind of when we hover over column let's say one we need to grab all of the cells in that column and loop it backwards over them until we find an empty one and once we do find an empty one we can just go ahead and change the look of that column it might not make too much sense let me just go ahead and start working on coding it up and we will see what i mean so what we want to do again is as we hover over one of these cells we want to get the last empty cell that's in that column so let's just first assume that we have a method that we can do that so we use a con's last empty cell is equal to find last empty cell and then pass it the column index and so up here inside set up event listeners we can just go ahead and declare that function and assuming that it does return something that we can use we could just go ahead and add a class to it so last empty cell dot add class is equal to i'm just going to do something called next i'll say red and we'll probably change the name of this later in a second but of course if we had a style called next red we could just change the background color to a red value with some opacity i'll make it a really really really faint red if we hover over one of the columns rearrange this okay so now we want to implement that fine last empty cell method which we defined up here on line 29 so to do that remember what we're trying to do is we need to grab all of these cells in that column that we selected so the way to do that using jquery is we we can say const cells is equal to and then using jquery say grab me all the columns that have the same attribute data hyphen column if you remember we added that earlier on equal to the column index that we passed in if i were to print out what cells is at this point we should get an array of a lot of different elements as we hover over stuff um let's see add class of well right now i'll count that out because it's not going to work as intended but now i hovered over something and i go here and we have a i'm not 100 sure this is working yet because i forgot to put a a colon there or a comma there okay there so i added this single quote here and that fixed the bug and basically now when we hover over one of these columns it's going to show us all of the cells that are in that column and so kind of visualizing here what we need to do programmatically is we just need to start at the very end and just keep looping backwards until we find an empty one it turns out in all these cases these are all empty so we can just grab the last one if it's empty we just add a class or remove a class empty from it and we could just add something else to it so in this one i'll say loop over all of these things backwards and then grab the cell that we're currently at i'll say cells of i basically again we loop over backwards we get the jquery representation of the cell that we're at and we say if the cell has a class of empty we want to just go ahead and return that cell and otherwise we just return null but now this method will just return as the last jquery instance that has an empty class attached to it if i were to go down here and then of course add that new class notice that as we hover it's going to add kind of a placeholder at the bottom and of course we need to add a a mouse leave event to kind of remove that class so let's go ahead and just work on fixing that bug and it shouldn't be too difficult basically inside the setup event listeners what we can do is add another on callback function so i'll say on mouse leave and if this is invoked on any column we could just say all a function and then of course we can say remove all of the classes that have next red attached to them now as we hover over notice that it's going to remove the last one that it added and of course there's probably other ways to do this but um this is a decent way that comes to mind just from coding so let's go ahead and commit this to the repo this is a good um some good functionality we added so i'm going to go ahead and say edit functionality for hovering over columns go ahead and add that go ahead and push that and just make sure that it's here now and we have just now we updated some stuff so now if you want to see the functionality changes from setting up the initial grid to seeing these event listeners you can do so by just simply clicking commits here and then viewing the commits to um sorry so now at this point what we can do is if we were to click on one of these columns we want to go ahead and just place a piece in the bottom row or wherever the next quote-unquote slot should be again we could just add another listener which is going to be money sign board on click and then if we click on an empty cell or empty dom element that has the class empty what we can do is again we know what we clicked on so we can get the column and the row so i'll say cons to call is equal to this of data call and then same thing with row so we know which column in row was clicked in fact i'm not sure if we even need this at this point but it would be good to know um so remember yeah if we were to let's say an example if we were hovering over this one here and we click it we want to place the player's token or the circle at the very last one so we can call that same method called find last empty cell and pass it the column index which will give us that last empty cell and then what we can do is just simply remove the empty from it so i can say last empty cell remove class of empty move class empty and then last empty cell i could add a class of red in fact i'll get rid of row for now we don't really even need row so just to demonstrate what's going on if i again were to try this out and just click on one of these we should now have a class of red attached to that which we do but we didn't actually declare a style for it so let's go back here and say all of red is equal to background color of red so notice here we get a red every time we click which is pretty awesome so secondly let's go ahead and make a column of black because we know we're gonna have red in a black player and again i'll do a next black so at this point what we want to do is kind of alternate between if i was player um red or if i was player black so up here we can just go ahead and add another member to this class and i'll say player is equal to red so we start off as player red and then after we drop that cell into um the grid we just need to kind of switch around the player so if i wanted to kind of switch from player red player black on this member here we first need access or we need to keep reference to the original object so a little hack if you're familiar with javascript you typically have to do something like this to retain access to the original this attribute um you may say okay why don't you just use a fat arrow here but the issue is i also need access to the event called this and this function so instead on line 29 i'm just going to say const that is equal to this and then down here i can say that dot player is equal to and then if player is already equal to red i'm going to change it to black otherwise i'll change it to red this is going to kind of alternate between placing a red piece and a black piece and of course here we can say that dot player instead of just placing red every single time and up here outside these two functions instead of placing um red every time we hover or removing red every time we hover we could instead just say uh that dot player as well so again recap we added a player attribute to the class which is going to be either the string red or the string black and then as we enter or leave or click on these different columns we're going to be using that to remove classes and add classes so the first thing is if we're player red actually one second there's an issue so as we hover we see that we are placing next hyphen black but i think the color is not what because 255 is white let me change it to black so now as we hover over we have black okay so start over first player that goes is red and when he clicks it's going to place a red piece and now when i move over it's going to be an indicator of a black when i click it's going to place a black piece so i can just go ahead and just keep alternating between these which is pretty cool um one thing i noticed is that when i click the indicator doesn't show up anymore and also there should be a pointer so the first thing i'm going to do here is go back to column i'll say column of empty a pointer or cursor is equal to pointer now when we hover over empty cells it's going to be a pointer and the second bug i'm trying to fix is once you click i want the indicator to show up automatically again for the next player so to fix that bug look at the code really quick and try to understand what's going on i think basically we all we need to do is just kind of force the event mouse enter to trigger on the piece that we just laced i believe so the last empty cell obviously need to remove that we can also remove um at next that dot player and just go ahead and change that to back tick so we can interpolate the string there and then update player at the very end and then of course we need to just invoke that mouse leave or mouse enter function on that column like say this dot mouse or this dot trigger mouse enter see if that kind of fixes the issue okay which it kind of does but one issue is that we're retaining that last piece that we okay so did spent some time trying to figure out what the issue was and i think it's because i'm adding um mouse enter trigger right before we switch the player and instead we need to do it after so if i were to do this okay i think that's working as is cool so now we have the functionality to alternate between the different players so red player and black player and at this point i think this is a good stopping point to again commit our changes so i'm gonna go ahead and say alternate alternating between players go ahead and add that push that to the repo cool so we have a really cool connect 4 grid that we can click and play around with to alternate between red and black so now the next step is once we place these pieces how do we know if a player wins when they connect four um so basically whenever we click a piece right after that we need to check the grid see if someone has one or not so to do so let's go ahead and just start off with making another function and that function i'm going to call is check for winner and inside this function as two parameters or arguments is going to take is the row and the column that you last clicked so for example let's say we were to click on this column here and place that black one at this point we need to then check if there's a diagonal or a vertical or a horizontal row or line which allows that last piece which was black to win so if i were to click and check in those directions if that last piece dropped wins then we know that the game's over so basically what we can do is inside the click method before we change the player we could just do a const winner is equal to that dot check for winner and i'm going to pass in the row and the column so here i can say row and then i can say column here and in fact we could just go ahead and parse these as ins i'm not sure if we need the parts those as in um yeah when we click on the cell we just go ahead and check for winner of row and column and then down here we can say if there is a winner we can just do some stuff and in fact i'll just do an alert and say game over do backtick so we can do a string interpolation so game over player that dot player as one and just go ahead and return out of that um and we can also kind of keep track of well do something like that later okay so whenever there is a winner which in this case this function doesn't return anything so if this function does return a string or a boolean or something that's equivalent to true then it's going to print out this alert so to implement this function let's go ahead and go down to check for winner and what we want to do is we kind of want to check on all the different directions so horizontally vertically or diagonally if there are four in a row so to kind of start off i'm just going to write a first function so i'll say return check verticals so that assumes that we have a function called check verticals up here i'll say function check verticals and what check verticals is going to do is we want to have it return a call to a function called check when so inside here i'm just going to pass it some directions like remember we were to so if we take a step back and just think let's say we pass in row of two and column of two if we were to check the verticals we know that we need to check in the direction up in the direction down so here for check when we're just going to assume that there's a function called check when and that's going to have direction a and direction b and in this case for verticals we can just pass in i of negative one and j of zero and then again we can check in the down direction so i of one and j of zero as well and that's going to kind of pass in a direction which is going up in this case and the direction b would be going down in this case and so at this point the function check when is what we need to do is kind of sum up all of the tokens or cells that match the current player's color up here i'll say that is equal to this just so we can keep track of that just in case we need player um i'm inside here we're going to say keep track of the total which is going to be equal to 1 plus we're going to have another match called check direction of a and then we're gonna also check the direction of b and so what we mean by this is obviously the piece we just placed down is going to be equivalent to one we know that there's already one piece that's red now we need to check in the up direction in this case which is i negative one and then we also need to check in the down directions which is going to be i of one and j of 0. and so if the total added up you know 1 plus everything above which is also red and everything below which is also red is equal to 4 or greater so i say if total is greater than equal to 4 we know that we can just return the player that we found so i could say that dot player and then otherwise we could just return null because we haven't found an actual player who has one yet um so to get to the player that is at the cell that we just clicked on right now that dot player may not let's see if that player is fine pick for winner yeah because we don't change the player until after so this is fine the next method we need to do is a check direction method so i'll say direction inside the track direction method what we need to do is basically increment in that direction while we're still inside the grid and check if the color that we just hit also matches the color that we're looking for so i'm going to say let total is equal to 1 let's keep track of the number of slots that we found that are the exact same color that we're looking for so let i is equal to um that's going to be equal to the row thus passed in plus the direction in the i direction and then let j is equal to the column plus the direction in the j direction now this point if let's say we were checking the direction up we're just going to go ahead and add in like one step further and check it and then we can just go ahead and get the cell so we don't really have a method to do that so let's just go ahead and write a function called get cell ticks in a row and a column and what we can do is just return using jquery same row which matches that so if i were to do this in fact i'll do i and i'll do j give me the row that is equal to the i and then give me the column which is equal to j now we have a method for getting the jquery cell i'll do money sign get cell and then here i can say let cell is equal to get cell of i and j so this point we've gotten the cell which is one iteration above the current one that we dropped again if we were to click here it will grab us this one above and what we want to do is just keep on doing this logic while we're still in bounds so i can say while i is equal to 0 and i is less than to that dot rows and j is greater than equal to zero and of course j is equal to that dot columns or j is less than that dot columns and then finally i can say while the player that we're currently looking at is still equal to the player that we just dropped we need to keep incrementing and doing this loop again so i can say total plus plus the i is plus equal to step of i same thing with j and of course increment next the next is equal to get the cell of i and j change that to next instead of that one thing i'm not sure if we're adding to the actual cell that we dropped is the player so i'm going to say last empty cell dot data of player is equal to that dot player but we actually know what you know cell is set to what player um so that was a win in the vertical direction let's go ahead and see if this is going to crash when we're just playing around with it we're already getting an error so let me go to the console thing a is not defined because i did not put direction a and direction b there okay all right so check direction step is not defined that should be called direction not sure why i did step let's try it again all right so now we're running into an issue where it's not saying the game is over when it should um so what we can do is a little bit of debugging here and say obviously the winner is not being set correctly so let's see probably because i'm not returning the total here again keep on trying cool so it actually checks in the vertical direction and it says player red has one and in this case the game is over but we can keep on placing crap because we haven't added like a an ending condition to our game so let's try to do the same thing with the other directions so we need to check the horizontals as well so if i add another function and just call it check horizontals and this one's going to be static in the row direction but we're going to go from left to right i'm just going to go ahead and say call check verticals in or or with check horizontal so that if any of these return a string it's just going to go ahead and return the string otherwise it's going to return null and we know that there's no winner if that's the case so now by simply adding that method here we should be able to check wins in the horizontal direction so if i were to just do the same thing like this oops black has one all right so there's a bug where it made player black win even though we only dropped three let me refresh the page and try to test out the horizontals again so there's a bug going on let me just double check what's going on so sometimes when you run into issues like this it just helps to start running the debugger so here i'm just going to go ahead and add a debugger here so we can kind of step through our logic try to figure out what's going on every time we place a key i'm gonna stop in our debugger and we can walk through what the issue may be x is a little bit too big so let's go ahead and do that i'm basically just setting it up so i can just check that last case where i do a horizontal so here when i place this piece we're into the debugger now and we can kind of step through and try to figure out where we're going so i is in the zero direction j is in the one direction which means it's going to go to the right and check remember the last piece we put was this one right here then we go ahead and grab the cell here which is not finding anything so that might be our issue some reason this is negative one which it shouldn't be and this is one um let's step forward and see if we can find something here the row and column is zero in okay so i think the issue is row and column for some reason they're zero and one but they should be set to whatever this down here was which was like five and two or something so if i were to go back to check for winner and find out what exactly we're passing into it out row and column go ahead and refresh this page when we click this it should be printing out not that value 0 and 2. the column is correct but the row is not correct this should be row 0 1 2 3 4 5. i must be adding the incorrect data to row here that is added somewhere up here i believe when we create the data of row set to row data of column is set to call oh i know why because i'm i'm passing in the one that i clicked instead of the last empty one right so what i need to do instead is i need to pass in here a last empty cell dot data of row and a last in cell of data of column let's go ahead and save that get rid of the debugger because that might just have fixed the issue there cool so now horizontals seem to be working fine and the last thing we need to do is check the diagonals so there's going to be two functions we need to do for the diagonals there is a bottom left the top right so i'll say check diagonal bottom left to top right and then here we can just return check when and if we know the directions we say i need to go down and then j we need to go negative so to the left so that would be from the point that we clicked go down to the left and then also both positive up into the right and of course we need to use that they check diagonals here and we could add that last method which is going to be called check diagonal of top left to bottom right and the difference is this is going to go up right sorry down to the right and then up left and of course i'll just call it down here so now when i say this we should be able to check if diagonals are working so let's go ahead and make layer redwin and it works in the top right diagonal and let's try it again with the other diagonal and it's working there as well in fact i don't think i've checked it with black so let me just take black one cool so that's working as well all right so now we have the functionality to check who won by checking the horizontals the verticals and the diagonals that are from top left to bottom right and from bottom left to top right and we ran into a little bit of issues debugging because i named some stuff wrong but luckily we got to see how to debug stuff in the debugger um i think now at this point what we want to do is we're we're seeing some issues so even though the game is over we can still place crap down so what we want to do now is we can say add a new member called is game over set equal to false when the game starts and then what we can do is down here when we've won we can say this dot sorry that dot is game over is equal to true and then whenever this is true we could just return our stuff so if the game is already over we don't want to be able to click on anything if the game is over we don't want to be able to do any of this mouse enter stuff so let's see if i were to save this now and then just go ahead in the game notice that i can no longer place and when i hover over stuff nothing happens then one more thing i'm noticing is that the hover for empty is still there so i'm just going to go ahead and remove every class that has it so when the game is set to true i can just go ahead and say grab me all the empty cells or columns so i say call empty i'll say remove class of all right so let's try to make a redwin and now i don't have that pointer cursor anymore when i hover over the empty cells yeah so that i think that basically wraps up the connect four i mean the last thing i could probably do is i could add a restart method to this class so i can say restart and i could say this dot create grid um inside create grid i can say this is game over it's equal to false desktop player equal to red again see i'm not sure there's anything else so inside index html we just go ahead and add a restart button so i say button restart within a new line all right so when we click it inside main.js we can just say um whenever we click the restart button just call connect4 dot restart of course i'll add an id called restart to this so if i were to place a bunch of stuff down and then restart oh so now it's placing two grids i forgot to um what we need to do is just empty out the container that we have so on connect four if i were to say great grid i could just say board dot empty and that's going to go ahead and remove all the html elements from the board when we restart all right so that's pretty cool it's still working um i think okay so the last thing i'm going to do is i want to be able to display instead of hello world like when it's your turn like it's player red's turn or whatever so if i go back to index.html and inside here if i say it's a span id of player just start off with like red or something or i can keep it blank actually no i will keep it with red i'll say it players or it's red's turn when i save this it says it's red's turn is red's turn okay so now we click we need to switch it to whatever the player was so here what we could do is just add like a callback listener so i could say connect four on player booth set it equal to some function and i can say set the player text to connect or not player of course we don't actually have an on player move called anywhere in connect four so if i were to go here inside the constructor and say create a new function hold on player move and then whenever i click and place something inside the cell i could just say that dot on player move and call it so now when i click notice that it is rotating in fact it's off by one it's saying the wrong thing so instead i'm going to do it there after we change the player so right now says it's red's turn click it says it's black's turn i can keep alternating between the different players and i can restart so that's an issue when i restart it's not actually changing the player up here so what we could do is again just call bat whenever we create the grid or whenever we restart so create the grid let's say this dot or that dot on player move let's see what happens if we do this so i'll go ahead and commit this stuff so i'll say final stages of allowing alternate players to check if someone is one go ahead and push that to the repo yeah so i don't know if that was maybe that was too quick hopefully that was well explained or if it wasn't too confusing but i'll do a really quick recap one more time um basically we create an html file which has it's h4 so we can display its redstone or black turn and we're changing that every time we click or place a piece we have this connect four div which basically our connect4 class is going to render stuff into and then of course we have a restart button which basically will just restart the state of our game then inside connect four when the grade is created we create the grid and we set up some event listeners and then on every time we click on a cell or column we're going to just do different things so like if it is player red's turn we're going to place a red token or if it's player black's turn we place a black token and then same thing when we hover over different columns we again just change the hover state um every time we click after we click we check to see if someone has one or the last pers last player who went to see if they won if they have we just display an alert and say the game's over and then we switch players from black to red here um we trigger al's enter just because that fixes a bug with the hover states um yeah so again feel free to leave me feedback let me know if this tutorial was way too fast or fast paced i should have slowed it down in the future um i didn't want this thing to take too long to do but i think right now we're pushing around an hour and again feel free to grab the project from my repo so js hyphen connect hyphen 4 and again i'll put this on youtube so you can easily just grab it and use it or i'll put a link in the youtube description so you can play around with it um yeah hopefully the tutorial was useful uh feel free to subscribe and look forward to new videos in the future alright thanks for watching\n"