Title: Tic-Tac-Toe: Contemplation to Compilation
Many games you play on the internet have been crafted from Java. This tutorial, inspired by another post in this forum, will show you step by step how to create a two person Tic-Tac-Toe game in Java.
Prerequisites
This is a fairly intermediate tutorial, therefore if you are going to understand everything I write, you should read all my previous tutorials, in particular, those dealing with graphical user interfaces.
Solution
The first step you must take before starting any programming project is to understand your problem. Understanding your problem will allow you to create a logically correct program bug free, so before we delve into the code let me tell you what I was thinking when I presented myself with this problem.
The first question I asked myself is: “What is tic-tac-toe?”
It’s a game consisting of a 3 by 3 grid. Each player (represented by X and O) takes alternating turns trying to earn three of their letters in a row horizontally, vertically, or diagonally.
At this point I knew I needed to make a grid layout 3 by 3. My idea was to create 9 buttons in each of the grid boxes. But buttons would respond when clicked with either a X or an O depending on who’s turn it was.
Code:
package mytictactoe;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class TicTacToeV1 implements ActionListener {
/*Instance Variables*/
private JFrame window = new JFrame("Tic-Tac-Toe");
private JButton button1 = new JButton("x");
private JButton button2 = new JButton("x");
private JButton button3 = new JButton("x");
private JButton button4 = new JButton("x");
private JButton button5 = new JButton("x");
private JButton button6 = new JButton("x");
private JButton button7 = new JButton("x");
private JButton button8 = new JButton("x");
private JButton button9 = new JButton("x");
public TicTacToeV1(){
/*Create Window*/
window.setSize(300,300);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setLayout(new GridLayout(3,3));
/*Add Buttons To The Window*/
window.add(button1);
window.add(button2);
window.add(button3);
window.add(button4);
window.add(button5);
window.add(button6);
window.add(button7);
window.add(button8);
window.add(button9);
/*Add The Action Listener To The Buttons*/
button1.addActionListener(this);
button2.addActionListener(this);
button3.addActionListener(this);
button4.addActionListener(this);
button5.addActionListener(this);
button6.addActionListener(this);
button7.addActionListener(this);
button8.addActionListener(this);
button9.addActionListener(this);
/*Make The Window Visible*/
window.setVisible(true);
}
public void actionPerformed(ActionEvent a) {
System.out.println("A button was pressed.");
}
public static void main(String[] args){
new TicTacToeV1();
}
}
What you see is a window with nine buttons labeled X. Each time the button is pressed it invokes the actionPerformed method and prints to the consol “A buttons was pressed.” My next step was to, when the program was started, have the buttons blank, and when pressed, label them X. To do that I set the label to null when the object was first created in the instance variables. Then in the actionPerformed method, I had the button label change to X if it was pressed by doing this
Code:
package mytictactoe;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class TicTacToeV1 implements ActionListener {
/*Instance Variables*/
private JFrame window = new JFrame("Tic-Tac-Toe");
private JButton button1 = new JButton("");
private JButton button2 = new JButton("");
private JButton button3 = new JButton("");
private JButton button4 = new JButton("");
private JButton button5 = new JButton("");
private JButton button6 = new JButton("");
private JButton button7 = new JButton("");
private JButton button8 = new JButton("");
private JButton button9 = new JButton("");
public TicTacToeV1(){
/*Create Window*/
window.setSize(300,300);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setLayout(new GridLayout(3,3));
/*Add Buttons To The Window*/
window.add(button1);
window.add(button2);
window.add(button3);
window.add(button4);
window.add(button5);
window.add(button6);
window.add(button7);
window.add(button8);
window.add(button9);
/*Add The Action Listener To The Buttons*/
button1.addActionListener(this);
button2.addActionListener(this);
button3.addActionListener(this);
button4.addActionListener(this);
button5.addActionListener(this);
button6.addActionListener(this);
button7.addActionListener(this);
button8.addActionListener(this);
button9.addActionListener(this);
/*Make The Window Visible*/
window.setVisible(true);
}
public void actionPerformed(ActionEvent a) {
/*Display X's or O's on the buttons*/
if(a.getSource() == button1){
button1.setText("X");
} else if(a.getSource() == button2){
button2.setText("X");
} else if(a.getSource() == button3){
button3.setText("X");
} else if(a.getSource() == button4){
button4.setText("X");
} else if(a.getSource() == button5){
button5.setText("X");
} else if(a.getSource() == button6){
button6.setText("X");
} else if(a.getSource() == button7){
button7.setText("X");
} else if(a.getSource() == button8){
button8.setText("X");
} else if(a.getSource() == button9){
button9.setText("X");
}
}
public static void main(String[] args){
new TicTacToeV1();
}
}
The next problem I had to surmount was to determine whose turn it was. I did this by creating a hidden variable that increments each time a button is pressed.
Code:
package mytictactoe;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class TicTacToeV1 implements ActionListener {
/*Instance Variables*/
private JFrame window = new JFrame("Tic-Tac-Toe");
private JButton button1 = new JButton("");
private JButton button2 = new JButton("");
private JButton button3 = new JButton("");
private JButton button4 = new JButton("");
private JButton button5 = new JButton("");
private JButton button6 = new JButton("");
private JButton button7 = new JButton("");
private JButton button8 = new JButton("");
private JButton button9 = new JButton("");
private String letter = "";
private int count = 0;
public TicTacToeV1(){
/*Create Window*/
window.setSize(300,300);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setLayout(new GridLayout(3,3));
/*Add Buttons To The Window*/
window.add(button1);
window.add(button2);
window.add(button3);
window.add(button4);
window.add(button5);
window.add(button6);
window.add(button7);
window.add(button8);
window.add(button9);
/*Add The Action Listener To The Buttons*/
button1.addActionListener(this);
button2.addActionListener(this);
button3.addActionListener(this);
button4.addActionListener(this);
button5.addActionListener(this);
button6.addActionListener(this);
button7.addActionListener(this);
button8.addActionListener(this);
button9.addActionListener(this);
/*Make The Window Visible*/
window.setVisible(true);
}
public void actionPerformed(ActionEvent a) {
count++;
/*Calculate Who's Turn It Is*/
if(count == 1 || count == 3 || count == 5 || count == 7 || count == 9){
letter = "X";
} else if(count == 2 || count == 4 || count == 6 || count == 8 || count == 10){
letter = "O";
}
/*Display X's or O's on the buttons*/
if(a.getSource() == button1){
button1.setText(letter);
} else if(a.getSource() == button2){
button2.setText(letter);
} else if(a.getSource() == button3){
button3.setText(letter);
} else if(a.getSource() == button4){
button4.setText(letter);
} else if(a.getSource() == button5){
button5.setText(letter);
} else if(a.getSource() == button6){
button6.setText(letter);
} else if(a.getSource() == button7){
button7.setText(letter);
} else if(a.getSource() == button8){
button8.setText(letter);
} else if(a.getSource() == button9){
button9.setText(letter);
}
}
public static void main(String[] args){
new TicTacToeV1();
}
}
The count integer increments by one each time a button is clicked. I also created a letter string that would vary depending on count’s value. If count is 1,3,5,7 or 9 letter is defined as X if count is 2,4,6,8 or 10 count is defined as O. I found out that even if a button is pressed, the button is still active causing the button to change to both O and X. Setting the setEnable() method to false fixed this.
Code:
package mytictactoe;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class TicTacToeV1 implements ActionListener {
/*Instance Variables*/
private JFrame window = new JFrame("Tic-Tac-Toe");
private JButton button1 = new JButton("");
private JButton button2 = new JButton("");
private JButton button3 = new JButton("");
private JButton button4 = new JButton("");
private JButton button5 = new JButton("");
private JButton button6 = new JButton("");
private JButton button7 = new JButton("");
private JButton button8 = new JButton("");
private JButton button9 = new JButton("");
private String letter = "";
private int count = 0;
public TicTacToeV1(){
/*Create Window*/
window.setSize(300,300);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setLayout(new GridLayout(3,3));
/*Add Buttons To The Window*/
window.add(button1);
window.add(button2);
window.add(button3);
window.add(button4);
window.add(button5);
window.add(button6);
window.add(button7);
window.add(button8);
window.add(button9);
/*Add The Action Listener To The Buttons*/
button1.addActionListener(this);
button2.addActionListener(this);
button3.addActionListener(this);
button4.addActionListener(this);
button5.addActionListener(this);
button6.addActionListener(this);
button7.addActionListener(this);
button8.addActionListener(this);
button9.addActionListener(this);
/*Make The Window Visible*/
window.setVisible(true);
}
public void actionPerformed(ActionEvent a) {
count++;
/*Calculate Who's Turn It Is*/
if(count == 1 || count == 3 || count == 5 || count == 7 || count == 9){
letter = "X";
} else if(count == 2 || count == 4 || count == 6 || count == 8 || count == 10){
letter = "O";
}
/*Display X's or O's on the buttons*/
if(a.getSource() == button1){
button1.setText(letter);
button1.setEnabled(false);
} else if(a.getSource() == button2){
button2.setText(letter);
button2.setEnabled(false);
} else if(a.getSource() == button3){
button3.setText(letter);
button3.setEnabled(false);
} else if(a.getSource() == button4){
button4.setText(letter);
button4.setEnabled(false);
} else if(a.getSource() == button5){
button5.setText(letter);
button5.setEnabled(false);
} else if(a.getSource() == button6){
button6.setText(letter);
button6.setEnabled(false);
} else if(a.getSource() == button7){
button7.setText(letter);
button7.setEnabled(false);
} else if(a.getSource() == button8){
button8.setText(letter);
button8.setEnabled(false);
} else if(a.getSource() == button9){
button9.setText(letter);
button9.setEnabled(false);
}
}
public static void main(String[] args){
new TicTacToeV1();
}
}
Now we need to determine the winner. I created some logical statements to determine each possible case of winning. Ecentially if button1, button2, and button3 were all the same value, that person won, but you also have to account for the fact that when the program starts each button is null causing the winner to be null. However null is not a player and in your logical statements you must account for this. I created a Boolean win instance variable set to false by default and then added these logical statements to my actionPerformed method.
Code:
if( button1.getText() == button2.getText() && button2.getText() == button3.getText() && button1.getText() != ""){
win = true;
}
else if(button4.getText() == button5.getText() && button5.getText() == button6.getText() && button4.getText() != ""){
win = true;
}
else if(button7.getText() == button8.getText() && button8.getText() == button9.getText() && button7.getText() != ""){
win = true;
}
//virticle wins
else if(button1.getText() == button4.getText() && button4.getText() == button7.getText() && button1.getText() != ""){
win = true;
}
else if(button2.getText() == button5.getText() && button5.getText() == button8.getText() && button2.getText() != ""){
win = true;
}
else if(button3.getText() == button6.getText() && button6.getText() == button9.getText() && button3.getText() != ""){
win = true;
}
//diagonal wins
else if(button1.getText() == button5.getText() && button5.getText() == button9.getText() && button1.getText() != ""){
win = true;
}
else if(button3.getText() == button5.getText() && button5.getText() == button7.getText() && button3.getText() != ""){
win = true;
}
else {
win = false;
}
Which accounts for every possible win. Now that we have determined the winner, lets add a popup box announcing the winner. All we have to do is create a if statement and if there is a winner announce it, if there is no winner after nine clicks announce there is a tie. To create a popup box we are going to use showMessageDialog provided to us in the JOptionPane package.
Code:
if(win == true){
JOptionPane.showMessageDialog(null, letter + " WINS!");
} else if(count == 9 && win == false){
JOptionPane.showMessageDialog(null, "Tie Game!");
}
My final code looks like this:
Code:
package mytictactoe;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class TicTacToeV1 implements ActionListener {
/*Instance Variables*/
private JFrame window = new JFrame("Tic-Tac-Toe");
private JButton button1 = new JButton("");
private JButton button2 = new JButton("");
private JButton button3 = new JButton("");
private JButton button4 = new JButton("");
private JButton button5 = new JButton("");
private JButton button6 = new JButton("");
private JButton button7 = new JButton("");
private JButton button8 = new JButton("");
private JButton button9 = new JButton("");
private String letter = "";
private int count = 0;
private boolean win = false;
public TicTacToeV1(){
/*Create Window*/
window.setSize(300,300);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setLayout(new GridLayout(3,3));
/*Add Buttons To The Window*/
window.add(button1);
window.add(button2);
window.add(button3);
window.add(button4);
window.add(button5);
window.add(button6);
window.add(button7);
window.add(button8);
window.add(button9);
/*Add The Action Listener To The Buttons*/
button1.addActionListener(this);
button2.addActionListener(this);
button3.addActionListener(this);
button4.addActionListener(this);
button5.addActionListener(this);
button6.addActionListener(this);
button7.addActionListener(this);
button8.addActionListener(this);
button9.addActionListener(this);
/*Make The Window Visible*/
window.setVisible(true);
}
public void actionPerformed(ActionEvent a) {
count++;
/*Calculate Who's Turn It Is*/
if(count == 1 || count == 3 || count == 5 || count == 7 || count == 9){
letter = "X";
} else if(count == 2 || count == 4 || count == 6 || count == 8 || count == 10){
letter = "O";
}
/*Display X's or O's on the buttons*/
if(a.getSource() == button1){
button1.setText(letter);
button1.setEnabled(false);
} else if(a.getSource() == button2){
button2.setText(letter);
button2.setEnabled(false);
} else if(a.getSource() == button3){
button3.setText(letter);
button3.setEnabled(false);
} else if(a.getSource() == button4){
button4.setText(letter);
button4.setEnabled(false);
} else if(a.getSource() == button5){
button5.setText(letter);
button5.setEnabled(false);
} else if(a.getSource() == button6){
button6.setText(letter);
button6.setEnabled(false);
} else if(a.getSource() == button7){
button7.setText(letter);
button7.setEnabled(false);
} else if(a.getSource() == button8){
button8.setText(letter);
button8.setEnabled(false);
} else if(a.getSource() == button9){
button9.setText(letter);
button9.setEnabled(false);
}
/*Determine who won*/
//horizontal wins
if( button1.getText() == button2.getText() && button2.getText() == button3.getText() && button1.getText() != ""){
win = true;
}
else if(button4.getText() == button5.getText() && button5.getText() == button6.getText() && button4.getText() != ""){
win = true;
}
else if(button7.getText() == button8.getText() && button8.getText() == button9.getText() && button7.getText() != ""){
win = true;
}
//virticle wins
else if(button1.getText() == button4.getText() && button4.getText() == button7.getText() && button1.getText() != ""){
win = true;
}
else if(button2.getText() == button5.getText() && button5.getText() == button8.getText() && button2.getText() != ""){
win = true;
}
else if(button3.getText() == button6.getText() && button6.getText() == button9.getText() && button3.getText() != ""){
win = true;
}
//diagonal wins
else if(button1.getText() == button5.getText() && button5.getText() == button9.getText() && button1.getText() != ""){
win = true;
}
else if(button3.getText() == button5.getText() && button5.getText() == button7.getText() && button3.getText() != ""){
win = true;
}
else {
win = false;
}
/*Show a dialog if someone wins or the game is tie*/
if(win == true){
JOptionPane.showMessageDialog(null, letter + " WINS!");
} else if(count == 9 && win == false){
JOptionPane.showMessageDialog(null, "Tie Game!");
}
}
public static void main(String[] args){
new TicTacToeV1();
}
}
In a future tutorial I will clean up this code as there is a lot of unneeded repetition and I may even add AI for a single user to play.