In Mobile App Development
Tic Tac Toe Game Swift Xcode Tutorial | Noughts & Crosses - read the full article about app development tutorial, Mobile App Development and Native and cross-platform solutions from Code With Cal on Qualified.One
Youtube Blogger
hello and welcome to this swift and xcode tutorial my name is cal and in todays tutorial were going to be building a tic tac toe game or noughts and crosses this is far and away an original idea when it comes to a idea for a beginner programming project but i think what makes it such a great beginner programming project is that we all know how it should look we all know what the end result should be but there are just so many different ways that you can go about solving this problem so this is just one solution of how to create a tic-tac-toe game using swift and xcode hopefully we learned something and lets get started starting off were just going to create a new swift and xcode project product name is tic-tac-toe or noughts and crosses i think if youre from the uk interface storyboard programming language is swift heading into the main storyboard were going to create our 3x3 grid so im just going to drag in a vertical stack view im going to set the background color to black set the distribution to fill equally and then im going to right click and just say aspect ratio and then were also going to set it horizontally and vertically in the safe area as well as giving it equal widths now were going to change our proportional width to 0.9 and were going to set our aspect ratio to one to one so its a square so its the same width and height and then inside our vertical stack view were going to add in a horizontal stack view were going to set distribution to fill equally on our horizontal stack view as well as well as giving it some spacing and we actually need to give our vertical stack view the same spacing so were going to give it five and five so thats how thick our black lines are going to be and then were going to drag in a button just making sure that it lands inside our horizontal stack view so you can see the nesting on this left pane here cool so next we want to set our buttons background to white so im just going to scroll down and set the background to white were going to make our text color black as well as making the font size 60 and the font style to be heavy and then were going to give our button a placeholder so just a cross and then im just going to click on our button and copy and paste that two more times and then before we copy and paste down our horizontal stack view im just going to remove the titles and then were going to copy and paste down our stack view two more times and there you have it you have a nice 3x3 grid and obviously the vertical stack view has the black color but then with the white buttons over the top created a scaling grid that doesnt require like a background image or anything like that so this should work on any screen size so the final thing were going to add to our layout is a turn label so im just going to drag in a label and give it top space and center horizontally in the safe area im going to make the font size a little bigger as well as changing the text to term and then im going to copy and paste that label and then just set it just below our turn label im going to make the text a lot bigger so im going to make it heavy and 60 so to match our buttons and then im just going to give it a cross cool and now were just going to create some outlets so im just going to open up the assistant editor right click and drag from the cross above you did load im going to give the outlet a name of turn label and then were going to right click and drag from each one of our buttons giving the first one a1 and the second one a2 and then our next row is going to be b1 b2 and the final row would be c1 c2 and c3 and then were going to right click and drag below our view did load and create an action and our sender is of type ui button and then were just going to drag from our board tap action were just going to drag that onto all the buttons so no matter which button is pressed were going to run this function you can double check that all of the connections have been made correctly by hovering over this dot and seeing that they all light up on the storyboard cool so thats it for our layout we can close off this system editor now and head into our view controller swift file first thing im going to do is declare an enum were just going to call it turn with a case of nought and cross theres absolutely no reason why you couldnt use a boolean or an into or really anything to determine whose turn it is but i found that using this enum here is the easiest way to do it and sort of the most reader-friendly solution cool so next what were going to do is just declare a couple of variables the first one were going to call first turn which were going to initialize to turn cross and this is just going to keep track of whose turn it is to go first in each game and then were going to create another variable also with turn cross and thats the current turn thats going to flip-flop each time a tile is placed and the first turn is going to flip-flopping every time a game ends cool so just below that were going to declare a couple of constant strings so just calling the first one nought and the next one cross so this is just literally the character that were going to place so weve got a o and a capital x and now below our board tap action were going to create a function calling it add to board which receives sender so the specific button in our grid thats been tapped and were going to say if our sender.title for state normal is equal to nil so meaning theres nothing in our buttons title inside that statement were going to say if our current turn is equal to turn nought were going to set the title to our nought for our state normal were going to set current turn equal to turn cross and our turn label text to cross and then we basically just need to do the opposite so were going to say else if our turn is our crosss turn were going to set the title to cross and set current turn and our turn label both to nought and now we just need to call from our board tap action add to board giving it the sender button cool so if we build and run this now we can see that you can add a nought or a cross and the turn label is updating correctly you cant override a nought with a cross or a cross with a nought cool so next were going to deal with a draw so we just want once the board is full we want to be able to reset the game before we do that though at the bottom of our add to board were just going to set sender enabled as equal to false thats just to remove the animation when you click a button that already has a nought or a cross placed and then im going to create a variable calling it board which is an array of buttons its going to create a function calling it init board and in here were just going to say board append a1 and were just going to do that for every single one of our buttons so a1 a2 a3 so on and so forth cool so just below our board tap action were going to create a new function which were going to call full board and it is going to return a boolean and all this function is going to do is check to see if theres an empty space on our board so were just going to say for button in board if the button title for state normal is equal to nil meaning that you found an empty space return false otherwise were going to return true and then from our board tab action were going to say if the board is full so if full board is equal to true were going to create another function were going to call it result alert which is going to take a title string and then inside here were going to say let ac equal to ui alert controller just giving it a title of title message is nil and our preferred style is action sheet were going to say ac add action giving it a new ui alert action the title here were going to give it reset and the style is default and then were just going to hit enter and create a handler were going to create a function calling it reset board which were going to call from our handler so were just going to say self reset board and then below that were just going to present our alert controller by calling self.present giving it our alert controller and animated is true cool so our reset board function should be fairly simple we just want to set all of the buttons on our tic tac toe board back to nil so just looping through each of our buttons so full button in board button.set title giving the title nil for our state normal and then we just want to set enable back to true so button is enabled is equal to true so regardless of the result of the game we want the first turn variable to flip-flop if the first turn is equal to our noughts turn first turn is equal to turn cross and our turn label.text is equal to cross and then were just going to copy and paste down that function changing it to an else if statement and doing exactly the opposite so if the turn is the turn cross first turn is equal to turn nought and our turn label.txt is a nought and then were just going to say current turn is equal to first turn cool and now we need to just start this chain off so if board is full we just want to return our result alert giving it a title of draw cool so lets check in to see if thats all working so im just going to keep placing noughts and crosses until theres no more spaces and we see that alert there and we hit the reset button and the board sets back to empty and then well do it again and just keeping an eye out for the turn label and it seems to be all working correctly the final thing we need to do now is create a function calling it check for victory were going to call this function before our full board function just to check to see if someones won tic-tac-toe meaning that theyve got three in a row so im just going to create a function calling it check for victory which receives a string and returns a boolean and return false for now create another function below that which is called this symbol which is going to take a ui button as well as a string calling it symbol also going to return a boolean in this function is just going to return if the button title for state normal is equal to the symbol so if we pass in across does the button title have a cross and if so return true so now before we return false we just want to check for all the different victory conditions so were just going to start horizontally so were going to say if this symbol a1 and this symbol a2 and this symbol a3 meaning that theres either a nought or a cross on the top row if this is the case were going to return true and then we just want to do that for each of the horizontal victories so were going to do b1 b2 and b3 as well as c1 c2 and c3 and then we just want to copy and paste all three of these checks and were going to check for a vertical victory so a1 b1 and c1 a2 b2 and c2 as well as a3 b3 and c3 and then we just need to check for one more victory type which is the diagonal victories so theres actually only two of these so weve got a1 b2 and c3 as well as a3 b2 and c1 and now before our board tap action we can say if check for victory giving it across so were going to check to see if the cross has had a victory and if so were going to return our result alert with the crosses win title and then below that were going to check to see if the nought had won and just changing the title and well quickly implement a little scorecard thing so im just going to create another variable calling it nought score equal to zero and then below that crosses score is also equal to zero and then were just going to say crosses score plus equal to one we actually need to do that before our results alert and then for our nought victory were going to say nought score plus equal to one and then in our result alert were going to create a little message here just giving an update on the score so just saying noughts plus the string of our nought score and crosses plus the string of our crosses score and then we just need to feed that message into our alert controllers message and lets build run this one last time and just check to see if we can get a victory and there you have it thats a very simple tic tac toe game in swift and xcode or noughts and crosses game a simple tic tac toe game really is a fantastic beginner programming project because theres so many different ways you can solve the same problem i really had a lot of fun building this one and ill catch you guys in the next tutorial
Code With Cal: Tic Tac Toe Game Swift Xcode Tutorial | Noughts & Crosses - Mobile App Development