Building A TIC TAC TOE GAME USING ONLY PHP Tutorial

all right so we're going to build today is a tic-tac-toe game so we're starting your game and so we can begin playing so you play oh we have to press enter and then we say x for the other player would play x and then you would play oh enten and the other player would be like wow where should i play to play x and then enten say oh wow are we gonna win we have a winner zero wins right so this is what we're gonna do today we kind of style it nice wow nicer than expected um so yeah so we're going to show you how to build this game let's let's try it again uh if you try to play the the uh if you try to play when it's not you can't play twice right so right now oh zero is supposed to play so you can't play twice and we go with x and we should get into that diagonal there x wins all right i didn't get started in the game so i'm going to show you how to how we build this all right so we have our template we can see that we have tic-tac-toe is the name of the project play is the name of the file that we're going to use and we have our template here so we just added in that html so we have we're gonna name the title tick tack tool and we're gonna give it the h3 header of click attack to game so we can test this to see how we doing um so we on our way to building our project all right so the next thing we need to focus on is building the layout so the layout is basically going to be a table so we're going to create a table element and that table element is going to have a bunch of selects in it um take that cool layout is three by three so we need three columns and three rows so tr is a column and td is a row so we need three of these and well we're just gonna do one for now i'm just gonna make sure our table looks good we can't see anything because we don't have any styling on our table so we probably should put some styling now yeah all right so let's put some styling let's give it a class we're going to give our table a class of um table tct which stands for tic-tac-toe table as the um that's the name of our class i spell that wrong after we fix that so city table and we're gonna say that we wanted the border to be collapsed um yeah we're gonna leave it like that for now that should be fine tct table i don't know if that would make any difference so now i'm going to test to make sure my table is actually being displayed because i ain't seen anything but my table is there man alright cool so in every table all we need is a select element and i'd see like element is gonna have three options the first option is gonna be called select or play as excuse me i'm double checking to see what i have all right so this first option you're going to be select so you have to make it call it choose play or something like that the other option is going to be zero for x zero ones it's xo what's up oh right it's an o right right so that's going to be it zero and oh so we have one here zero and o right it looks better than anyone originally have so basically what we can do is copy this and put it in the rest of our put in it's in the rest of rows so we have our first row right so our game is is getting there so we need to finish the layout [Music] we need to finish the layout all right so i gave my table a border of one which is what i was trying to do earlier so now we kind of have a border going on our table so we have one row so we need three more rows so what we could do is just copy this but if you notice right away i can't um i don't plan to be building out all the rows but this is just the template that we're gonna be working with so this is basically the game here we have zero you have x yeah zero you have x so as you can see our game is on the way already so the other thing we would need to do now is we need to displace things dynamically because the values will change based on different conditions so what we actually want to do is create a a loop and display these inputs as the keys may be so let's uh let's get into that now so our job is to create a function that can generate the specific rule or what do you call uh the board or this yeah or this specific board well it could generate the whole board but you want we wanted this we want to generate this thing right here let me show you this i think i don't know what you call it a block or something a tile so actually let's create that create tile that sounds like a good thing so we can create a tile and how we're gonna do this is basically basically all you're doing is creating a zero for output basically all you do is create a now output um select elements so select and actually you can leave it like that for now i'm just gonna put everything an option there this will not be the case um and then return oh so that's like a true step create tab and then within this we can just echo create tile ah so this is actually pretty good it kind of saves us a lot of trouble so we have our tile created there and then we can pass things to the function and do different things that we want with it all right so let's see if that works yes our tile is being created so now let's focus on the board so our board is going to be an array of values um and those values are going to represent different um the different uh states of the different tiles so tree is gonna be select so the game hasn't started yet or the game has officially started and no one has played and that's gonna be tree so we have our multi-dynamic dynamics multi dyna dimensional array because i think that's what that is and we just align it to represent each tile on the tic tac toe board all right so what we could do now is you could forward loop through this board so instead of going through all of this drama we can actually delete this and make it fall look pretty bored and create a row so let's create our for loop php for each board as each one of these represents a row right we're going to end our for loop here and they should actually just give us and for each right so this should actually give us as you can see it's being displayed already right so we are literally dynamically rendering our board right now and the next thing we need to focus on is is uh each tile so we're going to save for each row as tile and we're going to close it the same way we closed it before so this should actually allow us to render the individual tiles so we could delete the unnecessary items here fantastic this should be a for each so this is exactly what we want give it a little proper space and let's see if it works so again it shows up the same way because it is wicked so now that we get in our tile what we want is the value in the tile so i think we can actually just pass in tile which is the value so remember we have details here right so 3 3 3 each of this valley represents what the value of the tile is so in the case if it's zero we say it's o and in case that it's one we see that it's x that's how we're going to display it um so right now we pass and then detect the tile and we have to do some logic here so we're going to build our dynamic tile to take in the value of the detail and now we are going to dynamically create our select element and the value is going to change based on the value of guitar so let's begin the first option is select the second option is is oh and detail option is x so this is great and then what we see in a value is equal to a value is equal to one let's start with your value is equal to zero see we have some ks going on here right so we need to close out our output right so if we see what we will see is if value is equal to 0 then we want our option to be selected otherwise our option is as it was before so val is equal to zero you want this to be selected so you want select it to be true and we're doing the same thing with x if value is equal to one then we want our option to be selected for x otherwise the option remains the same so that's what we're doing here so you see selected is equal to selected and we agree to go otherwise we return zero so let's see how that looks let's check our everything seems to be good there but in this case what we supposed to be able to do we set one zero entry and then those values should appear to be selected when we reload our board so as you can see that what's going on there so we can change in the individual values of our tiles and get it to display accordingly so our win condition in this instance i mean we have more ones and zeros but just a for an example right now we're going to display a win condition so right now x is a winner and then we can see we have zeros here as well so this is great uh we get it somewhere and tic tac toe after you select a value and you submit it you are not allowed to change it until you start a new game so we're now going to implement that logic so what that means is that our select element should be disabled in the case that we have a value so if there's no value it's alright so let's check it out if value is equal to if it is equal to zero or value is equal to one selected should actually be disabled otherwise it will remain access so we're going to create an o up here since we're going to make some changes and then select would also be joining that concatenate right so that's what that that equal means if i never explained it before that equal is the concatenated string so if it is selected if there is a value for either all right so if there's a if there's a value for the tile as in if it's not tree we could also do that if values not tree then we want the select to be disabled otherwise it should be others so as you can see our things that are selected are disabled and we could only select one so this is great and we're gonna do something else here so we're gonna submit the form now so right now it's just a table so we're gonna wrap this table within a form and then we're gonna give all these select elements a name the name should be unique because we want to identify every select element that is not necessarily required but it would be necessary is that the same thing what's the difference between required unnecessary anyway so request method is equal to post as long as it's equal to post and the input that we're looking for is play so our button is going to be named play so this is how we know we're going to submit the form so we're going to put a button here and we're going to name it play or enter which is what we actually going to be doing but anyway we give it a name of play right and we just want to see what it is so if i don't post i just want to see what's going on there exit so right know we haven't given it a unique value as yet so let's just say enter and that's very interesting so i know what's going on i'll explain to you later well i'll tell you now so because we have it as disabled no values are being submitted which is not good so let's say nothing was disabled i'm able to select some values we should be able to see the values that we selected and that is not happening all right so let's give it a name i'm going to give it a name of a rule but again this needs to be unique because i believe you'll encounter that problem before so we're going to do a few things first we're going to give everyone a unique a unique uh id so we're going to say count is equal to zero and then we're going to increment the count and the end of each for loop if you didn't know you could do that as possible so the count starts here a bit as big it increments here oops has been incremented in the wrong place no no no it's for every row so yeah i believe it's being incremented in the right place and then we just need to add the count here so the count is kind of like the id and we want to come to start from one and the reason we're doing this is only because we need to give the row or the select element a special name and that name is going to be based on the id again there might be a better way to do this you can always let me know i'm happy for suggestions all right so now we have a name and that should actually take care of the fact that it's not being posted we could check to see if this is happening in the html so we have row one and the rows at the bottom should be row nine which is fantastic and we wanna see if any of this is being posted this is great so everything is being posted this is exactly what you wanted to see and you can change the value to example as the case may be and that should change so that is great um so row one or two or five so yeah in the case that we we um what we want is to always have access to the board so that what we're doing here right we have a hidden input and this allows us when we submit when we submit the form we have access to the board or should i say we have access to the current board so what we're going to do is we'd submit the values we'd update the board and then we would save it here so this is kind of like our cache or our database or however you want to phrase it but that is how we get to see if changes being made we first output the current board we make changes to it and then we save it although i'm seeing nothing happening here which is not good oh we should have echo echo json and code right so that allows us to i'll put the array and then we can get back the array when we post in the values you can see three three three three three three three so when we put in values you can get back the board simply by doing board is equal to i set post board so this will give us the current value of the board and [Music] and we can we can then um update this board and send it back out right see if we don't do this the current value of the board will always be this right so that's not what we want we want whatever the current empty value of the board to be is what we're going to be working with so that's kind of like our history going on there all right so that's one thing you can test it out just to make sure you have no errors you're still exiting so let's stop that i'm gonna do no one or something we did when we was creating our calculator is we're gonna look through all the post variables so we're gonna go through posts and we're gonna say as key value and we're gonna take out the ones we don't want so if we say uh we could do it like not an array so nothing array i think this is not how i did it neither what is the needle what are we looking for [Music] and here stack is theory so if key which is the needle it's not enough we create going to create an array if key is not on board so if the key isn't bored we could proceed i believe i'm doing that correct i can however be wrong so you'll double check if key is equal to x or o and then we see else if key is equal to x [Music] else right and what we're going to do here we're going to have our response array and this is going to take all our responses and then we're going to have a row array and this is going to take all of our responses as well ari is that how i spell that um so to explain well i'll just show you so it is equal to zero you see row re and we give it the value that it represents zero represents zero and x represents one and if it doesn't have anything that means it's tree and now we can see so we check in to see see we add in the areas real viral right and a row has three values on them so what we need now is a culture and you're gonna understand when i'm finished and then we're gonna increment our counter uh if we actually doing anything doesn't matter though no so we need to take it out of the if because we're gonna increment all the time and what we're gonna see here we're gonna say if counter is modulus 3 ah you go to zero you're gonna say response equal to row array the row array is equal to empty and then what we can do here now that we have our new responses is that we can update the board and maybe brought equal to responses and what we want it to be is responses on our response so we're just going to make that change here and let's see if that works again i'll explain everything after but we're just going to do a simple test and this is now working so if not equal to board do we have anything else in it let's um as a fat bottom our post values we want to see what's being posted also that could be my nra um in trouble replay so let's add play here i'm going to explain this as i said but we're just doing our testing to see if it breaks at all it is no weekend um all right one second so so far the mistake we made was um while key is fine for this because this indicates the key value is what you actually should be checking against so i am just going to see if that works so values so we should actually be checking against um however i love that i'm here so i need to remove that so we're just checking against the key and that should work all right so now we're checking against the value and well it doesn't work as expected you see one works the other gives some problems but we kind of halfway there i'm not sure why um my board is behaving like that maybe we can see what's going on [Music] oh actually i know what's going on so i'll fix that zero one zero three three three three three all right so let's explain so we we're going through all the post data right now let's look at the post data all right while i pretend to do this from the top of my head what i just did was um great so what we're going to do is we're going to kind of do a pretty prince kind of thing here so it allows us to see the area values better so that should do it and then we exit so let's test this [Music] so now what we're looking at right so we've seen board we have some values for board we have some value so a rule and then anywhere essence select and then we have play so what we're actually going to do is we're going to loop through these values and this is the key and this is the value all right so when we say let's remove the exits here so we're looking through all those values that we show you here and the key any value so again based on the example this is the key for row one or one row one or two or three and these are the values so we say if it's not an array so what we don't want to count is the things that aren't um rows so we could actually just check for rows only or or keys with rows roll in them or we exclude these so we say we don't want board and we don't want play so that's what we do here using the in array function and then we just check in for value so value is equal to zero and if value is equal to x otherwise value is equal to three so that is basically what we did there and finally we have a counter checking um the state that we in right so remember a board has three tiles and three rows so we're checking for it for the uh for the end of a row count so that is where this comes into play all right so the long and short of this this is the module glow modulus operator and basically what this says is uh on the third row um we're gonna set any values that we have in rory to the responses area and then we're gonna clear the rory so on the third row that means we get three values and that means we are creating our board again so zero one two this is the tail row we whatever was in row array we put it in responses and we clear row array again you can check enter what the modulus operator does some more and details all right so now you can have an understanding what's going on one of the reasons why it's not working is because it's clearly pretty print what happens is once your select is disabled it no longer shows what the value is so once you disable select you no longer have access to the value so what we need to do now is we need to create a hidden input that would mimic the select element so that's what we're gonna do now all right so let's begin by creating our select element we probably can name it input no we have to name it input because that's what it is anyway so input type of this is hidden um the name is what the name is so we already have name so we're going to give it the same name because that one is hidden right um and we probably could take out this name because we're not using this just in case it shouldn't matter just in case there's confusions and finally it needs a value so let's give it a value and that value is going to be so this is what needs to change so we need to get the actual value right and i think we could do this so if value [Music] no we're going to attempt to do the shorthand thing if value is equal to zero then oh else if values equal to the value is equal to one then uh x i'm not sure if this could work and since i'm confusing myself we gonna do it the long way so we're gonna set the value to now oh why are we doing it wrong too as well so say real value is equal to now let's do the hard way so if value is equal to zero yeah yeah the real value is equal to oh else f value this would be so much better shorthand now is equal to one as you go to x else the real value is equal to how much space it takes up just for that simple piece of logic i don't like it all right anyway so now we have the real value and they should actually solve the problems that i was explaining and maybe you didn't understand it let's close pretty print close some of the tabs so let's see if we have any success yet um we have some outputs going on somewhere all right so we say enten all right so before right what was happening is i think it's still happening nope so before what was happening is that because when you once you disable select and explain this before once you disable select you cannot get access to the value that was within you see that so now we just create a hidden input to take care of that problem and we just needed to create a real value variable to get to convert the number to whatever the value is supposed to be again i think there's a better way to do that you could always tell me if my solution is too simple all right so this is halfway of the game right here the next thing we're gonna do is we're gonna start creating the rules one of the first rules is that you probably should not be allowed to play twice so you're going to look into that and then we have to do the logic of how we detect any wins because you need to check to see because we don't know what um what changed in our responses we're going to have to check to see that so we're going to create some logic here we're going to create array call changes and the purpose of this sorry is to check to see any changes that was made in our responses because again we don't know what he played actually played we have no idea so we are going to check for it using this array so we save the board as key value so we're going through the rows of the board and now we're seeing every value and value is equal to response fact it's not equal to response i'm key it means some changes were made we add the changes that was made to the response array not to my titty changes already and then we can dump this to see what we got so again we look really bored and we check for the board to see we check within the board rows to see if the value that is within the ball changes from the responses so that's what we're doing here and now we're just going to test that to see so you should be able to see any changes that were made right now let's see no changes was made and now it's saying no changes made again all right so let's uh i see we have a problem with select as well i'm just going to check for that problem when i when i put a number here it seems to disappear nope it could be in my head all right so we what is equal to responses that has to happen after so we can actually check what's going on including some tabs all right so zero culture must be an array got comfortable yeah yeah counter board so json and code that's interesting that excluded a lot anyway so this should be decent decode because we decode any values and now we go in all right so zero is the one now exchange and then we have x change and the value of x is usually one um evaluator is usually one right now it's in two changes i know that error happens i don't know why that error happens i have to look into that anyway so if we submit to two things you should get two things in the array but right now we have three for some reason maybe we should empty changes right now we have two i have a little error that i need to fix it showing up at 10 now and then so you're gonna have to look into that um but basically you get the point right so any changes that were made is being added to the changes array and what we could do is something really simple we can say if the count of changes is greater than one we can see [Music] echo can't play twice right we're not supposed to be able to play twice so we can say that and then in that case you won't update the board with the responses so that no changes would be saved [Music] so let's just reload the page and we say zero this is great x but if you try to play twice and submit two values say can't play twice and that would be invalidated okay this is our error here i won't know where that is coming from let's look into the html to see what's going on maybe we have a duplicated row somewhere row 2 or 1 assuming you don't have a value here we should have a value here for row 2. so i think x is given some problems so [Music] [Music] real value your value is equal to zero [Music] x is given some problems because it should have a value here and it doesn't um so that's our problem we need to look into that to see what is actually causing honesty problem which term from here but i'm not seeing anything wrong [Music] think about php sometimes the most obvious error is the hardest part check this out i have two equal signs these should be assignment operators that has been given me so many problems trying to figure that out all right that solves our problem there that was very confusing all right so i know i'm gonna go back to how what i was doing i was spending some time troubleshooting there trying to figure out exactly what strictness i did but that's resolved now so i can i can uncomment what i commented and we can pick back up away left off right so we do anyway checking to make sure we can't play twice we had some weird errors and we just had to fix those and we are back in the game so right now it should be working as expected and the only thing here is that we can't play twice which means we can't submit two values at the same time so we could only submit one value so this is great um [Music] and now we just need to make sure that uh the correct player places your paper first um zero x oh one x if o or zero o plays first x has to place second and if x is was the last play zero is the other player all right so that's the logic we're gonna add now so you're going to say last because you go to null right so that's the last play we can call it last p so we i get any last p and how do we assign the last p so as long as changes is not greater than zero um we can say last value is equal to change is zero right because in truth only one percent should have been the player um yeah so we you can't play twice or you can't play more than once you can't play more than once is actually the correct message um you can't play more than once you also have to do another check to make sure that you can't play twice which is what we're actually doing now and that check because we now have our last you see the flash it's not equal to now that means we know that's the first player and last is equal to changes zero which so if the last play is equal to the current play then you have to see echo cannot you can't can't play twice right so if you last every last play r is equal to the current play it's in you can't play twice all right so the only thing we need to do now is we need a another hidden input and we're going to call that last as well we're going to make sure we have accessed it when we submit it um yeah we're just going to put lasting value so it could be null or as the case may be and then we want to get last here otherwise it is now great so we can actually check for this now see what's going on so anton this is great not great i don't know what's going on there another era sometimes it could be the browser but nope we really have an error oh so because um we have a new input so we now have to exclude that input from being counted when i was actually doing this i had so many issues that i was confused for a second but yeah so once we add new inputs um remember we have to exclude the mode from from our row count all right so yeah we figure that one fast because i had so many issues anyway so zero and x if you try to play x again you should get an error you cannot you can't split twice right so you're not allowed to play twice in the player must be different you can't play twice you cannot play ties the player must be different so we can do the same thing for zero if we try to play zero twice we say you can't play twice um so it must be x so this is great also you cannot um and some more on once you can't play more than once or answers the keys maybe you cannot play more at once yeah that's fine all right so this is great this is great this is great now to be honest that is it for us there right so you talked anyway we are really completed so this is the moment everyone has been waiting for we are now going to check for the winner i'm going to create a function called check for winner or winner check um function check winner that's going to take in some values and you're just going to return it false all right so you have a lot of else's let's add another one else if check for winner if check for winner we see we have a winner we have a winner and then we just need to tackle the winners all right echo the winner is andy when i would be the last player right so you're doing this so that's for the winners otherwise we continue as normal so we're just making sure that doesn't interfere with anything we have and now we just need to add the logic to detect a winner um so this actually confused me for a while i did some research and the project we came up with i mean you could hard code it if you want but what we're doing now is we're going to create our array called win conditions and this array is going to give us all the conditions possible for women i'm just going to copy it across so um these win conditions are all the conditions possible for women so we are going to pull out our whiteboard and we're going to show you exactly what we're doing here so we have our tic tac toe board um and the values could be zero or one as the case maybe we're just gonna put 3 3 this is nothing is selected here [Music] so in area terms this is 0 this is 1 this is two this is zero this is one this is two so when we look out our wind conditions our first one condition is zero zero zero zero one and zero two and that would be 0 0 0 0 and then 0 1 0 1 and then 0 2. so that's our first moon condition which is basically just this and that is basically what this looks like so we have this going straight down so the last one condition we have is zero two so zero two which is this one i think this is going across one one one one this is actually uh so zero two is this guy here 1 1 so this is probably going to cross and 2 0 so 2 0 so this is the last one condition we have is this one so we have an array of win conditions and basically all we're going to do is loop through all the conditions we're gonna see if we find anything and if we do find anything we can proceed so the first thing you're gonna say is there's a better way and i'm gonna say yeah most likely isn't there always all right so this is what we did we have a empty ring there this is all matches and now we're going to check to see how we're going to look through our conditions okay it's probably a better way and stuff out all right so right now we're looking through our conditions and now we're gonna look 3d rows in our [Music] conditions and we are going to get the exact values from them what's going on here so you want to get the x value and you buy a value again this is remember this is kind of like a grid do we need to go back to why it is a grid actually right so x and y values all right so that's what we're doing here so we get the x and y values and now we're going to check we're going to say if response x y is not equal to 3 which means we are not doing that condition and if x lr is equal to i think lr means last response right so it is equal to now we uh we are assuming that we then begin checking anything so we can add a match so if it's equal to now we add our first match we go whiteboard with this as well also if it's equal to the last response we add a match and then we save the last response to the [Music] because of how many times you have to do this you probably should have saved this x y great everyone was the case it does matter so that's not true last response is back to being now and it matches us back to being empty because anytime you don't get a match and we continue all right so that's that's fantastic so now what we need to do is we need to count our matches and we're looking for three because that's um so if we have three matches and then we see if this is double checking let's continue matches should already be good but we're gonna double check if they are equal to each other yeah um yeah so if they equal to each other uh return sure however they're not equal to each other we say this is empty lr is equal to null and we can begin again all in all if you don't get what we want to return for us so what we passing is conditions and response well it should be responses so we're going to check for wins we're going to check for win conditions and we're going to pass in our responses um yeah that should actually do it so uh well nobody went in here all right i probably could put x there we can't play more on one so it's actually zero to play that show me the keys who is the player x there we go and then zero plays here x plus here let's see replace here the winner is zero all right so as you can see we are good to go so just to go through the check winner function again lr means last response matches as any matches uh anything that we find that's equal to the previous response all right so we loop into our conditions already and we've seen we get in the the coordinates so that the x and y and we putting that back into the response to check to see if one if it's not equal to three right because if it's equal to three it's it doesn't have a response great so as long as not equal to three it has a response we're saying one if the last response is equal to the current response or lr is equal to null and that would mean that we haven't no matches are set anyway so this is the two match conditions so we add a match and we put the last response is equal to the current max that we found we do this as many times as we need to in any case if uh if these conditions don't match up we set back the last response and not on resetting matches as to being empty if we end up with three matches we just double check to make sure all those matches are the same and we retain true otherwise we set matches to be empty and lr to be null and we continue again and that is how we have our wind conditions so we have complete um the thing about wind conditions is well yeah so all our win conditions should be calculated as you can see we have an error which is something i didn't want to see i was hoping everything was perfect all right so we have an error because this win condition is not being calculated more silly errors all right so i have this set to be equal to null so that was creating a lot of this use um so i fixed that and so i also added an additional case here so if the matches are false um you set it to null and if the count is not equal to three you also set it to now all right so i made those two changes and we are working again yeah i really don't know what happened there all right so all of our conditions should be working the logic the logic is actually pretty pretty solid and before x wasn't working at all but that's because i had an issue there so what i'm going to do now is i'm going to set a message message variable and this is how we're going to define our messages so all the messages that we have when we have errors we're just going to add it to that um so now we can output all messages right um [Music] and actually when i should actually be xo so i think i have one or zero so i'm just gonna fix that if x is equal to one if x is zero then the winner should be zero as we just assume it will be one right because the winner cannot it could either be zero or one this is zero right um and we can add another message here we have a winner winner there's some space in between that all right so we're just going to upload our message at the top of our form so we're going to say if with message [Music] and we're going to upload a message and if let me put in this message all right so yep we are now complete next thing we're going to do is we're going to try to do some styling um to see if we could get it to look the way we want it to look all right so let's get into that now um let's see if we can start it up a bit so one of the first things we want to do is we're going to study background maybe to gray i honestly not following i can't remember what i did before let's let's study background degree that's that let that be the first thing we do so so we can study background to gray right or last kind of agree so we do installing all right and [Music] let's give it a container let's put everything within a container so we're gonna say div i'm going to call it tct container tic-tac-toe container and we're going to give that some styling tct container you're going to see the the main height should be around 500 px if you want imagine auto i think this what this does is um centers it right so let's test that out one time well that's not happening so we see this only in my block maybe that helps no let me give it a bit a hundred percent well no that's fine um text align center oh we got something to work all right so for our table what can we do for our table we want to make our table really big so let's see if we could work on that it will concentrate after c table um this is the table right yes so uh th td i think i can do that let me just say pattern 20px so let's see how that looks yeah yeah yeah yeah all right so next next thing is we want the text to be really large inside our inside our form so let's give our former class form we're going to say tct form we want the font size to be about 30 px so let's check out and see what happens not exactly what i was looking for oh tct button all right so that's more like it well okay um and we want to fix the selector as well so let's touch this select so we want to select to be font size of 50 that's better alright so um just doing some more styling here you want right right right you want to put some space in between that button you can do that um for the tct form [Music] we can give it a background maybe give it up on my background and give it a border um see if we could center it all right so we know how it's centered um we want some padding on the form as well so maybe give it a pattern of 20px all right and so maybe you want to touch our h3 element we want to give that a font size of maybe 50. yeah that's better alright so and finally we wanna so something we didn't do is we want to start a new game so we'd have a button on top here same start new game the type of this is going to be submit the name is going to be start and all this is going to do this is going to do is it's going to reset our reset our board which means we need a default board again you don't have to do it like this but we're going to create a default board default board so we can reset our board so default board and when we click new game you you do cd redundancy there right but you're just gonna do it like that um i know that doesn't really make a lot of sense anyway so when we press start you should be able to start a new game so let's reload that you want some space in between that start game oh that's not enough space that's better so when you press start new game we can start a new game we can end our turn start new game oh and then i press x and then i press o and then i see i'm gonna play here and i press o we have a winner right so we want to style this as well so we have a winner we're going to put a class on this and we're going to see this is what can we call this we could call it message message class this detector message so this is the message class and we're just going to give it some styling [Music] [Music] so yeah i'm copying across this because i want it exactly as is um [Music] [Music] all right so that's our message styling and [Music] now let's see what it looks like so one of the things is if you try to submit a message twice we should get i can't play my roots this actually looks good i'm not too sure why it's there so let's put it within the form let's see if that helps i don't know why it's showing there actually looks really good how it is so if i play more than once i'll try to any team so this is good um [Music] same display inline shouldn't say that all right so you probably play model once and press that right can't play more than one so this is great um so message shows up and you should be able to see who the winner is it should show up there we have a winner the winner is zero that is wrong um the one is actually x don't tell me i'm gonna have to check this again let's let's try that again not too sure what went on there let's just assume we didn't press start new game so we had some old data somewhere there that's that's that's what we're gonna go with because i don't know how that happened nope that's not your problem so the winner is zero is keep coming up um let's go back into our logic maybe trying to be fancy but it's not smartest idea [Music] if loss is equal to zero so there's my friend's logic again so let's um do the long way which says if rath is equal to one event is equal to x i'll say flash is equal to zero even uh that's equal to zero all right so the winner is and we can just put winner here all right so let's run another game start a new game we start with zero we say x is going to try to be a hero and zero goes there and then x says we play there and then zero says you come here for some reason the next is to go there anyway nice all right great so we i get to go there um and yeah our thing is pretty styled properly we're not going to do anything else um so we are now officially completed with this tutorial thanks for watching check out the other videos you have a lot of small baby mini projects that you can check out all right i'm out [Music] you

Channel: wfTutorials

Views: 527

Rating: 5 out of 5

Keywords: php, tictactoe, php game, game development php, php tic tac toe, php beginner, php tutorials, wftutorials, php programming, learn php

Id: nlfZ6IegS9A

Length: 73min 9sec (4389 seconds)

Published: Mon Jan 04 2021