How to Build Tic Tac Toe with JavaScript, HTML and CSS - Tutorial

in this video we're going to be making the classic game tic-tac-toe using javascript html and css let's give the game a quick try as you hover your mouse over the board you'll get a preview of where you're going to be placing your x or your o when you click inside a box you get a nice click sound if you get three in a row we have a red line to strike it through and play some game over music so let's go ahead and do that by getting x to win over here as you could hear we got that game over music and we got that red strike through over here we also have text at the bottom of the game over here telling us that the winner is x and we have play again button clicking play again resets the board and restarts the game this is coding with adam and let's get to the code if you enjoy my videos please subscribe like and share for this project we're going to be using visual studio code and we have chrome open on the right we're starting with a blank folder that we have open over here and we're going to go ahead and add our index.html and we'll also add our index.js in our index.html we'll add our boilerplate html we'll do that by hitting x submission and then hitting tab then we get our boilerplate html over here and what we'll do is we'll rename document to tic-tac-toe inside our body we'll go ahead and just add our script tag which will link to our index.js let's go ahead and add one more file to our project so the other file that we're going to add is going to be for our styles so we'll add an index.css and then back in our index.html we'll just go ahead and link that and we'll add a link tag with an href which goes back to our index.css and you need an rl tag of stylesheet and we'll save that next we'll go into our body and we're just going to add an h1 and for that h1 we're just going to write tic tac toe to run the application i recommend using live server and the easiest way to use live server is to go ahead and open up our extensions inside visual studio code search for live server find live server and install it with live server installed all we have to do is go back to our file explorer over here right click on index.html and click open with live server the great thing about livesurfer is that has hot reloading this means that anytime i save one of my files it'll automatically be refreshed in my browser for example let's go ahead and modify this title save it and now we just have tick on the screen i go ahead and undo that and click save then we get the title we had before the approach we're going to take with tic-tac-toe is first we're going to build the ui and then we're going to build the functionality in javascript let's start by building our tic-tac-toe board as you know the board is three across and three down each one of these little squares is considered to be a tile there are many ways you can build the tic-tac-toe board you could use a table you could use css flexible box layout we're going to opt for is css grid layout let's go ahead and start to build our board on our html over here we're going to do is we're going to go ahead and create a div and we're going to give that a div an id of board inside of our board we're going to go ahead and add our tiles now each tile is going to have a few attributes one of those attributes will be the data index the data index is going to be a number eventually when we start using this board we're going to want to know what each tile is so we're going to identify it with a number then we're also going to have a class the class for each one of these pieces is going to be called tile so we can use this for styling and identifying all the tiles in our html then just for this part over here we're going to add a 1 and then we're going to do is we're going to create nine of these tiles and for each and every single one of these over here we're going to do is going to go ahead and just kind of number them we'll just the number all of these so we've got three we got four five six seven eight and nine so there we go we have each one of our tile pieces inside each div you can see that we added a number since we added that number it gets printed out on the screen and since each div is a block element that means it takes up the full width of the page and that's why we see them stacked one on top of another now we're going to use the grid so we can arrange these tic-tac-toe tiles in a grid like this so over here will be number 1 2 3 and then 9 will be over here at the bottom let's go ahead and do that i'll switch back to our html over here we'll go to our index.css now it's important to remember that the id of this div over here is a board you want to do is i'm going to go ahead and find that board like that and then we're going to add display we're going to display grid now we're going to go ahead and use something called grid templating we're going to set a template over here now what i'm doing is i'm saying that there's three columns and each column is a hundred pixels each when i save that we're going to get three different columns over here we're kind of almost there just by setting our columns then what i can do is i can add some spacing for our rows and we can say our rows are also 100 pixels let's go ahead and change that to rows now we have something that looks more like our tic-tac-toe board let's also add a cursor so what we can do is we can add cursor make it a pointer so now when our mouse hovers over our board it's a little pointer before we continue let's go ahead and just align our all our items so that they're centered you can see over here we have the tic-tac-toe centered on the screen and we have the tic-tac-toe board centered let's simply do that by using our body tag over here and inside our body tag we're going to use display flex now by default flex is going to go ahead and display everything in a row we need to change the direction we're going to say our flex direction is not going to be row but it's going to be column then the last thing we'll do is we'll align our items center so that everything is centered on the screen to match our application we're also going to go ahead and set the background color so we'll set the background color to black and everything will disappear for a little bit then what we're going to do is we'll go ahead and we'll modify our h1 and we'll set the color over here to green yellow and on our tiles which we haven't introduced yet but we're going to use the class selector now if you remember all our tiles have a class of tile then we'll go back over here and we'll set that color to also be green yellow now you can see our tiles look a little bit off so let's do something very temporary right here i'm just going to set a margin so this part is temporary the margin 10 pixels and the background color that we're going to set i'm going to set that to gray let's update our font size as well so it's easier to read we'll set that to 2em by adding this gray background and this margin of 10 pixels we can see that our number is being written in the top left corner what we want is for the number to be in the center of the tile in order to achieve this what we can do is we go ahead and use flex again we'll use display we'll mark it as flex then we'll use justify content and we'll put center which will put the number centered on the horizontal and then on the vertical we'll use align items enter save that and now our numbers are in the center of the squares then we can go ahead and delete the background color gray and the margin 10 pixels as that was just temporary the next thing that we're going to go ahead and do is we're going to draw our borders for our tic-tac-toe board the way we're going to be doing this is we're going to be using the borders of our div so this is one div over here and we're going to have a bottom border and a right border and then this one we'll just have a bottom and a right and then in this one all we need is a bottom border let's go ahead and implement this in order to achieve this we're going to go ahead and we're going to add two classes that we're going to be using one is going to be called right border and we're gonna have the following property we'll just have a border right and for the size of this we're gonna make this 0.2 em and we're gonna use solid and we're gonna use the color indigo and then we can just copy this one over here and we're going to make a bottom border so we'll just rename this to bottom and then this one to border bottom now let's go back to our index.html and over here we're going to be applying these classes to our different tiles also switch back to that tab over here so we can see what we're doing for the first one we're going to have a right border so let's do a right border and save that and you can see that line and we'll do a bottom border we'll save that and you can see our grid is starting to be built out for the next one we're gonna do exactly the same thing we'll have our bottom and right border and then for the number three over there all we need is our bottom border save it we'll go down to the next row so number four over here and we're gonna do exactly the same thing bottom right and bottom border and then right and bottom border you can see it being built out it looks kind of cool and then this one once again it's following a pattern so you can see it goes right bottom right bottom bottom and then this will be similar as well except we don't need the bottom over there we just need the right and then the right and there you go we built the tic-tac-toe board it's kind of neat all we had to use was our bottom and right borders and now we have this tic-tac-toe looking board next we're going to work on the strikethrough so for the strikethrough in order to properly do that we're going to do is we're going to change all these numbers over here to just x's and there's a quick little way you can do that i'm just going to highlight this and this as you can see it's highlighting all of these then i'm hitting command d and this is ctrl d on windows and you can see it just keeps adding cursors then once we're done adding those cursors i can go ahead select the numbers and replace that with an x to x in multi-cursor just hit escape and you'll go back to having one cursor let's start by adding the html that we need for our strikethrough the strikethrough is going to exist inside of our board so since it exists inside our board after the last x we have over here data index nine go ahead and add a div and we're going to give it an identifier of strike and we're going to give it a class of strike as well then we'll go to our index.css and i'm going to add this below our bottom border over here i'm going to add our strike and for our strike what i'm going to do is i'm going to set its position to absolute and i'm going to set a background color to dark red next what we're going to do is we're going to be creating individual classes to represent the different strikes that we have for example there can be a strike on the first row the second and the third and then we can also have vertical strikes as well on our screen for these three columns that we have as well we also have a diagonal and a diagonal let's start by implementing our first strike on the first row so let's do the following we're gonna have a strike dash row dash one so this would represent the first row and then for that we're gonna set a width of one hundred percent and we're to set a height of 4 pixels for our strike and we're going to set a top of 15 now we don't see anything just yet so go back to our index.html we're going to modify our strike over here and we're going to use our strike dash row dash 1 and we'll save that now that doesn't look quite right i was expecting that our line would be contained within our board well let's take a look at our index.css our strike row one over here has a top of 15 percent what if we change this number over here to zero i would expect it to be over here we'll change that to zero and it's not it's at the top of the screen so since we marked our strike over here with the position of absolute is actually absolute to the entire body not to our board and make it absolute to our board we have to go to our board and modify its positioning let's take a look at that property we look at our position over here the default value is called static with static it's going to the top of the page and it's ignoring the fact that we want our board to be the parent of our strikethrough if we change this value over here to relative and save it now we get our line over here at the top let's go ahead and scroll back down to our strike row one over here and we'll change that to 15 percent and we can see it's going through all of our x's by marking our board as relative now anything that's absolute within it will stay within our board let's go ahead and implement the strikethrough for rows two and three so i'm gonna do is i'm gonna go ahead and i'm just gonna copy this one over here paste it and i'm gonna change the top percent because that's the only part that's changing over here i'm going to change that to 48 and i'll change this to a 2. go ahead and copy that and paste it and then we're going to change that to a 3 and our top percent will change to 83 percent now these numbers i didn't figure out just by looking at the board i played around with these numbers in order to figure out what was the best position for our strikethroughs in order to go through the x's the last thing that we'll do with these over here is we're going to go ahead and test them so we'll go to our index.html we'll change that one over there to a two to confirm that that strikethrough goes through and we'll change this over here to a three to confirm that goes through the third row next we'll go ahead and implement the strikethrough for the columns what we do is i'll just copy what we have over there and i'm going to rename the row to column and what's going to change over here is instead of the width being 100 we're going to have a height of a hundred percent so we'll change our height over here to a hundred percent and then our width is going to become four pixels just like we had for our height over here and then our top or this one over here instead of top it's going to be left and our left is going to be set to 15 and we'll change this over here to a 1 as well let's start by testing that first column we have and we'll change that to 1 save it and that looks perfect we can then go ahead and implement our two other columns i'll go ahead and just copy this one over here we'll just paste that twice i'm gonna have two and three and then 48 over here and 83 percent over here i'm going to save that then we can go ahead and test it we'll put a 2 over here and we can see it goes to the second column perfect and we'll go to the third one save it and also perfect let's go ahead and build our diagonal strikethroughs let's start with that first one so diagonal one over here for this one over here we're gonna do is i'm just gonna copy that right away and i'm gonna go over here and add that then we'll go back to our index.css and we'll kind of just build this out piece by piece so if we do width 90 over here and we're going to do a height of 4 pixels so we kind of have a line over there as you can see we're going to do a top of 50 so you're going to see this thing kind of moving around on the screen it's not going to make too much sense right now because this doesn't look like it's doing anything but the magic is over here when we do something called a transform in our transform we're going to do skew our y we're going to be changing our y position of our line and we're going to change it by 45 degrees and trust me this took a lot of playing around with these are the numbers that i came up with at the end of the day that helped me kind of build this line out so that it looked like it was going through all of our different aisles we can then go implement our other diagonal so diagonal two and this one's gonna be really simple all we're gonna do is change our transform so name that number two and it's just gonna be negative 45 degrees so let's go back to our index.html make sure that works change that to a two and you can see that we have our other diagonal next we're going to go ahead and do the ui for the game over screen so this is the screen that we're going to build over here it's got the text that lets us know who the winner is and we have the play again button we're going to go ahead and add the game over area below our board so below our board we'll go ahead and add a div and we'll give it an identifier and we're going to call that game over area inside our game over area we're going to go ahead and add an h2 so that's going to serve as our title letting us know who the winner is and we'll give that an identifier of game over text and we'll just put in some temporary text over here just so we can see what it looks like we'll say winner is x and then below that let's go ahead and add our play again button our play again button will give it an identifier of play again and for the text we'll go ahead and just set that to play again let's go ahead and style our game over area i'm going to copy the game over area identifier and go into our index.css and we'll go ahead and add an id selector for that and for these styles over here we're just going to do text align center i mean you won't see anything aligning just yet as that text is the color black at the moment but we'll finish setting up our game over area we're going to add a border we'll give that a color of indigo 8 pixels and make it solid we'll just add some padding of 50 pixels and we're going to make that width equal to 50 percent and we'll do a margin up of 50 pixels this is all just to make this look somewhat nice and then we'll style our h2 as well so the rh2 is that text that said winner is x we'll set the color to green yellow just like we have with our other text then we'll also set our font size and we made it a little bit bigger than our font at the top so we made that 3em in our example and then what we're going to do is we're just going to fix that padding over here that we have and we're going to set that to margin top and we'll put 0 pixels and that looks a little bit better lastly we can go ahead and style our button since it's the only button on the screen i'm just going to use the button selector and i will go ahead and set our background color and for this we can just set it to transparent which means the button is see-through then we'll also set the color to green yellow and for the border go ahead and also use green yellow and we'll make that one pixel solid we'll add some padding to that and pixels all around and for the font size we will go ahead and just use 1.5 em it makes a little bit bigger there we go and since i'm zoomed in so much and kind of squish with the screen over here this 3em doesn't look really too good for h2 let's go ahead and just set that to 2em save it and now you can see this looks a little bit better than what we just had i'm going to show you a cool css trick you'll notice within our css we are using green yellow everywhere if we want to change that well we gotta go update each one of those colors one thing that we can do is within our body we can go ahead and add the following we can add a color now normally this would change the text if we didn't set it let's say that we set this over here to orange now nothing changes what we can do within our css is everywhere that we're using green yellow and we want to use that color that we defined in the body well we can put current color we'll find everywhere that we put that green yellow and replace it with current color in our h1 over here we can replace it in our h2 we can also replace it and then for our button we can do the same thing there too and let's just say we want to use current color for our border and for our color we'll also change this here and save it now the neat thing is that we can change the color in one shot inside of here we can go back and we can change that to green yellow we could make that yellow if we wanted to you can change the color now in one place instead of having to change it in multiple i'm gonna go ahead and change that back to green yellow because i thought that looked cool but a lot of those other colors look pretty cool too to determine if the game over area is visible on the screen or not we're going to go ahead and add two css classes we're going to add one called hidden and it's going to display none and then we're also going to have one called visible and visible will just do the opposite so display block and then within our html we can go to our game over area over here and by default when the game starts up we'll make sure that that is hidden and we're gonna set the class to hidden over here save it and now our game over area is hidden let's finish cleaning up our html over here so for the strike i'm going to remove that strike diagonal 2 i'm going to leave strike on there then we can go ahead and remove these temporary x's over here i'm going to select the angle bracket and the x and then do command d command d command d and command d it's ctrl d on windows for multiple cursors delete those and now we don't have any x's on the screen in the demo that i showed you at the beginning of the video we had that hover text as you move your cursor around on the screen let's go ahead and add that as well so we'll be doing that in our index.css over here and you can do that at the very bottom or anywhere that you feel like doing it and we're going to add a new css class called x hover and we're going to give it olin hover colon after and then what we're going to do is we're going to say inside here so what we're doing is we're creating a class called x hover and we're saying hover is a pseudo selector so when our mouse is over it it'll be activated and then after it's going to place some html inside of the element that we place x hover on so over here all we have to do is put content and the content that we're going to display is x i'm going to make that capitalized as well then let's do the same thing for the o just so we can see that working right away and double check that it works we'll put the o there and we'll put a capital o over here this is lowercase and lowercase go to our html and we'll just test this we'll do x hover over here and then over here we'll just do oh hover in the next file just so we can test that make sure both your files are saved and back over here we see the x and we see the o and the only other thing we want to do maybe is get that opacity so that it's lighter and we'll set our opacity for both of them to 0.4 i'll copy that and also put that in the o and save it and then we can come back here and we can see that it's working let's go back to our index.html we're going to remove those those will be added through our javascript now that we have our ui built we can go ahead and focus on the logic of the game which will be inside of our javascript files if we go back to our files we can go to index.js and start to implement that make sure that you've wired up your javascript correctly let's do the following we'll just do a console.log we're going to say hi inside here and then in your developer tools this i get to go to more tools the developer tools you can also use the shortcut to get to it click on the console tab and just double check that it says hi if it says hi we're good to go it doesn't say hi go back to your index.html and double check that you have your script tag and that it's pointed to the index.js file i recommend leaving your console open while we develop if there are any errors you'll see them on your console over here and you can go ahead and immediately fix them in your javascript the first thing that we're going to do is we're going to go ahead and get to those tiles we'll just say tiles is equal to document dot query selector all so we want to get all of them we're going to look for all the tiles because remember we added that class to every single tile called dot tile and then once we have our tiles we can also go ahead and define a few constants we know that there's a player x and we're just going to set that to a value of x capitalized like that and we'll do the same thing for our o and we'll just set that to over here and then we're going to be tracking the turns so we're going to go ahead and create a let because that variable is going to be changing so constants never change that's the const and the let's do change and we're going to say that our starting position will be x to track the state of our application where the x's and the o's are on the board we're going to go ahead and define a constant called board state and the board state is going to be equal to an array and that array is going to be equal to the tiles.length so it means this array over here is going to be nine items because we have nine tiles on our screen then the other thing we're gonna do for our board state is we're just going to also fill in that array and we're going to set all the values to null to make sure you're in a good state make sure you click save see that there are no errors in your console you can also type board state and see that there are nine items next we can go ahead and just get our elements in our html from our javascript so we'll just create a little section over here i'm just going to put a comment called elements we'll do a const strike and we'll say strike is equal to document.getelement by id and then we're just going to look for strike because there's our strike in our html looks like the following you can see that it has an identifier of strike so we can do the same thing for game over area as well and for the game over text and for play again button while we're here i'll go ahead and also set up our sounds that we had so i'm going to create a folder called sounds inside sounds i'm going to drag in the click and game over sound now those sounds will be available inside of the project on github that you can download and since we got those sounds as well we might as well set up variables for those so we can call those later and we'll just define them as cons as well and we'll have game over sound is equal to new audio and new audio is just going to go inside of the sounds folder and get the game over sound so just the name of that file you can see it's game underscore over those sounds game underscore over dot wave and then we can do exactly the same thing for our click sound get our click and click is simply just called click if you decided not to get the sounds you can go ahead and just skip adding these two variables as they don't really have any impact on the game other than adding some fun sound let's go ahead and add an event listener to each and every single one of our tiles the easiest way to do that is we have a list of our tiles and we can loop over them using four each we'll give it a tile and for each tile we'll call add event listener and we're going to be adding the click event and then the function we're going to call is called tile click so this is the function we're going to define below let's go ahead and implement that tile click so we'll define the tile click and the tile click will take in an event that event will give us more information such as which box was clicked the first thing that we're going to do inside our tile click is we're going to check if the game over area is being displayed if it is being displayed then you're not really allowed to click these boxes this is really simple all we need to do is get our game over area check its class list and we're going to check if it contains the class visible it contains the class visible that means it's being displayed on the screen then we'll go ahead and if it is visible we'll just return so that means this function will stop executing over here if it's not visible we're going to continue executing our code and the next thing we're going to do is we're going to get a reference to the html element that was clicked the way we do that is we do it from our event and we go event dot target and this will give us access to the html element that got clicked for example i click in the second square over here that's what the tile is going to be representing since the tile represents that we can access information on our tile about which tile number was clicked now remember on each tile we added something called a data dash index well data index is a special attribute that you can add that lets you store extra information on your html element so on our tiles which are a div element we're storing extra information which is the index let's take a look at the documentation as well the documentation goes to explain that we can add this extra information to our html elements it also has an example over here with an article showing that it already has an id and by adding the data attributes we're adding extra information like the columns the index number and the parent then it also shows us how we can access that information over here at the bottom you can see that in order to access columns index number and to parent we can access it as follows we get the html element the article and we say dataset dot columns dataset dot index number notice the dash over there becomes read gets removed and the n becomes capital and then we can also access our parent so in our example to access the index over here all we have to do is say tile dot data set dot index and we're accessing our tile number the next thing we're going to do is we're going to go ahead and do a check we're going to say if our tile dot inner text we're just checking the text and we're going to check if it doesn't already have a value we're going to say if it's not equal to blank then that means an x or an o must be inside there and if an x and an o are inside there let's return by returning we're exiting the method so the next thing we can do is we can now go ahead and check whose turn it is so remember the game starts with the turn being player x we're going to go ahead and check what the current turn is and we're going to say if it's equal to player x then we're going to do the following we're going to say tile dot inner text is equal to player x we're going to be setting it to player x since this is player x's turn and then we're gonna go ahead and update our board state we're gonna use our tile number and -1 so arrays always start at zero so that means this array is going to go from 0 to 8. now our numbering over here starts at 1. so since it starts at 1 we have to minus 1 from it for our array we'll go ahead and minus 1 and then we're going to say that this is player x's spot on the board we'll go ahead and set the that and then the next turn since player x already went now it's going to be player o's turn we'll go ahead and save that and we can go to our board over here and go ahead and click in any one of the boxes and we should get an x if we try clicking again we're going to get nothing because the turn is player o's turn and we haven't handled that yet we only have two different players so we only need to do an else over here instead of an else if and inside the else it's very similar to the code that we had above except we're going to change this over here to an o and change this to an o as well and this over here it goes back to player x's turn after player o has gone you can go ahead and give that a try we'll click in different boxes you can see it's alternating between x and o if i try and click on a box already exists it doesn't let me click i can click in another box we can also go down here into our console and take a look at our board state you can see it's filling all those values in i just click in the first one and the last one and then we take a look at our board state you see that the first one is x and the last one is o obviously once we set a tile on the screen we can go ahead and play the click sound earlier i just named it click but i'm going to rename it to click sound and then down here below right after if else we'll go ahead and call click sound dot play now every single time we click in a tile we're going to get that click sound feel free to leave the sound enabled however i'm just going to go ahead and disable that the next piece of functionality that we're going to be implementing is the hover text which will give you a preview of where you'll be placing your x or your o i'm going to be implementing that before the tile click over here so let's go ahead and we're going to create a function called set hover text the way that this function is going to work is it's going to work in two steps one it's going to remove any hover text that already exists and then it's going to add the hover text for the current turn let's start with that first part so the first part we're going to remove all hover text and the way we're going to do that is we're going to loop over our tiles and we'll do a for each again and we'll do an arrow function and then for each one of our tiles what we're going to do is we're just going to call classlist dot remove and then we'll remove x dash hover and then we're going to repeat that line below and we'll remove oh dot hover the next thing we're going to do is we're going to define a constant called hover class and we're going to figure out which class we're going to be using based on the current turn and for this we'll use string templates so i'm going to use a backtick dollar sign and then what we're going to do is we'll take the current turn and we'll make it to lower case because remember we made these capitals so if we go up above we'll see that it's a capital over here so x and o so the value that gets set here is going to be a capital we'll just make it lowercase and we can just use lowercase like that then we'll go ahead and just add dash hover so this will either be o dash hover or x dash hover then we can go ahead and loop over every single tile and go ahead and set that hover but we only want to set that hover if there isn't already text there so if there's no text we only want to set the hover then so inside of here we'll go ahead and we'll just do an if statement and we'll just check the inner text and we'll see if the inner text is equal to empty then we'll go ahead and add that class so tile.classlist.ad and we're going to add the hover class that we just defined above now this function over here isn't being called just yet actually it's not called anywhere so let's go ahead and call it when our application starts up so now when our application starts up we can see we can place x but once we place x it's not really working quite well the thing that we need to fix is that every single time we click a turn changes so we need to reset the hover text we go into our tile click over here and let's say after we play our sound we'll do set hover text all that there we call it when the game starts and then any time that we click in a tile we click x and now it's o and you can see that there's no value here and continue placing and if we go over ones that have values it's not trying to put hover text there it looks like it's working perfectly the next thing that we're going to focus on is determining the winner we're going to be checking the winner anytime a tile has been clicked inside of after we've updated the screen and updated the board we can go ahead and check if there's a winner over here we could call a function called check winner and check winner would be called on every single tile click there are a few different ways that used to determine the winner of tic-tac-toe we could loop over every single row and check if there's three of a kind or every single column and then also check the diagonals to see that all three are the same we could also prepare a data structure ahead of time to determine the winner and just a little refresher the winner is whenever there's three in a row whether it's a column a row or a diagonal what we're going to do here is we're going to prepare a data structure which will describe the winning combination and then also the type of strikethrough to use because remember we created classes for each and every single row and column determining that line that we draw let's take a look at this data structure that we're going to create let's go ahead and start implementing the data structure here at the bottom of our file and we'll call it constant winning combinations now this is going to be an array and inside of this array we're going to have objects and each one of these objects are going to describe two things what is that winning combination and what is the strikethrough that it should use let's start with the first one we're gonna go row by row remember that we named all of these tiles so this is tile one tile two three and then four five six seven eight nine so our first winning combination if we want to do the rows would be one two and three so let's go ahead and put down that data structure one two and three and then the strike class that we would use so we'll create another property on here called strike class is strike row one so that will strike over here and we can also look at our index.css and if we scroll on up you'll see that it's matching the class name that we have over here then we can go ahead and implement the next row which will be four five and six over here let's go ahead and do that i'm gonna duplicate that line and then it is four five six and we just change our class name to be row two and then it's seven eight nine for the final row and we just change our strike row three then we can go ahead and implement our columns and i just added these comments here so it's a little bit easier to read so for our columns they're vertical so this is going to be one four and seven so one four seven and then for our class name we wanna make sure that you don't make an error you can always go ahead and just copy it we'll strike column one go back here paste it in and then we just repeat the same thing for the other two columns so that's going to be two five and eight and then change that to a two change that to a three come back over here and we got three six and nine then all we have left to do is implement our diagonals we'll just add our diagonals there we'll do the first diagonal we'll go ahead and copy that name once again just to make sure there's no typos we got this strike a diagonal one and then we'll go over here paste that in then for this one we're gonna go this way so that's one five and nine then we'll duplicate that over there change this to a two at the end diagonal is going to go this way so that's going to be three five and seven now we can go ahead and implement our check winner method so let's create that function over here inside this function what we're going to do is we're going to loop over all of the winning combinations we'll be using the of keyword so we're going to define a variable over here called winning combination and we're going to do of our winning combinations list and then what we can do inside here is just for a test we'll just do a console.log and we'll type out winning combination there without the s so it's exactly the same word just remove the s there then let's go ahead and run our app so this is getting invoked on the click over here so that's the click method above right there tile click and what's happening is we're just printing them out and you can see if we expand each and every single one of these we're getting the different winning combos and we have a combo and a strike class for each with different values we'll go ahead and delete that now we can go ahead and extract the combo and the strike class from our winding combination there are two ways we can do this we can do it like this where i declare our cons and extract them like such or we can use something called object structuring now this will be just on one line and we're going to do strike class and then we're going to say equal to winning combination now what this is doing is it's extracting the combo and the strike class from our winning combination which is an object that looks like this what's neat about this is it kind of puts it on one line and it makes it a little bit easier to look at we'll go ahead and delete that and if you're interested this is called object destructuring i also have done a video on this in the past if you're interested in checking it out i'll link it above and in the description there are two things that we're going to be doing in our check winner one is we're going to check or a winner and the second thing that we're going to check is if there is a draw in our check for a winner we're now going to use our winning combination to get the values from our board the way we're going to do this is as follows so we're going to get each value and store it in a variable so we get tile value one now remember our board state is an array so that means the first value in the array is zero over here we define the first value as being one on our board one is technically zero in our array what we need to do is we need to look at our array so we'll look at our combo and we'll get that first item now in this example over here let's pretend it's one well that means we need to minus one this is going to be the first item in our array and then let's go ahead and do the same thing for tile value two and three so i'm just going to duplicate those and we'll put two and three there and then inside our combo list we're gonna be getting the second number and the third number there and once again because we are tracking the position within our grid over here and not an array position which means that we just have to minus one from it so that we get the correct value from our board state array now we just want to check that all the values are the same technically right now all the values are the same because they're null so let's put a little check in over here and we'll say if file value 1 does not equal null and then what we do is we just want to check if tile value 1 is equal to tile value 2 and then also check if tile value 1 is equal to tile value 3. if it is then it means that you won the game we'll go ahead and say tile value 1 is equal to file value 2 and there's just a little typo over here and then we'll just check tile value 1 is equal to tile value 3. and if all of those values are equal to each other that means there's a winner and if there's a winner that means we have to do the strike through so let's go ahead and do the strike through now if you recall earlier we got a reference to our strike up above where we got all of our elements over here is the strike that we got from our screen go back down to our code and we're going to do classlist dot add and we're going to add the strike class that we just extracted above over here from our winning combination let's go ahead and save that let's go ahead and give that a try so over here i'm going to click and we're just going to get an x across the top and it looks like we got an error so on line 77 it looks like we have a typo we'll go ahead and fix that now let's go give that a try again so we'll try and get that x over there to pass and there you go we have a winner and we have a strikethrough now that we have a winner we can go ahead and implement our game over screen so we're going to create a new function over here called gameoverscreen and we're going to pass in who the winner was so since all of these matched that's going to be the winner and we'll pass in tile value 1. we'll go ahead and implement our game over screen here below our check winner function we'll call it game over screen and the text that we're actually passing in so we passed entire value one but that's technically the winner text then we're going to do inside here is we're going to define a variable called text which is going to be equal to draw by default then we're going to do is we're going to check the winner text if the winner text does not equal null that means that our text is going to be either x or o we'll say text is equal to and we'll use a string here with a back tick we can pass in a template and we'll pass in winner text over here this is going to say winner is x our winner is o and we can put an exclamation if we want at the end of that now this isn't going to do anything yet so we're getting the text now we're going to go ahead and manipulate the dom elements on the screen in order to show this so we have our game over area and we're going to look at the class name and we're going to set the class name which is going to override all the classes on there so this means that the hidden class will disappear and it'll be replaced by visible then we're going to say our game over text which is the text we're just playing around with the inner text is going to be equal to our text over here and then we're going to play the game over sound we'll say game over sound dot play and we'll give that a try let's get a winner over here so we'll get x vertically and you heard that game over music and we have a text on the screen that says the winner is x let's go ahead and implement the logic for draw so basically the logic for draw is going to be that every single square is filled in with a value that isn't equal to null so let's go ahead and do that and we'll just say all tiles filled in so we just want to check that all the tiles are filled in and we'll look at our board state and we're going to use an array method called every if everything matches this condition then it will return true so it's going to check that every single tile does not equal equal to null and if that returns true then we're going to do is we're going to say all tiles filled in if that is true show game over and what we'll do is we'll just do game over screen and if you recall inside every game over screen if the winner text is null then it stays as draw when your text is filled in then it tells you it's either the winner is either x or o let's give draw a test over here so i'm going to go ahead and get a draw make sure i don't win and there you have it it's showing the draw text it played the game over music however there is one tiny little bug here in our check winner and it is incredibly easy to fix here is the bug so right now we are about to win with x i'm going to put an o there and now x is going to win and the entire board is filled it should say the winner is x but it's going to say it's a draw we just need to go ahead and fix this this is really really simple so in our for loop over here what happened was we found the winner we probably set the winner and then we got down to the draw and said hey all the tiles are filled in so let's go ahead and consider this a draw easy enough we don't want to get to this code over here if this code has found a winner all we're going to do is put a return over here this is why we used a four over here instead of before each with the four each if we took a lambda expression in we couldn't do a return to exit the check winner if something like this happened so sometimes it's good to use a four sometimes it's good to use a for each but in this situation the four was fantastic because we were able to put our return over here let's give this a test over here so in the same situation as before i'm gonna put an x over here and now it says the winner is x and if we try draw out again let's go ahead and draw is still working as well lastly let's go implement our play again button so for our play again button we'll find our button here on the screen that we defined and we're going to add an event listener over here so we're adding this click event listener and we're going to go ahead and define a function called start new game we'll put that at the bottom of the screen here and function start new game inside to start a new game we're going to do the following we're going to grab our strike and we're going to clear its class so we're going to reset its class just back to strike whenever we use class name like this we're clearing everything that was there before and replacing it with whatever we put here we have multiple classes we would put multiple like this that means it would have two classes on it strike and strike row one but since we only want one we'll just put strike there then for the game over area we're going to go ahead and hide that game over area and we're also going to use class name and we'll put hidden then for our board state which we're tracking in that array we're going to go ahead and just fill it with nulls and then for each tile we also need to get rid of all the text that's inside each tile and we're going to go ahead and just set them to empty we'll do that for each over there get the tile then tile dot inner text and set that to an empty string make sure to use one equal not two then we'll also start the turn at player x and we'll also set the hover text code is correct if we ended on player o's turn then we could have the wrong hover text let's go ahead and leave that and then we'll go ahead and just get a winner over here so let's just get our winner now let's try that play again button and there you go it cleared it out let's double check that it works properly we'll do a diagonal and there you go our button is working congratulations you've just built tic-tac-toe using nothing but html javascript and css if you enjoyed this video please subscribe like and share

Channel: Coding With Adam

Views: 25,652

Keywords: Tic tac toe JavaScript, How to build tic tac toe board, How to build tic tac toe, Learn how to build tic tac toe, JavaScript game tutorial, Easy tutorial

Id: fPew9OI2PnA

Length: 49min 15sec (2955 seconds)

Published: Mon Nov 29 2021