aspose file tools*
The moose likes Beginning Java and the fly likes Game Tutorials -->> TicTacToe Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Java » Beginning Java
Bookmark "Game Tutorials -->> TicTacToe" Watch "Game Tutorials -->> TicTacToe" New topic
Author

Game Tutorials -->> TicTacToe

Dirk Schreckmann
Sheriff

Joined: Dec 10, 2001
Posts: 7023
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 ]

[How To Ask Good Questions] [JavaRanch FAQ Wiki] [JavaRanch Radio]
Dirk Schreckmann
Sheriff

Joined: Dec 10, 2001
Posts: 7023
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
    Ranch Hand

    Joined: Jul 27, 2001
    Posts: 1365
    Technical Item one:
    How will the user obtain/start the game -- applet and/or application (or something else entirely)?
    Dirk Schreckmann
    Sheriff

    Joined: Dec 10, 2001
    Posts: 7023
    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
    Ranch Hand

    Joined: Mar 09, 2002
    Posts: 47
    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
    Ranch Hand

    Joined: Mar 09, 2002
    Posts: 47
    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
    Bartender

    Joined: Jan 07, 2002
    Posts: 2205
    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?


    Rob
    SCJP 1.4
    Dirk Schreckmann
    Sheriff

    Joined: Dec 10, 2001
    Posts: 7023
    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
    Sheriff

    Joined: Dec 10, 2001
    Posts: 7023
    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
    Ranch Hand

    Joined: May 17, 2001
    Posts: 148
    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 sih@ufl.edu
    [ May 09, 2002: Message edited by: Ibrahim Hashimi ]

    SCJP 1.4<br /><a href="http://www.cise.ufl.edu/~sih" target="_blank" rel="nofollow">www.cise.ufl.edu/~sih</a>
    Paul Stevens
    Ranch Hand

    Joined: May 17, 2001
    Posts: 2823
    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
    Ranch Hand

    Joined: May 10, 2001
    Posts: 3244
    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


    Dave
    Sayed Ibrahim Hashimi
    Ranch Hand

    Joined: May 17, 2001
    Posts: 148
    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
    Sheriff

    Joined: Dec 10, 2001
    Posts: 7023
    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
    Sheriff

    Joined: Dec 10, 2001
    Posts: 7023
    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
    Sheriff

    Joined: Dec 10, 2001
    Posts: 7023
    The final version of our Requirements Statement is complete. Let's step into the next phase...
    Dirk Schreckmann
    Sheriff

    Joined: Dec 10, 2001
    Posts: 7023
    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
    Ranch Hand

    Joined: Jul 27, 2001
    Posts: 1365
    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
    Sheriff

    Joined: Dec 10, 2001
    Posts: 7023
    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.

    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.

    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.

    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.

    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:

    ( 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
    Sheriff

    Joined: Dec 10, 2001
    Posts: 7023
    What don't you like about my above example? What do you like about it? What would you do?
    Michael Matola
    whippersnapper
    Ranch Hand

    Joined: Mar 25, 2001
    Posts: 1757
        
        3
    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
    whippersnapper
    Ranch Hand

    Joined: Mar 25, 2001
    Posts: 1757
        
        3
    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.)

    ( 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
    Ranch Hand

    Joined: Jul 27, 2001
    Posts: 1365
    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
    author
    Sheriff

    Joined: Jul 11, 2001
    Posts: 14112
    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.)


    The soul is dyed the color of its thoughts. Think only on those things that are in line with your principles and can bear the light of day. The content of your character is your choice. Day by day, what you do is who you become. Your integrity is your destiny - it is the light that guides your way. - Heraclitus
    Ilja Preuss
    author
    Sheriff

    Joined: Jul 11, 2001
    Posts: 14112
    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
    whippersnapper
    Ranch Hand

    Joined: Mar 25, 2001
    Posts: 1757
        
        3
    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
    author
    Sheriff

    Joined: Jul 11, 2001
    Posts: 14112
    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
    author
    Sheriff

    Joined: Jul 11, 2001
    Posts: 14112
    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
    author
    Sheriff

    Joined: Jul 11, 2001
    Posts: 14112
    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
    whippersnapper
    Ranch Hand

    Joined: Mar 25, 2001
    Posts: 1757
        
        3
    What about ClassLoader.getSystemResource(...)?
    Even more so.
    [ May 14, 2002: Message edited by: Michael Matola ]
    Ilja Preuss
    author
    Sheriff

    Joined: Jul 11, 2001
    Posts: 14112
    Originally posted by Michael Matola:
    What about ClassLoader.getSystemResource(...)?
    Even more so.

    And why?
    Dirk Schreckmann
    Sheriff

    Joined: Dec 10, 2001
    Posts: 7023
    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
    Ranch Hand

    Joined: Jul 27, 2001
    Posts: 1365
    Is this dead?
    Dirk Schreckmann
    Sheriff

    Joined: Dec 10, 2001
    Posts: 7023
    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
    Ranch Hand

    Joined: Jul 03, 2001
    Posts: 42
    Is this still going?
    Dirk Schreckmann
    Sheriff

    Joined: Dec 10, 2001
    Posts: 7023
    Yes, yes. I've been moving and etc. etc.
    Do not hesitate to voice your thoughts on anything relevant.
    Dirk Schreckmann
    Sheriff

    Joined: Dec 10, 2001
    Posts: 7023
    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
    Sheriff

    Joined: Dec 10, 2001
    Posts: 7023
    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
    Sheriff

    Joined: Dec 10, 2001
    Posts: 7023
    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
    Sheriff

    Joined: Dec 10, 2001
    Posts: 7023
    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.
     
    I agree. Here's the link: http://aspose.com/file-tools
     
    subject: Game Tutorials -->> TicTacToe