JavaScript Game Tutorial - Create Tic Tac Toe In JavaScript | JavaScript Tutorial | Simplilearn

friends welcome and now we are planning to develop one very special game for you in javascript because we have already seen our previous projects as like i say quiz game as well as the snake game both are working fantastically and now it's time to talk about another very interesting game that is known for tic tac tic tac toe is world's favorite game we have already played a lot in our childhood days and still my favorite game so i have decided to basically offer you this tic-tac-toe game developed in javascript html css which can create something really really great effects for the end users so let's go and start developing our next game that's called tic tac toe so in this tech tactile i will start working with creating a folder called tic tac and inside this i'm going to create a new file name called index dot html now here onwards the same thing i will be creating this html tags and now here onwards we want our some classes for headers and footer but so we're going to create some div tag now in this div tag i'll be creating some of the tags in which the css class will be applied so we just gonna create a classes uh for you gonna just use those classes but we'll create it later on so just go ahead and create those so we are saying do okay so now this point onwards is my first div tag inside this i'll keep my h1 tag and under this h1 i will be offering some of the headings which will be useful to contain some necessary information with regards to this game so tip here we say h1 and inside this h1 we give the message called class equal to header and here i'll give the name call is a tic tac token after this div class yeah here we will start working with our form tag within my form tag i will start my div after div tag i will use label so label for player one or else i can say player one and inside this let's give the name call layer one label is closed and after this label will start working with our input tag input now in this input what are the details i need first i need call type equal to text number one second placeholder equal to enter name next name equal to player1 next we want id equal to 1 and then any class if i want to apply anyways we're going to close this this is my first text box and same thing i would like to create for my another one so the first div tag we have used let me go and create another tip tag in this div tag i'll use the same label copy the same paste it here and this is for player two so we have this two players with me and after this div tag i'll offer the submit button now input typically submit start game now the form tag is closed here dev tag is also closed so you want the div tag to be closed or before that it's up to you now so here we have a called div class whichever we have taken so if you want you can basically put it later or before whatever so we will basically form that with this so form tag is there later on you can just show some containers where the details will be visible to me so here after the form tag let me try to offer but first check with it is really working fine so here yeah we have this option called enter name in the name after the stick tag tool so yeah so here are the details we have taken input application text and input blue text okay so two values we are taking now and accordingly we will go ahead now finally after the form tag we would like to start with working with the tape tag again div and inside this div i since i haven't created any css classes so those we can use it later on but let's have this div and inside this div i would like to use one more tip tag okay and here we want to use one more div tag so inside this div we will be using one more div tag so in this div we can just give the value called data id equal to zero id equal to zero it's just the value we are passing it the div tag is getting closed fine so that's how we want it now so here the first div tag is closed like that we can create another data id so 0 1 2 total number of 3 we want to create it so i want to create 0 1 2 3 4 5 like this so the way we have created here for this div let's go and create one more div tag id equal to one two three options we have it now okay like that i can keep on creating the others also two three four five so zero one two three four five total number of five we have created one more i would like to create it now here for six there'll be no difference because we haven't changed anything here okay so the div tag is getting closed here okay and that's it if you want to create a some clear mode or button that you can basically offer it later on but here we can use one more div and here we say do dip classical relative and within this div tag i can use any image tag if i want so i just leave it as it is and after this i can create one more div tag and insert this another tip okay and under this i'm going to create a button okay and in this button we'll be having some value okay we can secure the value name called replay this button is created and now we can create a clear board span and here is a clear board that's it okay so here it's just a small game i want to develop it better now there's no user interface has been used so this user interface will be using it later on by offering them a pure look and feel so that you know it gives me more better look when your application will start but most importantly i need to start working with the javascript part where the logic will get calculated here okay so we want to start with the javascript so let's get included the javascript with my code so here i can see here script tag script equal to now the file i haven't created so let it be as it is that's it so this is my script tag and let me try to include my style sheet answer so i just say link real quick start sheet that's it so we have taken this html into our consideration now we'll be creating this css as well as the javascript to make this example complete well we are ready with our html but it's time to basically go back and spend time on our javascript we're going to create a new file now with the name called app.js and inside this we will start writing the logic with our main application okay now the first thing is how we're going to start now yeah so first thing what we need to do is we need to attach window dot add event listener and when the window will load some logic should happen so i'm saying load second is the name of the function so the name of the function perhaps does not exist but i can give the name called app which i'm going to create it shortly now here first of all let me try to create a game board i'm saying let gameboard equal to now let me have some of the values because it is eight digit so we just make it like that and one more for making it nine okay so that's how we're going to create it now okay now this is all empty right now after that we're going to create let turn this new variable equal to zero what this is it keep tracking if x or zero player its turn like which player turns it to b so just it is trying to mention it i'm saying let winner equal to false okay now let's go and create the player so create player how are you going to create a player we say const player equal to what we're gonna pass name okay equal to now inside this we can say name equal to name next we say return name that's it okay after that i'm defining let here x equal to player with the empty value and again player y equal to there is an empty value now let's try to initialize the app okay initialize now inside this initialize the app we're going to create a new function function app and inside this we're going to create a variable likewise saying let input feed equal to first of all document dot get element by id here we're gonna take the class name of this particular text field so we are saying input hyphen field okay dot focus okay now after this we have to say const add players equal to once again document dot get element by id let me just give the name called player form okay next we are saying add player okay dot add event listener we want to attach the event on which event submit event and what logic add players okay after that once the players are added we are saying let replay replay button equal to once again document sorry document dot get element by id or rather i will say document.queryselector document. query selector replay type btl okay just the name we are basically taking that and here we say sorry replay button dot add event listener which even i want to say click ok that is the first event second reset board reset board that we are basically passing that okay now this is the initial case which we have it now beyond that i will add this is the layers what we have added right nut slides to add the players so this is how we have initialized after that let's add please how to basically add the players here we have to just define the function add players okay it will take event as a parameter and say event dot prevent prevent default this present default will try to prevent the default uh you know behavior which is submitting to we get avoided and now here we say if this dot player one so we just define the property call layer one if this dot player 1 dot what value okay is blank or this dot player two sorry just start player two now i just want to find it out its value also value black then what i should do in this case i am saying alert you must enter name for each the user has to add the values and after that return okay now the next thing is like we would like to select the players in this inside this by saying cost again const play from controller container equal to document dot query selector talk about the query selector here we will just pass the value call enter hyphen okay now we say cost board main equal to document dot once again query selected code list dot class list dot add here we're giving the name forward height container all right container and after that you just say board mail board main dot class list dot remove height hyphen container okay so we've basically taken that and after this what i will do i'll just say player x dot name equal to this dot player 1 dot value okay this is for player x copy this player y 2 and after that that's it so we have done it now so we'll be calling other functions one by one but that is the first thing which we've implemented well so add player function is added right now and uh after this add player we have to basically call one more that is called which returns the current player so i'm saying return current player and here what i will do is just write function and here we say current player and in this current player what we will do is we will say return turn test variable okay percentile 2 we're just adding it with this 0 okay if it is then x turn i'm telling you okay or else so we're hearing like the current player who says the current tail right now well after this adding the return current player we're gonna add another function that is known as call rate of the current player rating current player is having this value and after that we need to say resize the square in event browser is resized once again if the browser is getting resized automatically the square size of your tic-tac-toe should also get increased so we just say resize squares and here we're gonna say this option equal window dot add event listener now we have a call option called resize here and the second parameter what we are passing is called on resize okay on resize now let's try to add it after this we are writing this function called function on resize that is a function name for me the one which you are passing into the second parameter we are saying let all cells equal to document dot query selector all in this we are passing board underscore okay and then we're using another option called what let cell height equal to all cells with the position okay dot of set width or set width after that we are saying all cells dot for each here we are passing [Music] cell [Music] and after that we are using cell dot style dot height equal to now he'll be using this backtick and use this dollar sign and say cell height and that tool in a pixel so this will be taking the dynamic values okay that's it that's it over now we have to just launch our build board now billboard build board so how we gonna build our board now for this we are saying function billboard and inside this billboard we will see this option called let reset container equal to document dot once again query selected and pass the value call dot reset okay and after that we are saying reset container dot class list dot remove and we are passing the value call reset hyphen hidden this value and after that we may call some other type of functions also okay so for those functions i can say first will be called on resize after that we are calling add self click listener i do not have that function with me these functions we need to create it by our own okay so we will just leave those for a time being let's go back and create another functions now so we just want to write another event with self click event for play to attempt to make move so here we are trying to say sell click event for player 2 attempt to make move now this function need to create it so we just say function now we just say function and give the name of the function to make move now function make move it takes give it as a parameter and here we are saying console.log and say now let's go back and try to check another condition that is called let current cell equal to power sent because you have to read the value from there and here we are saying what event dot current target sorry dot current target dot first element child okay dot data set dot id so we're reading these values after that we use another variable called let cell 2 add token now here we are typing document dot query selected and here you know using backtick i'm using this value called data hyphen id okay equal to here we are using once again in a single quotes dollar current cell okay so this value we are taking it like that after that we are using this situation called if cell to add token dot inner html exterminatory mark blank once again if cell to add token dot inner html equal to blank then what next so cell to add token inner html equal to blank then what you should do i'm saying console dot log and give the value the one which you want okay so in this console.log what value we can give it cell to add token we have it it is taking this value to the current cell dot inner html console.log and inside my console.log we can set this cell is already taken so values are already taken for this and now we will be returning those values after that we will be using else condition and here we use once again if current player okay is x then we'll be using this option called cell see we have this property option available called send to add to consuming cell to add token okay dot text content equal to current player okay and we say game mode the one which you have created pass in this game mode this value call current cell and in this correct cell value will be equal to x okay else we can say send to add token dot text content equal to current player okay and say game board current cell equal to like this okay so here we are adding the values like that so it is closed after that we can just use the function name for is winner to check whether the user is winner or not so we are saying is winner okay and after that we are saying turn plus plus after that we are saying change we do not have the function name called change board header names okay so it's just like that we're giving it so as usual we can leave this function for a time being and we'll call this little later on so leave it as a for the time being okay so your function is now ready so the next thing what we need to check whether it is tie or not okay so we are saying function check if by we're just taking the function whether it is game is tie or not so here we say if the condition is turn greater than 7 alert okay well after that we are saying winner function is winner now what we will check is we'll check const winning sequences winning sequences and here sorry here we are having this array and having the different conditions associated we say 0 1 2 probability we are checking it and then i just copy it well using 0 1 2 and here is saying 3 4 5. six seven eight and zero three six again zero three six and once again one four seven four seven and next we have a call two five eight eight then we are checking the vertical zero for it eight and one more last option we will put is called two four six six so these conditions we are adding it now after this array we can say varying sequences start for each and give the name call winning compose winning combos and inside this varying compound we are giving let cell 1 equal to varying combos position 0 then that copy and paste three times cell two cell three and here we get the other call what one is two three values we're giving it and after that we are checking the condition let's say if and here the conditions you are checking what exactly that will be for the game board we are saying game board set one current player sorry current player ampersand time percent come down game board cell 2 i just want to copy the same line and paste it multiple times now here we are checking the condition for cell 2 and cell 3 and cell 3 and after that we're starting the position so after that we're starting the position call [Music] by cutting this condition called consense const sense and then equal to document dot get element by or sorry document of query selector query selector all and here let's select the position dot board underscore cell okay then after that we will be using cells dot for each cell and inside is what we are passing we are saying let cell id equal to cell dot first element child okay dot data set dot id so this is the value which you are basically adding it now and we're using one more if condition pressing if cell id now we're talking about call cell id triple equal to cell 1 or saline cell 2 or salary equal to so3 okay and in that case we can use cell dot class list dot add and get the name called board just give the class name winner so here we'll be giving the winner and a part of that we can use the other conditions too okay so here it is adding the value and now let's say let current layer equal to document dot get element by id so you can basically define it so current player you want so we can use the current player or whichever conditions you want so here we use what the cell winner now small change rather than using correct player we can use the current player text the new variable we are creating it current player text document dot rather than saying get it event by id we can say query selector and in this query selector will be giving the value pricing dot board player hyphen term the value which we are giving it here and that query selector value whichever you given this let me try to put it in a parenthesis like this okay now here we just check if current player x then what then in this case we can say current player what is the value we are using current text dot inner html equal to now we can define the value whichever you want to operate we just use a condition called div class equal to okay so we are saying congratulations okay and here you see congratulations along with dollar sign and here we pass and here the tip tag is getting closed like this okay so that's the message we are basically printing it and after that we give this value and say this message called winner equal to true and after that if you want to apply remove that function we haven't written we'll be talking about a little later on and just say return true again so your function is ready now and later on we can just check the condition a filler if winner or we can say check if tie and written false that's it now in our continuation to this example we're gonna develop another function which the name is called change board header names so let's continue by defining the new function called function change change board header names so this change board header names will be the new function for us and here they would like to check whether the user is winner or not so here we say if not winner then what then in that case you have to say let current player text equal to document dot query selector in this will be getting the details like dot or and here we gonna give the name called player and hyphen turn player hyphen turn now later on after this particular variable we have to just check the condition by saying if current player equal to x if the position is x sorry let me try to put it in capital letter here x then we'll just say current player dot inner html equal to now here we have to just use the same option called backticks because i want to go multilines that's the benefit of this backtick and here we say in our inner html span class equal to name hyphen hyphen style close this and here we want to use the statement now this value we want to write it with name attribute so it is getting close and here we are saying dollar with this player x dot name and then close the span tag and we say you are up like this and after that we say dev class equal to which is going to create a class which later on we can apply the css style on the top of that u hyphen r hyphen winner and here we say closing the div tag so div tag is closed that's it and now after this line what next we have this called else condition else what else here we say current layer text dot inner html inner html equal to after this we gonna write the span class equal to here we say main hyphen hyphen same option we're gonna use it so in this condition so winner conditions so let me try to copy this thing rather than copying it again and again i'll just copy the whole text expand class equal to name hyphen iphone style player rather than saying x you can use file you are up you are winner okay so here it's getting closed well after this what we need to do create another function called reset port function reset board now in this function reset board we just say console.log a small message resetting resetting is added now afterwards we will be using the game board and the same game board what we have used earlier i'll be using the same conditions on the top if you remember that was the game board for me so i'll be using the same keyboard we copy this yeah with the same condition okay game b equal to this after that line we will say let cell to add token send to add token equal to document dot query selector all here in this i'll be using another class called letter now cell to add token whichever we've used dot for each square and within this square we would like to use square dot text content equal to black after that square dot parent element dot class list dot remove and here we would like to say board okay underscore underscore cell winner so these classes we had to create because these changes classes were just using this but we haven't created we'll be using it little later on so that was the point now after that we are defining the turn value turn equal to zero because we are resetting it n winner equal to false after that when is equal to false we just define another variable called define let current player text current player text equal to document dot query selector all yeah document query select all so here we're gonna use the name called board define player hyphen hyphen turn after that current player current player text currently text dot inner html equal to once again we have to use the condition for up and winner point so let me try to copy this inner html equal to okay and in this we have to say player x dot name okay just everything is same no change at all okay now here after that we're gonna write one more function called function add cell click listener that means when i will be adding or clicking something to my cell what kind of event i would like to listen here we are saying const sales equal to document dot query selected all let's check the condition board board cell and here once again we say sell stock for each dot for each and here this is cell dot add event listener which event i want to listen click and the second parameter will be handler ones called make move okay and this function which we have created called add cell clicks listener okay this i'll be calling it here perfect later on once it is done let's try to add one more function called function remove cell click listener remove cell click listener now here we say let all cells equal to document dot query selector all let's pass board cell and now we say all cells dot for each cell and here we say set dot remove event listener which event click and second parameter will be make that's it so friends now here most of our javascript code is written now so going forward we would like to use css and finally we'll be applying everything into our html file well after the javascript file is ready towards my application now it's time to go and create our html file now sorry the css so inside my tic tac i have got app.js and index.html ready now here i am going to create another file here called app.css see you can basically put this app.css in either folder like in static folder but i have just kept it outside now from this point onwards i would like to start with my basic functionalities okay what those are let's start with the first feature called body with my body some basic settings i would like to do like in background image background color so i just start with background color background color i can just use it as a white okay uh but i don't think so it's really needed it so if you want you can have it otherwise leave this background because it's by default going to be white only and now next would be called height height will be 800 pixels next background position background position i just say like center next background repeat in case if you do not want to repeat the image background repeat and here i say no repeat next background size they're using cover okay so it resize the background image to cover the entire container okay so that's what the body part now the next thing is we have to select the rest of the css classes so first select div dot relative inside this data relative is first say call position position we are saying absolute next is top from the top i'm just making 760 pixels next right right you're just saying 120 pixels next after this we are saying height container height dot container oh sorry hide hyphen container here in hide hyphen container we will display display colon none well after that we have to use the header point header inside this header we will say color will be by default white but still we just say color and white next text line we just say center next margin margin will be 50 pixels next font family font family i'm selecting called permanent marker permanent permanent marker okay next class we are talking about call interplayer that's called dot enter hyphen players now in inter hyphen players we will say color will once again we can use another clear but we can just use white or any color you want or you can just use hash okay margin margin we're giving it's called zero auto width we're looking forward for eighty percent next texture line center position relative now next we're going forward for input field in this input field we just say border border two pixels solid and black next outline outline none i do not want any outline to be there next padding i can take 4 pixels 8 pixels four pixels eight pixels now margin we are saying zero zero ten pixels okay and finally for pixels after this margin we say font size 18 pixels okay so that is your input field next we are talking about something called input field focus input hyphen field okay colon focus now here border two pixel solid right or any other color which you want to use it next how you want your submit button to be so i'm saying dot submit hyphen btn border two pixels solid and black adding 8 pixels and again 8 pixels font size 80 pixels now with 250 pixels followed by border radius 5 pixels next your margin from top let's take 10 pixels after that background color let's take white only okay so this is the property now going forward you can associate with your submit button active and submit button focus so we are saying dot submit hyphen btn colon active and two options we are taking followed by condition outline outline [Music] next border we're talking about 2 pixels solid and the color red okay so that's the one and after that we like to use over dot submit hyphen button colon over what you want change the background color to what white you can use white smoke well here we like to use a dot board here we'd like to use player hyphen so these are the classes we were using in our javascript we remember and here we say color we're using once again white or you can use this white smoke whichever you want so well later on texture line center margin 10 pixels 0 and 10 pixels height 54 pixels okay so these are the properties initially we have taken okay so after this turn let's go and start another classes here i'm saying dot name hyphen hyphen style and here we are saying color red and then font size 22 pixels well now coming back to the another properties now we're talking about a next important called border container called board container dot board container here we define width which is 40 pixels we are taking or sorry 40 percent we can rather take after that background colors that we can say coded blue okay next margin we are taking is zero and auto after that font size font size we are taking 0 next border bottom we are taking 2 pixels then solid and then black followed by box shadow you remember this worksheet is one of the very very seasons three popular property here we're defining three pixels three pixels three pixels zero pixels and rgb we can talk about call black okay so my border color will be shading color will be black after that we're offering this board cell dot now in this board cell we are defining width now in this width we are using calculation ca lc and in this calculation we are defining 100 okay divided by 3 this calculation after this the next property will be display display will be inline block next font size we're taking 40 pixels well texture line center border we are taking two pixels solid and black adding 20 pixels vertical align top next font family this formula can use permanent permanent marker okay now next option a part of this we have a call your board symbol board cell iphone winner i would say rather i could be there no spelling wrong this has to be d yeah for cell winner let's make background color red okay and [Music] later on just use letter now in this letter we just give the color combination so color will be white next position relative top 50 next transform translate y to minus 50 after that font family we are making it once again permanent marker let me copy okay now here next option will be called winner container here we're giving winner with dot dot winner hyphen container okay so for this winner container what are the values we want to use it that's you want to basically do it so if all this has been a container what i would rather suggest is you can use dot reset texture line center margin 20 pixels that is for reset and now reset hidden inside this reset heading we will set display now display none okay after this the replay button it's yeah now we're going to talk about replay button dot replay hyphen vta and here width we make it to 25 percent okay and followed by padding 10 pixels we take it from here and 20 pixels border this bottle we are taking is called two pixels followed by solid okay and black color now later on border radius border radius we're taking 5 pixels later on outline i'm saying none after this outline we say letter spacing now this letter spacing would be again zero after that text transform this text track form value we're talking about called uppercase next font size font size we are taking 16 pixels then margin top margin top would be 12 pixels then word spacing that you are taking three pixels followed by background color this you are taking white as usual so this is for your replay button okay now in a similar line we can also have call dot replay iphone btn colon hover followed by dot replay hyphen active now apply the common style outline we are making it null then color we are making it is called white then background color will be black okay and when it comes to the congratulations so we'll be using this dot okay so this congratulations class will be using font size to what 24 pixels and after this we are using this call winner dot u hyphen r dot winner in this winner we'll be taking font size okay that's 18 pixels after that height we are taking 18 pixels again then line height line height we are taking 18 pixels and then margin two pixels and then zero okay that's it so last but not least we would like to use this dot replay hyphen btn this i'm saying with 50 50 percent so this is what my css file is all set i know it was pretty lengthy but it is required for this particular application okay everyone so we are all ready with our css also now it's time to go back to our index.html file and take care about the final finishing touch so we have this index.html file with us and now the css class which we were using it in our application that is known as called this permanent marker this class is not by default available so we have to include this using this external api so here where we have a call css with us before that we want link so within this link we want one variable name called href equal to now we have to give the proper location by saying https colon double forward slash fonts dot google apis okay dot com slash css question mark family equal to permanent plus marker okay so if you just copy this into your browser you will get to know where exactly it is using okay if i just copy and paste it so i just need to say https before yeah https fonts dot google apis dot com slash oh spelling wrong css family equal to permanent marker that is the main url from where i can take this kind of font so here css so that's what i was cross verifying it well it's there we have included our css also but in which class we need to use that is an important now js i also want to include it so here in my head tag only i would like to include script src equal to app.js so here my script is actually loaded now after that if i just go back and check the final outcome of my code which is index.html file well it pretty much look like in basic nothing else has started when we talk about call start game okay so it needs to start because there is no css class r attached so i need to attach those classes within my code so here onwards we have to start with offering those css classes so that at least i can apply those common behaviors to my application okay like here we have a call dem we haven't attached any class to this after this body we have a part tip h1 class equal to header tic tac toe then we have a call div we have a call body uh under this we have a call another dev tag so just imagine how many type of classes are available one we have called tip class equal to header div class is closed again we have a called one more div tag so like that multiple css files are there where we have to apply the new css class to make it happen so now we have to just go back and change our html and to apply our main class so this is what my final html which looks like the same you can see we have added all those type of css classes which we had that is called inter player player form player container label placeholder and player container and if you see all different type of classes we have attached this to okay because here only my css class will get applied and the javascript will apply those kind of dynamic css based on certain conditions so these css classes are already there added inside your html page our app css is ready app.js is also ready now let's go back and try to reveal how it looks like awesome so it looks like pretty nice tic tac toe is a game it is expecting and it says start game it says you must enter a name for each field validation is working let me try to add two names and says start game awesome so now you can see it is saying hey you are up now let me try to give the values awesome now you can see it's saying like hey you are a winner great so guys congratulations on this the first example of how the tic-tac-door game is used so it is a classical example of css javascript and html together so i'm sure that you've enjoyed the session thank you very much hi there if you like this video subscribe to the simply learn youtube channel and click here to watch similar videos turn it up and get certified click here

Channel: Simplilearn

Views: 4,894

Keywords: simplilearn, javascript game tutorial, create tic tac toe in javascript, javascript tutorial, tic tac toe game in javascript source code, tic tac toe game in javascript code, tic tac toe game using html and javascript, webdevsimplified, js tic tac toe, tic tac toe tutorial, js tic tac toe tutorial, javascript tic tac toe tutorial, js game, js, javascript, js game dev, javascript game dev, css, advanced css, simplilearn javascript

Id: 2F01OSDbPK0

Length: 82min 32sec (4952 seconds)

Published: Tue Jan 19 2021