Creating your Own Tic-Tac-Toe game for Apple iOS
Published On - November 14, 2013
Tic-Tac-Toe has always been one of the most sought after games when we were back in schools. This game has always challenged our wits. A simple game of Tic-Tac-Toe had been always the perfect companion for us during tedious history classes. Developing a Tic-Tac-Toe in iOS mobile has never been easy. Even a seasoned professional iPhone App Developer takes at least a month to complete the job. The following lines of the blog would elucidate the developing process of A Tic-Tac-Toe App for the beginners in your iPhone.
Getting started with the Tic-Tac-Toe application
In this tutorial, we would try to explain the making of Tic-Tac-Toe application in the easiest way possible.
So let start the building process:
Step 1: Creating the XCode Single View Application
The whole development starts with the creating a Single View Application project. You can rename the project with something like ‘Tic-Tac-Toe’ or you can give it any other title you prefer. After naming your project take the help of the inbuilt storyboard support and enable the Automatic Reference counting. You would be able to produce an iPhone, iPad or the Universal project type.
As an iPhone Application Developer, you will always have to keep in mind that the game would only work by placing an ‘X’ or ‘O’ just by tapping the square of the button. And that too is based on whose turn it is. The program would check for a winner after the user places the mark on the board. Only after the user places his mark on one of the check boxes of the column, the player has to be decided. In case the winner is yet to be decided, the turn would go onto the next person. You just have to copy the supplied images into the project. Don’t forget to create a button for the user, which will help in resetting the game.
Step 2: Methods of Creating the User Interface
The following part of this tutorial would be segregated to variable sections for the benefit of the iPhone developer.
After you are done with drawing schematic for your application on your own, now it is time for the process to commence. Open viewcontroller.xib or the Mainstoryboard.storyboard just by double-clicking on it. The following lines of the tutorial would be elaborating the way to create the user interface through the following lines.
- You have to Drag a UIimage View to the window you have created in your single view applications and re-size the image within the measurement of 320X327 and make a set of the window on the board.gif with the help of the attribute inspector.
- Next, you have to drag another UIImage View to the window. This time you have to resize it to 90X90. After you are done with the resizing, check the box with the user interaction enabled. Go through the following screenshots to have an idea of the whole concept.
- Copy the resized window of 90X 90 and paste it to large window 8 more times. Move those boxes over the spaces of the game board lining them up. To have an idea of the finished game board go through the next image.
- Now the next step is quite easy. You just have to drag the UI label to the window and position it under the board.
- You just have to drag the UiButton to the window and you have Rename the text to reset the game. The completed interface would be looking like this:
Step 3. Wiring the Graphical User interface
Follow the steps to wire the GUI components to the Viewcontroller.hextension.
Firstly, 2 IBoutlet has to be used with UIImages as well as an NSInteger to keep the track of the players. Use the following codes to do the implementations:
IBOutletUIImage * oImg;
IBOutletUIImage* xImg;
NSIntegerplayerToken
The finished code would be looking like this:
#import<UIKit/UIKit.h>
@interfaceViewController : UIViewController{
// the X or O images
IBOutletUIImage * oImg;
IBOutletUIImage * xImg;
NSIntegerplayerToken;
}
@end
These items will be set in a sequence in the ViewController.m. The implementation would be done in a way that they are not going to get wired to any of the components of the graphical interface.
The next step for you as an iPhone App Developer, is to wire-board to board and then label to whose turn. It is best to wire the reset button properly. The code would look like the following lines:
@property (weak, nonatomic) IBOutletUIImageView
*board;
@property (weak, nonatomic) IBOutletUILabel
*whoseTurn;
@property (weak, nonatomic) IBOutletUIButton
*resetButton;
Next step is the most crucial part of the whole program. You have to wire all the 8 Buttons to UIImage view, IBO outlets labeled S1-S8. The followings lines would explain the whole code to the user:
@property (weak, nonatomic) IBOutletUIImageView
*s1;
@property (weak, nonatomic) IBOutletUIImageView
*s2;
@property (weak, nonatomic) IBOutlet UIImageView
*s3;
@property (weak, nonatomic) IBOutletUIImageView
*s4;
@property (weak, nonatomic) IBOutletUIImageView
*s5;
@property (weak, nonatomic) IBOutletUIImageView
*s6;
@property (weak, nonatomic) IBOutlet UIImageView
*s7;
@property(weak, nonatomic) IBOutlet UIImageView
*s8;
@property(weak, nonatomic) IBOutletUIImageView
*s9;
Next add the IBAction to trigger when the event of touch down occurs. You have to call the event button reset. After the process is completed you would be coming with the finish source codes. The whole code would be looking like this:
– (IBAction)buttonReset:(UIButton *)sender;
Now it is time to create the game logic with the help of the three methods of prototypes. The whole language would be looking like this.
-(void) updatePlayerInfo;
-(void) resetBoard;
-(BOOL) checkForWin;
4. You have to open the Tic-TAC-Toe view controller.m to come up with the following codes. You have to initialize the method for the viewdidload for the following. The whole instruction has been given in the following line.
-(void)viewDidLoad{
[superviewDidLoad];
board.frame = CGRectMake(10, 20, 320, 327);
s1.frame = CGRectMake(8, 22, 90, 90);
[self.viewaddSubview:s1];
s2.frame = CGRectMake(116, 22, 90, 90);
[self.viewaddSubview:s2];
s3.frame = CGRectMake(223, 22, 90, 90);
[self.viewaddSubview:s3];
s4.frame = CGRectMake(8, 139, 90, 90);
[self.viewaddSubview:s4];
s5.frame = CGRectMake(116, 139, 90, 90);
[self.viewaddSubview:s5];
s6.frame = CGRectMake(223, 139, 90, 90);
[self.viewaddSubview:s6];
s7.frame = CGRectMake(8, 253, 90, 90);
[self.viewaddSubview:s7];
s8.frame = CGRectMake(116, 253, 90, 90);
[self.viewaddSubview:s8];
s9.frame = CGRectMake(223, 253, 90, 90);
[self.viewaddSubview:s9];
[self.viewaddSubview:board];
whoseTurn.frame = CGRectMake(10, 353, 100, 30);
[self.viewaddSubview:whoseTurn];
resetButton.frame = CGRectMake(106, 380, 111, 34);
[self.viewaddSubview:resetButton];
// add the images
oImg = [UIImageimageNamed:@”0.jpg“];
xImg = [UIImageimageNamed:@”x.jpg“];
// set the player to 1
playerToken = 1;
// update the label
whoseTurn.text =@”X goes first”;
You also have to update the player info through the following lines.
– (void) updatePlayerInfo{
if(playerToken == 1) {
playerToken = 2;
whoseTurn.text = @”It is O turn”;
NSLog(@”playerToken = %d”, playerToken);
}
else if(playerToken == 2) {
playerToken = 1;
whoseTurn.text =@”It is X turn”;
NSLog(@”playerToken = %d”, playerToken);
}
}
After this step has been completed you have to add the action for the reset button:
– (IBAction)buttonReset:(UIButton *)sender {
[selfresetBoard];
}
The implementation of the reset method has to be added as the next step.
-(void) resetBoard{
/// clear the images stored in the UIIMageView
s1.image = NULL;
s2.image = NULL;
s3.image = NULL;
s4.image = NULL;
s5.image = NULL;
s6.image = NULL;
s7.image = NULL;
s8.image = NULL;
s9.image = NULL;
// reset the player and update the label text
playerToken= 1;
whoseTurn.text = @”X goes first”;
}
The next thing which comes for implementation, is the game logic. It is implemented for the sake of touching the spaces on the board.
// the touch event for the Tic-Tac-Toe game
– (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [[event allTouches] anyObject];
// check to see which UIImage view was touched
if(CGRectContainsPoint([s1frame], [touch
locationInView:self.view])){
if(playerToken==1){ s1.image = xImg; }
if(playerToken==2){ s1.image = oImg; }
}
if(CGRectContainsPoint([s2 frame], [touch
locationInView:self.view])){
if(playerToken==1){ s2.image = xImg; }
if(playerToken==2){ s2.image = oImg; }
}
if(CGRectContainsPoint([s3 frame], [touch
locationInView:self.view])){
if(playerToken==1){ s3.image = xImg; }
if(playerToken==2){ s3.image = oImg; }
}
if(CGRectContainsPoint([s4 frame], [touch
locationInView:self.view])){
if(playerToken==1){ s4.image = xImg; }
if(playerToken==2){ s4.image = oImg; }
}
if(CGRectContainsPoint([s5 frame], [touch
locationInView:self.view])){
if(playerToken==1){ s5.image = xImg; }
if(playerToken==2){ s5.image = oImg; }
}
if(CGRectContainsPoint([s6 frame], [touch
locationInView:self.view])){
if(playerToken==1){ s6.image = xImg; }
if(playerToken==2){ s6.image = oImg; }
}
if(CGRectContainsPoint([s7 frame], [touch
locationInView:self.view])){
if(playerToken==1){ s7.image = xImg; }
if(playerToken==2){ s7.image = oImg; }
}
if(CGRectContainsPoint([s8 frame], [touch
locationInView:self.view])){
if(playerToken==1){ s8.image = xImg; }
if(playerToken==2){ s8.image = oImg; }
}
if(CGRectContainsPoint([s9 frame], [touch
locationInView:self.view])){
if(playerToken==1){ s9.image = xImg; }
if(playerToken==2){ s9.image = oImg; }
}
[self updatePlayerInfo];
}
The game is almost ready. You can run the game at the moment but there would be no winner yet. Now you have to add the following method of implementation to check the way to be won
// method that will check to see if someone has won
returns TRUE if someone wins
-(BOOL) checkForWin {
// HORIZONTAL WINS
if((s1.image == s2.image) & (s2.image ==
s3.image) & (s1.image != NULL))
{
return YES;
}
if((s4.image == s5.image) & (s5.image ==
s6.image) & (s4.image != NULL))
{
return YES;
}
if((s7.image == s8.image) & (s8.image ==
s9.image) & (s7.image != NULL))
{
return YES;
}
// VERTICAL WINS
if((s1.image == s4.image) & (s4.image ==
s7.image) & (s1.image != NULL))
{
return YES;
}
if((s2.image == s5.image) & (s5.image ==
s8.image) & (s2.image != NULL))
{
return YES;
}
if((s3.image == s6.image) & (s6.image ==
s9.image) & (s3.image != NULL))
{
return YES;
}
// DIAGONAL WINS
if((s1.image == s5.image) & (s5.image ==
s9.image) & (s1.image != NULL))
{
return YES;
}
if((s3.image == s5.image) & (s5.image ==
s7.image) & (s3.image != NULL))
{
return YES;
}
return NO;
}
Now we have come to more or less the final stage of coding. Now you can check the winning status in Updateplayerinfo method. You can put something like the following to check the winning method.
if ([selfcheckForWin])
{
UIAlertView *someonewon = [[UIAlertView
alloc]initWithTitle:@”There’s a winner!”message:@”Someone Won. You have to figure out who and how you want to report it. I can’t do everything for you.”delegate:selfcancelButtonTitle:@”ok”otherButtonTitles: nil];
[someonewonshow];
[selfresetBoard];
}
Finally, you should make some decision about how you want to report this particular win. Voila! You have yourself a perfect Tic-Tac-Toe game ready for you.
So here something about the final look:
