A game of TicTacToe written in JavaScript ⭕

hey what's going on everybody it's you bro hope you're doing well and in this video we're going to create a game of tic-tac-toe using javascript so sit back relax and enjoy the show well all right everybody let's create a game of tic-tac-toe let's create a div element to contain our game div this will have an id of what about game container let's close it i'll add a title this will be an h1 header tag the title will be tick tack toe we'll create a div section for a grid div id equals let's name this cell container it will contain nine cells for each of the spaces then let's close it within our cell container div we're going to create nine div tags div we'll create an attribute named cell index i'll set the first equal to zero add them to a class the class will be cell then close the div tag let's copy this development and paste it eight additional times so we should have a total of nine we have cell index zero one two three four five six seven eight outside of our cell container that ends right here it looks like we'll create an h2 header tag to display some messages like whose turn it is who won so let's close this h2 header tag i will give this an id of what about status text then we'll need a button button the id will be restart button add some text restart okay that should be everything within our html file let's head to our css style sheet be sure to save everything let's begin with the cell class this is a class so use dot the name of the class cell i'll set a width of 75 pixels a height of 75 pixels i'll add a border 2 pixel solid is good okay here's our div elements so far we but we got to put them in a grid they're all in a single column i'll select our cell container we're selecting this by an id cell container the display will be grid grid template columns repeat 3 auto then we gotta set a width width 225 pixels margin auto yeah let's head back to our cell class let's add a box shadow box shadow zero zero zero two pixels all of these lines should have an even thickness i'll add a line height of 75 pixels just to test the x's and o's i'm going to add an x like right here and an o here let's edit the font font size 50 pixels when i move my cursor over these cells i would like my cursor to be a pointer to indicate that we can click on something so cursor pointer let's test that yeah there's our pointer okay let's select our game container i'm going to center everything and change the font game container i'll add a font family i'll select permanent marker i like that font and a backup of cursive then we just got to center everything within this container text align center yeah and that's our css style sheet so let's get rid of this exyno that we have i was just writing that there to test it okay so our html file is done our css file is done let's head to our javascript file okay now we're within our javascript file let's declare all of the variables that we'll need const cells equals document dot query selector all we're selecting a class the cell class dot cell then let's select status text const status text document dot query selector not query selector all we are selecting status text then our restart button const restart button id restart button we need a constant of all of our wind conditions const wind conditions when conditions will be a two-dimensional array of indices if three cells all have the same character we would need to check that but we'll have to know what cells to check let's begin with the first row these would have indices of 0 1 2 so let's add that 0 1 2 then the second row three four five six seven eight then columns zero three six one four seven two five eight then the diagonals zero four eight two four six and that's it we'll need an array of placeholders i'll name this options let options equals options will be originally an array of empty strings we'll need nine of them one for each cell okay let's make sure we have nine one two three four five six seven eight nine we'll need to keep track of the current player let current player equal x then we'll need a boolean variable to keep track if our game is running let running equals false we'll switch this to true when we initialize our game let's create all of the different functions that we'll need function initialize game function cell clicked function update cell there will be two parameters cell as well as index function change player function check winner function restart game okay and that's the functions when we begin our game let's initialize the game we'll use this function initialize game to take care of any setup before we need to start we'll have to add some event listeners to our cells take our cells then use the for each method we'll use an arrow function expression for each cell we will take our cell add event listener the event will be click we will add a callback of cell clicked the second line will add an event listener to our restart button restart button dot add event listener when we click we are going to invoke the restart game function for the third line let's update our status text status text dot text content set the sequel to i'll use the template literal current player it's their turn okay it looks like we have one problem looks like i accidentally capitalized that l in current player okay let's work on the cell clicked function when we click on a cell what are we going to do i'll create a local variable const cell index i will set the sql to this this refers to whatever cell that we click on we will get an attribute get attribute the attribute that we're getting is cell index we have an index number what we would like to check to see is if that index number within our options our placeholders are not empty we'll only want to update a cell if there's nothing there if our options at index of cell index does not equal an empty space or if the game is not running then we will return not do anything otherwise we will invoke the update cell function pass in this as an argument as well as cell index followed by check winner function okay let's head to the update cell function take options at index of the index parameter set the sequel to the current player so we're updating our placeholders then change the text content of one of these cells whatever cell that we click on originally cell dot text content equals current player now we should be able to click on at least one of these cells oh i forgot one thing when we initialize our game we have to set running to true running equals true there so we can click on one of these spaces x x x x then we just need to change the player take our current player then we will set the sequel to then use the ternary operator our condition is if change player is equal to x if current player is equal to x we will reassign our current player with o otherwise x then take status text dot text content set the sequel to i'll use the template literal current player it's their turn yeah just temporarily i'm going to invoke this function after updating a cell now we should be able to alternate between x's and o's x o x o x xoxo yeah we're good i'm going to remove this i was just testing it to make sure it works okay then head to our check winner function we have a lot to do here we'll create a temporary variable of round one i will set the sequel to false if somebody wins we'll flip this to be true we'll use a for loop we haven't used those for a while we will iterate over all of the win conditions within our two-dimensional array the first statement will be let i equal zero we'll continue this as long as i is less than our win conditions dot length property increment i by one we will iterate over each inner array within win conditions but let's store each of these arrays within a temporary variable const condition equals when condition at our current index of i each row has three indices const cell a equals our options but at what index while the index is going to be our condition at index 0 then we have cell b cell b condition at 1 cell c condition index of two let me explain how this is gonna work let's head to the top we're iterating over all of these inner arrays we'll begin with the first we have three indices zero one two we're going to check within our options at these three indices zero one two at least that row to begin with if these three are not spaces and they're all the same that means somebody won if there is no winner we'll check the next set of win conditions three four and five these are indices within our option at these three indices three four and five if there are no spaces and they're all the same character that means somebody won we'll repeat this process for each set of win conditions so heading back down to our check winner function we'll need to check if there's any empty spaces if cell a is equal to an empty space or cell b is equal to an empty space or cell c is equal to an empty space if there's an empty space we'll continue and skip this iteration so if there are no empty spaces that means all the spaces are full let's make sure they're all the same character if cell a is equal to cell b and cell b is equal to cell c that means we have a winner we'll take our local variable of round one set the sequel to true then break we don't need to continue this for loop anymore we can break out of it outside of our for loop if round one is equal to true let's update our status text right here status text dot text content is equal to i'll use a template literal current player wins running equals false the game is over else if so if there's no spaces left it's a draw we could check that with this condition take our options then use the includes method we'll check for any spaces does our array include any spaces precede this with the not logical operator if our options does not include any spaces if this is true then we will update our status text to equal draw running equals false else we can change player change player okay let's try this x o x o x o uh we should have a winner here yeah x wins let's work on this restart button to restart the game we'll take current player set the sequel to x take our options i'll just copy this we're going to reset them so they're all empty spaces status text dot text content equals i'll use a template literal current players turn we'll have to clear each cell take our cells use the for each method use an arrow function expression for each cell we will take that cell update the text content equal to an empty space then set running equal to true okay let me make sure the game's a draw first okay draw i'm going to restart and we have a new game so yeah everybody that is a basic game of tic-tac-toe if you would like a copy of all this code i'll post this in the comment section down below underneath the original video in this playlist and well yeah that's a basic game of tic-tac-toe using javascript

Channel: Bro Code

Views: 56,111

Keywords:

Id: AnmwHjpEhtA

Length: 18min 56sec (1136 seconds)

Published: Sat Apr 23 2022