Introduction to Java using NetBeans

Section 9 : Tic Tac Toe


An array with two dimensions can be used to represent data that corresponds to a grid.

A tic-tac-toe board can be represented by a two-dimensional array with three rows and three columns

  • Download the background graphic Background (or get your own). Make sure it is in your TicTac Folder




Create a Game Board


Step 1 – Create a New Application

  • Create a New Project. Choose the Java Class Library. Call the project TicTac.
  • Double-click Source Packages. From the Menu Bar, select File, New File. Now choose Java, then Java Main Class. Type TicTac for the ClassName.

Step 2 – Set Up the Playing Board


Declare Global Variables for the GUI in public class

Discussion of the Code

  • JPanel creates the outline box.
  • JButton[ ] [ ] creates nine buttons in a 2D array that is 3 x 3.
  • Creaet a Play Again Btn
  • Create 2 Text Fields to store the number of wins




Create the Playing Board


Create the following public (not static) method that will create the card.

Set up the card layout

Add the Card Elements to the GUI

Main Class

Runs the TicTac Method


Discussion of the Code

  • public TicTac ( ) – creates the method to draw the game board.
  • super (“Tic Tac Toe”) – creates the outer frame with the title.
  • setSize (500,600) – sets the size of the outer frame.
  • setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE) – sets the program to quit running when the window is closed.
  • FlowLayout – arranges components from left to right, centering components horizontally with a five pixel gap between them.
  • GridLayout – arranges the components in a rectangular grid, where all cells are of equal size.
  • For loops – creates and adds the buttons to the GridLayout's first three rows.
  • board..add – adds remaining components to the GridLayout.
  • setVisible(true) – shows the FlowLayout on the screen.
  • TicTac frame = new TicTac() – runs the screen layout class.




Download the X and O graphics to your Tic Tac folder

  • X graphic X (or make your own)
  • O graphic O (or make your own)


Create the Event File

Step 1 - Create the Event Class

  • From the Menu bar, select New, New File. Now select Java, Empty Java File.
  • Call the file TicTacEvent.

Step 2 - Create the Event


Public Class


Discussion of the Code

  • Import statements – use the classes that will be required for the program.
  • public class TicTacEvent – creates a class that responds to mouse and keyboard input by “listening.”
  • TicTac gui – associates the game board with the event.
  • New variables – created to check for a winner.
  • public TicTacEvent (TicTac in) – associates the two files to be used together.
  • For loop – initiates the winner check array.

Step 3 – Add the Action Event

This will check which button has been clicked and use the names wie previously assigned to call a method that will mark the card


Continue with the remaining Case


Step 4 – Create Method to Mark the Card



Discussion of the Code

  • clicks = clicks + 1 – keeps track of the number of boxes chosen, and is used to determin the turn and a tie
  • If structure – puts an X on the board and declares that square to be taken.
  • Else structure – puts an O on the board and declares that square to be taken.

Create a Reset method

Associate the File

  • Move to Public class TicTacEvent and press Alt Enter. Choose “Implement all abstract methods.”


Now go back to Tic Tac Form

Step 5 – Link and Create a Listen Function for the Buttons

  • Add the following line under public class TicTac extends JFrame {


  • Go to the file and add the following code after add(board);

Discussion of the Code

  • addActionListener – makes the program ready to handle mouse clicks.
  • TicTacEvent – joins the two programs to work with each other.

Step 7 – Run the Program

  • Run the program and notice that it doesn't stop when there is a winner. We will be looking at that part in the next section.



Checking for a Winner


To win the game of tic-tac-toe, a player must successfully place three of his symbols in a straight line. We will now look at how to determine if a player has done this and won the game.

Table showing the rows and columns of a matrix used for two- dimensional tic tac toe array.

Check for a Winner by Row

  • Create a new method called winner

    Call the Winner method in markCard method

Your Turn

Check for a Winner by Rowl

Check for a Winner Diagonally

Check for a Tie (Hint: Use clicks)

Make sure you can't click a b

Use the 2 additional labels to keep track of how many wins X has and how many wins O has.