Game Tutorials -->> TicTacToe

[Dirk Schreckmann]

This is part of the package of Game Tutorials threads, for which a complete listing of threads can be found in The Table Of Contents.
Let's create a tic tac toe game.
This game development can start very simply. We don't need to consider threads, animation, graphics, or events. Our first version of this game, could serve as a base for adding graphics, event handling, and artificial intelligence.
So, after we've settled on a design process, we'll get started.
[ May 10, 2002: Message edited by: Dirk Schreckmann ]

[Dirk Schreckmann]

Following this SDLC approach, the The Preliminary Investigation Phase requires we consider the project and any constraints and decide whether to proceed.
The Project - Let's make a Tic Tac Toe game.
Constraints -

Technical - The technologies to complete this project are readily available to us (computer, internet, JDK, etc.).

Time - This won't take very long and we don't really have any official deadlines to meet.

Budgetary - No real costs involved, excepting those already paid by visiting this page, and having the tools to program.

That went quickly. Everything looks good. Let's proceed.

[David Weitzman]

Technical Item one:
How will the user obtain/start the game -- applet and/or application (or something else entirely)?

[Dirk Schreckmann]

Following David's lead, let's begin to develop our Requirements Statement and step into the second phase, The Analysis Phase - aka The Data Gathering Phase.
What do we want to make?
A tic tac toe game. We are programming in Java and we could develop an applet or an application. As this development process will be web based, my preference is to jump right into applet development so our final product could be used by just about anybody from anywhere through a web browser. If you aren't sure how to create a basic applet, follow the Creating An Applet thread.
Some more questions we should consider:
What is a tic tac toe game? What do we want our tic tac toe game to do?
[ May 08, 2002: Message edited by: Dirk Schreckmann ]

[Jennifer Bhamoo]

I like this tutorial idea!
My questions:
How do the X's and O's get on the board, are we doing a drag and drop of an X or O, or just a click on the board and an X or O will appear depending on who's turn?
I would think to start off with since we are keeping this basic would be a simple click in the square.
-Jennifer

[Jennifer Bhamoo]

I guess in better response to your Dirk's question:

What is a tic tac toe game? What do we want our tic tac toe game to do?

1. Two players total, one assigned to X, the other assigned to O.
2. Each player takes turns, one at a time (play nicely!!) placing an X or O on the 3x3 grid.
3. Which ever player gets either 3 X's or 3 O's in a row (horizontal, diagonal or vertical) wins!
How's that? Anything else?
-Jennifer

[Rob Ross]

That's a good point. We should define the user interaction with the game. Is this a single person playing against a computer AI? OR two users playing against each other via a network? Or do we allow both? Or do we let the computer play itself as well?

[Dirk Schreckmann]

Originally posted by Jennifer Bhamoo:
I like this tutorial idea!

Great!

How do the X's and O's get on the board, are we doing a drag and drop of an X or O, or just a click on the board and an X or O will appear depending on who's turn?

Of course, since I've urged us towards applet development, we'll need to incorporate some event handling.

I would think to start off with since we are keeping this basic would be a simple click in the square.

I like your idea. While exploring drag and drop would make for a good exercise, this game doesn't seem to call for it.

[Dirk Schreckmann]

Let's begin to create our Requirements Statement for this project.
Title
Tic Tac Toe Game
General Description
What is a Tic Tac Toe Game?

1. Two players total, one assigned to X, the other assigned to O.

2. Each player takes turns, one at a time (play nicely!!) placing an X or O on the 3x3 grid.

3. Which ever player gets either 3 X's or 3 O's in a row (horizontal, diagonal or vertical) wins!

Who are the players?
Output
Input
How does the user interact with the program?

I would think to start off with since we are keeping this basic would be a simple click in the square.

Processes - Business Rules
What is the flow of the game?

Which ever player gets either 3 X's or 3 O's in a row (horizontal, diagonal or vertical) wins!

[Sayed Ibrahim Hashimi]

I have a TicTacToe game that I created about a year and a half ago. It's not the best design because it was when I was first started programming, but maybe it could give you some ideas. If anybody wants it send me an email [email protected]
[ May 09, 2002: Message edited by: Ibrahim Hashimi ]

[Paul Stevens]

Ibrahim
The whole point behind this is to show how to go about creating "something". The game was just a choice. Getting already created code would defeat what is trying to be accomplished. The end product is not the goal of this.
Thanks for the offer though.

[Dave Vick]

As far as the players go, in order to keep it relatively simple, and not have to wory about network connections and passing data back and forth, I'm thinking it would be the player against the computer.
As for the computer, unless we want to get into AI, it should just randomly place an X or O on the board. We could go so far as to have the computer check to see if it can win and then do so.
Questions:
Who goes first? always the player? randomely selected each game?
Does the player get to pick his/her shape? or is randomly selected?
Can we/should keep track of wins and losses? If so where do we store them? Since it's an applet storing on the server is probably easier but then we need some sort of storage medium (a DB, XML, flat file...).
that's all I can think of for now

[Sayed Ibrahim Hashimi]

Paul
I realize what you are trying to do. I wasn't saying to just use my code, notice how I said: "maybe it could give you some ideas", and how my program was not very great because it was done when I didn't have much experience. Clearly most of you have much more experience than I do.

[Dirk Schreckmann]

Ibrahim,
We're not very far off from starting to code. As we work through it, your input concerning your past experiences will be appreciated. I look forward to what you'll have to say.

[Dirk Schreckmann]

We've got a little bit of server space to use in our tutorials (thanks Paul and Carl). The first draft of our Requirements Statement is available as is the second draft.
I've also drawn up a sketch of how our user interface could be created.
While I'm putting together our final Requirements Statement so that we can get to coding, does anybody have any more suggestions and/or comments concerning our project requirements? Remember, the first version of our program will be very simple and could serve as a basis to add more exciting features (such as stored information, multi-player network gaming, artificial intelligence, etc.).

[Dirk Schreckmann]

The final version of our Requirements Statement is complete. Let's step into the next phase...

[Dirk Schreckmann]

Remembering that we are beginner programmers, our initial strategies are sure to be... less than professional. Even though we are beginners, we will assume that we do have basic concepts of what object oriented programming is all about (but if we don't, take a look at Bradley Kjell's on-line Java tutorial - chapters 25 through 35 discuss object oriented programming).
So, where do we begin?

[David Weitzman]

It is always nice to be able to see results. Maybe the first thing to do is create an applet that draws the board.

[Dirk Schreckmann]

Here is an annotated account of me stumbling through a first round of developing the tic tac toe game...
I'd like to create a tic tac toe game to satisfy the requirements outlined in our requirements statement.
Where to start? I'll take David's suggestion and create an applet to display the playing board.

import java.applet.Applet ;
 
public class TicTacToe extends Applet 
{
    public void paint( Graphics g ) 
    {
        // display board
    }
}

It looks like we need to define a board. What is a playing board? It's a 3 by 3 grid of cells that can be X's or O's or empty.
Is the cell itself an object then? It could be.
Perhaps it makes sense to define a cell before defining the grid of cells. Sure.

class Cell 
{
    // hmmm...
}

What can a cell do? What state can it have? A cell can have one of the three states defined above and it can display itself according to its state.

import java.awt.Graphics ;
 
class Cell 
{
    /* possible states for a Cell object */
    static final int EMPTY = 0 ;
    static final int X = 1 ;
    static final int O = 2 ;
    
    private int state = EMPTY ;
    
    /* we should probably be able to get and set the state */
    
    public int getState() 
    {
        return state ;
    }
    
    public void setState( int state ) 
    {
        this.state = state ;
    }
    
    public void display( Graphics g ) 
    {
        switch ( state ) 
        {
            case EMPTY : /* do nothing */ ; break ;
            case X     : /* hmmm... */ ; break ;
            case O     :  ; break ;
        }
    }
}

How big is the cell's display? As big as the board says it can be.
How and when does the board tell the cell how big it is? Through the display method, each time it is displayed.

public void display( Graphcis g , java.awt.Dimension d ) 
{
    ...
    case X : /* but where to display */
}

Where should the cell display itself? Where the board tells it, each time it is displayed.
OK. What does an X or O look like? We could start with text, but just make some quick images.
Here they are: x.gif and o.gif
Those are pretty lame. Yep. Moving on...
OK, Einstein. Now how do we define the images in the cell? Remember it has no context from which to do useful things like getCodeBase(). - Hmmm... For now, do so in the constructor.
OK. And what about the ImageObserver argument in the Graphics::displayImage method? Just pass it in as an argument to the display method.
Here's what we have so far:

import java.awt.Graphics ;
import java.awt.Rectangle ;
import java.awt.Image ;
import java.awt.image.ImageObserver ;
 
class Cell 
{
    /* possible states for a Cell object */
    static final int EMPTY = 0 ;
    static final int X = 1 ;
    static final int O = 2 ;
    
    private final Image xImage ;
    private final Image oImage ;
    
    private int state = EMPTY ;
    
    public Cell( Image xImage , Image oImage ) 
    {
        this.xImage = xImage ;
        this.oImage = oImage ;
    }
    
    public int getState() 
    {
        return state ;
    }
    
    public void setState( int state ) 
    {
        this.state = state ;
    }
    
    public void display( Graphics g , Rectangle r , ImageObserver observer ) 
    {
        switch ( state ) 
        {
            case EMPTY : /* do nothing */ ;
                         break ;
            case X     : g.drawImage( xImage , r.x , r.y , r.width , r.height , observer );
                         break ;
            case O     : g.drawImage( oImage , r.x , r.y , r.width , r.height , observer );
                         break ;
        }
    }
}

( If you'd like to see a pretty version of this code, take a look at Class-Cell-01.html )
Break time.
[ June 18, 2002: Message edited by: Dirk Schreckmann ]

[Dirk Schreckmann]

What don't you like about my above example? What do you like about it? What would you do?

[Michael Matola]

Any reason xImage and oImage are instance variables? Having Cell's constructor take them as parameters seems to imply that each cell can take a different set of xImages and oImages. Don't you want all the cells on the playing field to use the same set of xImages and oImages?

[Michael Matola]

Also, you set up a bunch of state stuff for cells, but in the display method you fall back on a switch statement instead of taking advantage of polymorphism.
I realize you're probably trying to keep things very simple at this point, but using polymorphism at this point doesn't seem too out of control. What follows is a version using typesafe CellStates. (And static xImages and oImages and relying on a default constuctor for Cell.)
(All the nested and anonymous classes can be made top-level and named if that bothers folks.)

import java.awt.Graphics ;
import java.awt.Rectangle ;
import java.awt.Image ;
import java.awt.image.ImageObserver ;
class Cell
{
 
    private static abstract interface CellState
    {
        void display( Graphics g , Rectangle r , ImageObserver observer ) ;
    }
 
    /* possible states for a Cell object */
    public static final CellState EMPTY = new CellState()
    {
        public void display( Graphics g , Rectangle r , ImageObserver observer )
        {
            /* do nothing */
        }
    } ;
 
    public static final CellState X = new CellState()
    {
        public void display( Graphics g , Rectangle r , ImageObserver observer )
        {
            g.drawImage( xImage , r.x , r.y , r.width , r.height , observer );
        }
    } ;
 
    public static final CellState O = new CellState()
    {
        public void display( Graphics g , Rectangle r , ImageObserver observer )
        {
                g.drawImage( oImage , r.x , r.y , r.width , r.height , observer );
        }
    } ;
 
    /* Default state is empty. */
    private CellState state = Cell.EMPTY ;
 
    private static final Image xImage = null ;
    private static final Image oImage = null ;
 
    public CellState getState()
    {
        return state ;
    }
 
    public void setState( CellState state )
    {
        this.state = state ;
    }
 
    public void display( Graphics g , Rectangle r , ImageObserver observer )
    {
        state.display( g , r , observer ) ;
    }
 
}

( See this code in pretty format: Class-Cell-MichaelMatola-01.html )
[ May 14, 2002: Message edited by: Michael Matola ]
[ June 19, 2002: Message edited by: Dirk Schreckmann ]

[David Weitzman]

Michael this is the beginner forum -- do we know what polymorphism is?
As for getting images without getCodebase() and the issue that multiple cells could use different X and O images, wouldn't a static call of Class.getResource("/X.gif") do the job?

[Ilja Preuss]

Originally posted by Dirk Schreckmann:
The final version of our Requirements Statement is complete.

Sorry for joining late - I somehow missed following this thread, probably because I somehow expected the requirements discussion to happen in its own thread... :roll:
IMO one requirement is missing: "Should be playable from the Web." (Notice that this requirement doesn't mention the use of applets as I think this is an implementation issue - we could also use Servlets or Webstart to meet this requirement.)

[Ilja Preuss]

Originally posted by David Weitzman:
Michael this is the beginner forum -- do we know what polymorphism is?

Not from chapters 25 to 35 of the tutorial - it's discussed in chapters 50 to 53...

[Michael Matola]

Originally posted by David Weitzman:
Michael this is the beginner forum -- do we know what polymorphism is?
Just thought it might be fun to see some OO techniques used from the get-go.
As for getting images without getCodebase() and the issue that multiple cells could use different X and O images, wouldn't a static call of Class.getResource("/X.gif") do the job?
Me -- I find the Class class far more intimidating than polymorphism.
[ May 14, 2002: Message edited by: Michael Matola ]

[Ilja Preuss]

Originally posted by Dirk Schreckmann:
Where to start? I'll take David's suggestion and create an applet to display the playing board.

Some thoughts:
- I also like to see results as fast as possible, so I like the idea of starting with displaying the playing board.
- I also like to decompose a project in tiny little tasks, the completion of each one showing progress of the project. This not only motivates but also gives us a sense of our development speed and a rough estimate of project duration (and many opportunities for celebrations ).
- I don't think we initially need an applet to display the playing board - we probably can get an even earlier result by using a JComponent embedded in a JFrame. In a further step we can *then* embed the board into an applet.
My proposed Task list would be:
* display empty playing board (notice that we don't need X's or O's for this!)
* embed playing board into applet (doing this makes it possible for all of us to play with the current implementation - and early exposure to testing is very valuable... )
* let user place X's by clicking on an empty field
* everytime after the user placed an X, let the computer place an O on a random empty field
* stop game when board is full
* stop game at winning condition
* restart game after winning condition or draw
* count wins

[Ilja Preuss]

Originally posted by Dirk Schreckmann:
What don't you like about my above example? What do you like about it? What would you do?

Mhh, what does the graphical representation of a cell need to do? It does need to show an (optional) image and notice mouse clicks. There is already a class doing right this: JButton. Can we somehow use this instead of writing our own Cell-class?

[Ilja Preuss]

Originally posted by Michael Matola:
Originally posted by David Weitzman:
[qb]As for getting images without getCodebase() and the issue that multiple cells could use different X and O images, wouldn't a static call of Class.getResource("/X.gif") do the job?
Me -- I find the Class class far more intimidating than polymorphism.
[/QB]

What about ClassLoader.getSystemResource(...)?

[Michael Matola]

What about ClassLoader.getSystemResource(...)?
Even more so.
[ May 14, 2002: Message edited by: Michael Matola ]

[Ilja Preuss]

Originally posted by Michael Matola:
What about ClassLoader.getSystemResource(...)?
Even more so.

And why?

[Dirk Schreckmann]

I've been busy this past week preparing for the SCJP exam which I'll take later next week. After such time, I will step up my contribution to this tutorial series.
In the mean time, for any interested parties, About.com is hosting a Java TicTacToe game making contest. Git on over, n' check 'er out!

[David Weitzman]

Is this dead?

[Dirk Schreckmann]

I said next week!
Oh, it is next week.
No patience.
Give me a couple of more days. I have many plans for this series.
No, it is not dead.
[ May 26, 2002: Message edited by: Dirk Schreckmann ]

[Brian Coates]

Is this still going?

[Dirk Schreckmann]

Yes, yes. I've been moving and etc. etc.
Do not hesitate to voice your thoughts on anything relevant.

[Dirk Schreckmann]

Originally posted by Ilja Preuss:
Sorry for joining late - I somehow missed following this thread, probably because I somehow expected the requirements discussion to happen in its own thread... :roll:

Larger projects will probably command multiple threads. For this first one I thought we could see how it turns out all in a single thread.

IMO one requirement is missing: "Should be playable from the Web." (Notice that this requirement doesn't mention the use of applets as I think this is an implementation issue - we could also use Servlets or Webstart to meet this requirement.)

Good point. The fourth version of our Requirements Statement includes this addition.

[Dirk Schreckmann]

Originally posted by David Weitzman:
Michael this is the beginner forum -- do we know what polymorphism is?

A good point to consider. Initially I thought to avoid too many advanced topics at first. While polymorphism is an advanced topic, it's not that hard to grasp the concept of it - especially if it's introduced in a nice and friendly and simple way as Bradley Kjell does in his Java tutorial (Introduction to Computer Science using Java) beginning with chapter 50 (as Ilja previously pointed out), and don't miss the Campfire story How My Dog Learned Polymorphism. So, let's use polymorphism if it makes sense and can be implemented very simply in this first project.

As for getting images without getCodebase() and the issue that multiple cells could use different X and O images, wouldn't a static call of Class.getResource("/X.gif") do the job?

That would probably work.
[ June 16, 2002: Message edited by: Dirk Schreckmann ]

[Dirk Schreckmann]

Ilja has provided us with a very nice task list to use:

display empty playing board (notice that we don't need X's or O's for this!)

embed playing board into applet (doing this makes it possible for all of us to play with the current implementation - and early exposure to testing is very valuable... )

let user place X's by clicking on an empty field

everytime after the user placed an X, let the computer place an O on a random empty field

stop game when board is full

stop game at winning condition

restart game after winning condition or draw

count wins

Thank you Ilja.

[Dirk Schreckmann]

I'd like to walk a non-Swing path at first. I know we can do lots of neat stuff with Swing, but all that neat stuff comes with a bit more complication than I really think is necessary for this introductory project.
Concerning the use of the Class and/or Classloader classes, I'm going to jump on Michael's bandwagon of fear and add nervous shaking and twitches.
I'm also hesitant to jump into inner classes at first. I'm thinking, let's get something working, then make it smarter and/or better.