Kotlin - ⭕️ ❌ How to make a simple Tic Tac Toe Android Game

hey guys i've created a tic-tac-toe game otherwise known as norton crosses and i want to go uh line by line through the code and show you guys how i made it so so i've got the emulator open up over here and i've got a very simple text view that says tic-tac-toe and i've got a button that says start your game which pretty much does exactly as you think it starts a new game i've got a grid over here which has got nine boxes and i can pretty much go straight ahead and play the actual game and win and i can click on start new game which creates a new game for me and i can make o win as well uh in a vertical grid um kind of column and then i can win horizontally and then same for this way over here just like this and the player points increment as well as the game progresses if i click back it takes me to the first screen and clicking on start new game takes me back over to the game where everything's pretty much reset so how on earth is this built is the question right so uh i've got over here a main activity so an activity is basically what you see on the actual screen whenever you use any android app anything that you're looking at on the screen will be an activity without a doubt and that my activity has to has to extend app compat activity or activity or fragment activity there's quite a few but it has to extend one of the activities that you get available appcomp activity is a is a good one to use for kind of backwards compatibility so then what happens is um i basically have to use the oncreate function which is a lifecycle function where the android sort of ecosystem operating system it will essentially it will essentially fire forwards the uncreate function and it's inside here when i specify which layout it is that i want to essentially use to draw to inflate onto the screen so let's go over here and what i've got is a very simple text view and a button that is inside a constraint layout and with a constraint layout i can specify the constraints on each view so this one you can see that the top of this text view is constrained to the top of the parent and we actually drag it down to give it a margin of 180 so if i move it slightly up you can see that it changes to 152 you can see it says 152 just about there let's ctrl z and then the same the exact same thing for the button we constrain the button to the bottom of the tic tac toe or text view you can see here a constraint top to the bottom of this text view which is over here and then we can um basically constrain the left and the right of this button you to either side of the parent so end to the end of parent start to the start of parent pretty simple let's uh go back over to main activity um and then what i do is i say the variable that i've got over here the field this is equal to the find view find view by id function that we call and we pass in the actual id of the button so what this function does is it goes to the actual layout it finds the not that one this one it it finds the view so a button a text view a scroll view a recycler view all of these different views that you have they all are views essentially so this is saying go to the screen and find me the i the view with the id of this so if i keep hold of command or control if you're using windows and if i click on it it takes me to the actual button as you can see over here okay okay uh and then what i say is i say uh game dot second click set on click listener um and then inside this uh code over here i construct an instance of intent i pass in the context which is the activity and then i specify the actual activity that i want to go to i then call start activity let's go to game activity and see what an earth is going on so i have got over here nine different text views and each one of these views represents a specific box on the grid one to nine one being this two three four five six seven eight nine that was fun counting um so uh then what i do is i have got also a reference to the game manager i will get to that in just a second a start new game button which is the let's quickly win which is that button there and the player points that we see at the top for both x and o and just like main activity i've got uh the oncreate function over here where i specify the actual layout that i want to inflate onto the screen so let's go over here where i've got this awesome looking grid um now how did i make it uh exactly centered and all packed up together like this well it's quite simple if i just click on the design tab over here so it gets rid of the xml and if i just drag and drop three buttons and you can pretty much follow me as i'm as i'm doing this if i then keep hold of shift and i select all of these buttons so that they are all selected you'll know that they're all selected because they'll have a blue background over here and if i right click on one of them and then i say chains create vertical chain okay and then i say the top of this button is constrained to the top of the parent and the bottom of this last button is constrained to the bottom of the parent and then what i say is i say this all these three buttons right click them i say create a vertical chain and then click on pact and and then that brings them all together and then what i can do is i can just uh constrain this to the oops let's do that properly and then the same with this one to that one now you've got three buttons that are perfectly packed up together and then you can kind of like position them as as you want you can do this three uh two more times so that you've got a total of nine buttons okay let's just delete those um and the way i made the actual grid is i created essentially a view an empty view um so um so just this over here this view over here and then what i do is i basically make it constrained so that it's the top of it is to the top of this button the bottom of it is to the bottom of this button or text view rather because these are actually text views these and then the right hand side of it is to the right hand side of this and the left hand side of it is to the left hand side of of this one so it basically puts it directly in between these two and it puts the top of it over here and the bottom of it over there and it stretches it out i then give it a color which is black so then all of them have got now um they're all basically in between all of the buttons i have uploaded this code on github so you can just basically copy it from there um okay so let's go back over to the game activity um so that's basically the layout um i construct the game manager so now i've got an instance of game manager that doesn't take anything as a parameter in the constructor it's pretty much a very simple object and what we do here is we basically give a reference to all of the different boxes right we have one two all the way to nine uh one is this one here two is this one three is that one all the way to nine so one two three four five six seven eight nine then i have the same thing for the start new game button and the actual player points um so this is where it all starts when i click on any one of the text views any one of these boxes so like here and here and here it basically uh sends a call to the on box clicked function and i pass in the actual view that i've clicked on and a a position data class where i specify the actual row and the column so you can see here that if i click on one it sends the position zero zero if i click on two it sends the position zero one and if i just bring this to the left hand side of that code you can see that one is here and 2 is there you can see that 1 is 0 0 and 2 is 0 1 right the last one 9 is 2 comma 2. so the row is 2 and the column is 2. so if we say the row is 2 so 0 1 2 and then the column is 2 0 1 2 and that's that basically represents each box so i passed these two variables over to the on box clicked function it's here when i first check is the text empty for that specific box if it isn't then i don't want to play on that box because it's already been played on if it is empty then i make the text equal to the game manager dot couldn't play a mark the column player mark is a field which will return a string based on the current player so if the current player is one then it will return an x if it's two then it will return an o if i come back over here um then what i do is i say game manager dot make move and i pass in the actual position and it's over here where i've i've got an actual virtual representation of the board right so you can see here that i've got an array of arrays so it's a 2d array and if i just bring up the emulator you can see that it pretty much represents the actual bod where the first row is this and that's the second row and then that's the third row the column here are these three and these three and these three okay so what i say is whenever i make a move get the position object and go to the state array the two-dimensional array and then pull out the raw and then pull out the column and then make that equal to the current player so if i click on this center button here it has actually changed this because what it does is um because this is row one and it's actually column one as well because zero one zero one it will actually pull out this array and it will go to this value and then it will change it to the current player once i've made a change to the virtual board i want to check if the game has ended has anybody won by making this specific move so let's go to uh husky mended and then wow a behemoth if else statement looks like death but what we want to do is we want to keep it super simple for now and then we want to see how we can improve not only the code but how can we improve the actual ui ux of the application possibly add animations as well so i'll be creating more videos to make this a much better application both code wise and the user interface and i've actually drafted a simple function over here that will essentially loop through all of the rows and the columns and the diagonals and it's irrespective of how big how big the grid is but for now we'll focus on this really weird looking function that's got a thousand and one if our statements so what does this do uh well essentially it checks that yeah it checks that does each row or does any row contain the exact same values right so it goes through uh each row first right row one row two and row three and then it checks column one column two column three and then the diagonal from the left and the diagonal from the right and it checks does uh do these values are they all the same so you can see that is zero zero equal to the current player is zero one current equal to the clone player is zero two equal to the current player if that is the case what we want to do is send back a enum class which looks like this which represents the first row or the second or the third and so on and so forth so if i come back over here we say if the first row is if someone's one then we want to return a winning line which is um row zero and then if um if the second row has one then we return row one so on and so forth and then the same with the diagonals if there's no winner then we just return no so if we go back to where this is we then get the winning line and then we say is the winning line null if it is we say current player equals three minus current player and i will explain exactly why that's the case um if you are player one at the moment and then you've made your move so it should be the player's two's turn you can simply just say three minus the current player so if it's player one that it's now players two ten if the current player is two then three minus two equals one so this is how it pretty much alternates between player 1 and 2 by basically executing this very simple statement okay then what happens is is that um i returned it i returned winning nine and oh yeah uh just before just before i continue uh this else statement it says if the winning line is not null then the current player we do a rent statement on the current player and if it's player one then increase the player one's points because player one won if it's player two then we want to increment the player twos points and we increment it by just one and plus plus does exactly that then we then we return the winning line so let's go back over to the game uh activity uh at this point we have got the winning line we check is it null uh if it's not null then update the points and over here we say player one point dot text equals player x points and then we actually go to the game manager player one points and then we also go to the game manager player two points for the actual player two uh it's complaining here that i should extract it but this is one of the things that we need we are going to be looking to improve as well in terms of code base so then i do disable boxes okay uh and this basically means that if the so if a player has one we don't want them to play anymore as you can see i'm clicking here the game's ended so we shouldn't be allowing any anybody to play anymore all you can do is start a new game um and that's pretty much what the next line does inside the unbox click function we say that the the game button it's now visible for you to click and then we say at the very end show the winner and it's here where we pass in the winning line and then we say okay um create a uh when expression and passing the winning line and then we say if it's a row zero then we create a pair where the pair are the winning boxes okay the winning boxes and also the drawable that we want to uh set as a background so let's go inside what horizontal line is it's it's a horizontal line of course um it's pretty much a uh a a shape which is of type line and then we give it a color we give it a width of 4dp and yeah pretty much very simple there i can then go back over here and i'm just gonna explain this this a little bit more so we basic we basically create two variables one is called winning boxes and the other one is called background you can pretty much do this in kotlin it's quite um it's quite helpful so what we expect is that the when statement is going to return to us a pair a pair where the first value is winning boxes and the second value is a background and as you can see all of these expressions have got a return where we return a pair a pair of the winning boxes so if it's row zero then we wanna return the boxes one two one three if it's row uh row one which is row two in english it's uh four five and six so on and so forth if it's a diagonal left then it's one five and nine and so on and so forth um but do con do focus on this though as well and that's if it's one of the rows then we return a horizontal line if it's one of the columns then we return a vertical line so let's quickly look at what a vertical line is it's basically the same as the horizontal horizontal line but we flip it by 90 degrees and that gives us the vertical line otherwise it's pretty much the same let's go back and for the diagonal we create a excuse me we create a um a diagonal line where we rotate 45 degrees and then for the right hand side one we rotate it 135 degrees so it gives us it from the right to the left like this and then what we do is we say for each of the winning boxes make the background equal to the actual background that we have chosen okay and the background over here is the variable over here and that will equal to whichever winning line it is okay so it goes through all of the boxes and it gives it the it applies the background and that's essentially how we get the how we get this line we say okay um row one um uh one two and three those are the boxes row zero sorry rather row row zero boxes one um one two and three those are our reading boxes and the background is going to be the horizontal one and that's pretty much uh how show winner works um when i click on start new game though so let's see how start new game works when i click on start new game i say stun your game uh make it invisible now make it gone because we start we have started a new game i then say gamemanager.reset and the reason why is because we've actually changed the um values of the actual uh you know grid so if you want to reset them to how they were at the very beginning with with the default values of zero okay and then then what we say is um the column player is back to one okay it's back to one which resets it and then we say reset boxes so the reason why we do this is because the boxes will have either x or or as as texas as text we will also have on some of them the background so we make them all null and also we um we disabled them so we basically re-enable them so that we can continue with the game so that's pretty much uh it for this specific tutorial on how to create a tic-tac-toe game um please do add a comment if you like this video please subscribe send me a message uh if you need any help i will uh upload as i mentioned a link to the github project of this code that is one thing that's missing in this game and that's uh how we should be able to actually reset the game so if i draw like this there's no reset option and what i want to do is in a separate video i want to add that function in and start to make the game look better but then also be able to improve the color because as you've seen it's not the best we can make we can make a lot of improvements so again thank you for watching uh subscribe if you think i am a worthwhile watch and give a thumbs up and i'll catch you in the next video

Channel: Usmaan Developer

Views: 12,252

Keywords:

Id: 7w9aETOzWHI

Length: 24min 43sec (1483 seconds)

Published: Thu Nov 05 2020