TicTacToe tutorial:)

[vetji]

Hey!

Today i want to share with you guys how to make a simple TicTacToe game!

First open up xcode and create a new ViewBased-Application and call it whatever u want.

First off all you are going to make 3 images (or just get some from google) those images are going to be: the board for the TicTacToe, a X image and the last image are going to be the O image.

Then you go straight to your viewcontroller.h file and copy and paste this in:

IBOutlet UIImage * oImg;
IBOutlet UIImage * xImg;


IBOutlet UIImageView *s1;
IBOutlet UIImageView *s2;
IBOutlet UIImageView *s3;
IBOutlet UIImageView *s4;
IBOutlet UIImageView *s5;
IBOutlet UIImageView *s6;
IBOutlet UIImageView *s7;
IBOutlet UIImageView *s8;
IBOutlet UIImageView *s9;

UIImage * theImg;


IBOutlet UIButton *resetButton;


IBOutlet UIImageView * board;


IBOutlet UILabel * whoseTurn;


NSInteger playerToken;


BOOL cellWasUsed;


NSInteger numberOfPlays;


UIAlertView *myAlertView;
}
@property (nonatomic,retain) UIImage *oImg;
@property (nonatomic,retain) UIImage *xImg;
@property (nonatomic,retain) UIImage *theImg;

@property (nonatomic,retain) UIButton *resetButton;

@property (nonatomic,retain) UIImageView *board;

@property (nonatomic,retain) UIImageView *s1;
@property (nonatomic,retain) UIImageView *s2;
@property (nonatomic,retain) UIImageView *s3;
@property (nonatomic,retain) UIImageView *s4;
@property (nonatomic,retain) UIImageView *s5;
@property (nonatomic,retain) UIImageView *s6;
@property (nonatomic,retain) UIImageView *s7;
@property (nonatomic,retain) UIImageView *s8;
@property (nonatomic,retain) UIImageView *s9;

@property (nonatomic,retain) UIAlertView *myAlertView;


@property (nonatomic,retain) UILabel * whoseTurn;

-(void)processLogic;


-(void) updatePlayerInfo;


-(BOOL) checkForWin;


-(IBAction)buttonReset;

-(void) resetBoard;



@end

under the @interface.

Then you go to your ViewController.xib and you click the button to the right over where it stands "view" in the right upper corner. This should open a menu on the right of your screen. At the bottom right click the square icon and drag a Image View to the screen. Resize the image to the size you want and choose the board as a image in the attributes inspector at the right. After you done that drag 9 image views to the screen and fill them in each of the empty squares in the board image. Then you drag a label to the screen and rename it to "Who`s turn". And at last drag a button to the screen and call it "Reset game".

After you have done that right click the files owner at the left, and then you start connecting: board (to your board), resetbutton and buttonreset (to the reset button, choose touch up inside for the button reset), whoseturn (to the label) and for the s1 - s9 you are going to start with s1 and drag it to the empty imageview to the top left and then you take the s2 and drag it to the top middle, and so on...


Now youre done with the viewcontroller.h and the viewcontroller.xib then youre just missing the viewcontroller.m!


Okay click your viewcontroller.m and copy and paste this

//since we created somethings in the header we need to synthesize them here.
//just to keep things clean and in order I broke up the synthesizing but you could
//have very well put them all on one line, or put everyone on its own @synthesize
@synthesize s1,s2,s3,s4,s5,s6,s7,s8,s9;
@synthesize oImg,xImg,theImg,whoseTurn,board;
@synthesize resetButton, myAlertView;


- (id)initWithNibNameNSString *)nibNameOrNil bundleNSBundle *)nibBundleOrNil {
if ((self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil])) {
// Custom initalization
}
return self;
}

- (void)viewDidLoad {
oImg = [UIImage imageNamed:@"O.png"];
xImg = [UIImage imageNamed:@"X.png"];

playerToken = 1;

whoseTurn.text = @"X can go";

numberOfPlays = 0;


[super viewDidLoad];
}

-(void)touchesBeganNSSet *)touches withEventUIEvent *)event{

switch(playerToken){
case 1:theImg = xImg;
break;
case 2:
theImg = oImg;
break;
}

UITouch *touch = [[event allTouches]anyObject];
cellWasUsed = NO;

if (CGRectContainsPoint([s1 frame], [touch locationInView:self.view])&(s1.image == NULL)) {
cellWasUsed = YES;
s1.image = theImg;
}
if (CGRectContainsPoint([s2 frame], [touch locationInView:self.view])&(s2.image == NULL)) {
cellWasUsed = YES;
s2.image = theImg;
}
if (CGRectContainsPoint([s3 frame], [touch locationInView:self.view])&(s3.image == NULL)) {
cellWasUsed = YES;
s3.image = theImg;
}
if (CGRectContainsPoint([s4 frame], [touch locationInView:self.view])&(s4.image == NULL)) {
cellWasUsed = YES;
s4.image = theImg;
}
if (CGRectContainsPoint([s5 frame], [touch locationInView:self.view])&(s5.image == NULL)) {
cellWasUsed = YES;
s5.image = theImg;
}
if (CGRectContainsPoint([s6 frame], [touch locationInView:self.view])&(s6.image == NULL)) {
cellWasUsed = YES;
s6.image = theImg;
}
if (CGRectContainsPoint([s7 frame], [touch locationInView:self.view])&(s7.image == NULL)) {
cellWasUsed = YES;
s7.image = theImg;
}
if (CGRectContainsPoint([s8 frame], [touch locationInView:self.view])&(s8.image == NULL)) {
cellWasUsed = YES;
s8.image = theImg;
}
if (CGRectContainsPoint([s9 frame], [touch locationInView:self.view])&(s9.image == NULL)) {
cellWasUsed = YES;
s9.image = theImg;
}
[self processLogic];
if (cellWasUsed) {
[self updatePlayerInfo];
}
}

-(void)processLogic{

if ([self checkForWin]){
if(playerToken ==1){
myAlertView = [[UIAlertView alloc] initWithTitle:@"winner" message:@"X won" delegate:self
cancelButtonTitle:@"ok" otherButtonTitles:nil, nil];
[myAlertView show];
[self resetBoard];
}
else if(playerToken ==2){
myAlertView = [[UIAlertView alloc] initWithTitle:@"winner" message:@"O won" delegate:self cancelButtonTitle:@"ok" otherButtonTitles:nil, nil];
[myAlertView show];
[self resetBoard];
}
if(numberOfPlays ==9){
myAlertView = [[ UIAlertView alloc]initWithTitle:@"No Winner" message:@"Tie" delegate:self cancelButtonTitle:@"ok" otherButtonTitles:nil, nil];
[myAlertView show];

[self resetBoard];
}



}

}

-(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;
}
//right now return 1 becuase we havn't implemented this yet
return NO;
}

-(void)displayWinner{
if([self checkForWin]==YES){
if(playerToken ==1){
whoseTurn.text =@"X is the winner!";

}
else{whoseTurn.text = @"O is the winner!";

}
}

}

-(IBAction)buttonReset{

[self resetBoard];

}

-(void)resetBoard{

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;

playerToken =1;
whoseTurn.text = @"X can go";

numberOfPlays = 0;






}

-(void)updatePlayerInfo{
numberOfPlays++;
if(numberOfPlays ==9){

[self resetBoard];
}
if (playerToken ==1){

playerToken =2;
whoseTurn.text = @"O can go";

} else {
playerToken = 1;
whoseTurn.text = @"X can go";
}
}

- (void)dealloc {
[s1 release];
[s2 release];
[s3 release];
[s4 release];
[s5 release];
[s6 release];
[s7 release];
[s8 release];
[s9 release];
[theImg release];
[resetButton release];
[board release];
[oImg release];
[xImg release];
[whoseTurn release];
[myAlertView release];



[super dealloc];


}


@end

When you have done that your`e done!

Just click run and you have your very own TicTacToe game!!!

Feel free to post addons to the game


PS: Sorry for my english, i am norwegian :P


If you want the source code send me a mail with your email

[vetji]

TikkenTakkenTå.zip

Source code!

[dchildress]

One minor correction. The current touch logic will allow you to select two boxes at one time. You may want to make the method look like this:


-(void)touchesBeganNSSet *)touches withEventUIEvent *)event{
BOOL selected= NO;


switch(playerToken){
case 1:theImg = xImg;
break;
case 2:
theImg = oImg;
break;
}

UITouch *touch = [[event allTouches]anyObject];
cellWasUsed = NO;

if (CGRectContainsPoint([s1 frame], [touch locationInView:self.view])&(s1.image == NULL)& !selected) {
cellWasUsed = YES;
s1.image = theImg;
selected = YES;
}
if (CGRectContainsPoint([s2 frame], [touch locationInView:self.view])&(s2.image == NULL)& !selected) {
cellWasUsed = YES;
s2.image = theImg;
selected = YES;
}
if (CGRectContainsPoint([s3 frame], [touch locationInView:self.view])&(s3.image == NULL)& !selected) {
cellWasUsed = YES;
s3.image = theImg;
selected = YES;
}
if (CGRectContainsPoint([s4 frame], [touch locationInView:self.view])&(s4.image == NULL)& !selected) {
cellWasUsed = YES;
s4.image = theImg;
selected = YES;
}
if (CGRectContainsPoint([s5 frame], [touch locationInView:self.view])&(s5.image == NULL)& !selected) {
cellWasUsed = YES;
s5.image = theImg;
selected = YES;
}
if (CGRectContainsPoint([s6 frame], [touch locationInView:self.view])&(s6.image == NULL)& !selected) {
cellWasUsed = YES;
s6.image = theImg;
selected = YES;
}
if (CGRectContainsPoint([s7 frame], [touch locationInView:self.view])&(s7.image == NULL)& !selected) {
cellWasUsed = YES;
s7.image = theImg;
selected = YES;
}
if (CGRectContainsPoint([s8 frame], [touch locationInView:self.view])&(s8.image == NULL)& !selected) {
cellWasUsed = YES;
s8.image = theImg;
selected = YES;
}
if (CGRectContainsPoint([s9 frame], [touch locationInView:self.view])&(s9.image == NULL)& !selected) {
cellWasUsed = YES;
s9.image = theImg;
selected = YES;
}
[self processLogic];

if (cellWasUsed) {
[self updatePlayerInfo];
}
}



Overall great job and thanks for taking time to help others learn!