MVC Approach in TicTacToe implementation By Java Swing

Rasathurai Karan
7 min readFeb 17, 2022

Description:

Specification for is as follows:

● Display a 3x3 matrix of buttons.

● Each player gets a turn to pick a button which is not selected. If the player selects a button that is already selected, the system should ignore that selection and let the user select again until he/she picks a free button.

● The buttons selected by user 1 should be marked with a 1 and that for user 2 is 2.

● User 1 gets the first chance, then user 2 gets the chance and so on.

● Based on the pick, the game might continue (in which case the other player should get his/her turn) or end with either a win to the current player or a draw. When the game ends the results should be displayed in a different window

Model

TicTacToeModel.java class was created for to hold the data value .thatswhy private acess matrix 3x3 was created .

some Boolean variable were created which were used to identify to get 3 samevalue in row (up ,down ,across diagonally) ,and also identify that all matrix values are completed.

Setters and getters also was implemented for private acess variable.

Methods Created to identify to get 3 same value in row (up ,down ,across diagonally) and find all matrix index full.

So basically our model manages data and logic and rules of the our TicTacToe Game

//creating a model (objects that contain data and operations)public class TictactoeModel {
//create a private ascces variable inside the model
private int[][] matrix = new int[3][3];
//create 3*3 matrix to hold the values out by buttons
private boolean hassameValue = false;
//to Identify the values which are same in row(up,down,diagonaly)
private boolean hasAllBoxCompleted=false;
//to check if its drwa or not
public boolean isAllBoxCompleted() {
return hasAllBoxCompleted;
}
public void setAllBoxCompleted(boolean allBoxCompleted) {
hasAllBoxCompleted = allBoxCompleted;
}
//when return the value (getter for hasSameValue)
public boolean HassameValue() {
return hassameValue;
}
//getter for matrix
public int[][] getMatrix() {
return matrix;
}
//setter for matrix
public void setMatrix(int[][] matrix) {
this.matrix = matrix;
}
//method to set the value when click to matrix at correct index
public void setValue(int value, int index) {
if (index < 3) {
matrix[0][index] = value;
}
//if value is 5 then 5-3=>2 so it moves to store the matrix [1][2]
else if (index < 6) {
index = index - 3;//easily to find the which colum its belongs
matrix[1][index] = value;//set the value to appropriate place
} else {
index = index - 6;//easily to find the which colum its belongs
matrix[2][index] = value;//set the value to appropriate place
}
}//method to find if its win or lose
public void checkingWinorLoose(int value) {
// matrixCrossed= {0, 1, 2};
if (matrix[0][0] == value && matrix[0][1] == value && matrix[0][2] == value) {
hassameValue = true;
//found same value so make as true
}
// matrixCrossed{4, 5, 6};
else if (matrix[1][0] == value && matrix[1][1] == value && matrix[1][2] == value) {
hassameValue = true;
//found same value so make as true
}
// matrixCrossed={7, 8, 9};
else if (matrix[2][0] == value && matrix[2][1] == value && matrix[2][2] == value) {
hassameValue = true;
//found same value so make as true
}
// matrixCrossed{1, 4, 7};
else if (matrix[0][0] == value && matrix[1][0] == value && matrix[2][0] == value) {
hassameValue = true;
//found same value so make as true
}
// matrixCrossed= new int[]{2, 5, 8};
else if (matrix[0][1] == value && matrix[1][1] == value && matrix[2][1] == value) {
hassameValue = true;
//found same value so make as true
}
// matrixCrossed{9, 6, 3};
else if (matrix[0][2] == value && matrix[1][2] == value && matrix[2][2] == value) {
hassameValue = true;
//found same value so make as true
}
// matrixCrossed{1, 5, 9};
else if (matrix[0][0] == value && matrix[1][1] == value && matrix[2][2] == value) {
hassameValue = true;
//found same value so make as true
}
// matrixCrossed{3, 5, 7};
else if (matrix[0][2] == value && matrix[1][1] == value && matrix[2][0] == value) {
hassameValue = true;
//found same value so make as true
}}
public void ischecksdrwaw (){
int count=0;
for(int i=0;i<3;i++){
for (int j=0;j<3;j++){
if(matrix[i][j]!=0){
count++;
//return isAllBoxCompleted;
}
}
}
if(count==9)hasAllBoxCompleted=true;
// return isAllBoxCompleted;
}
}

View

Normally View is a UI component that responsible for presenting data to the user. Our UI was made by 3x3 buttons . Grid view was used to create the buttons, which also were colored black.

And also create another frame to display the result

Create some methods to show the name and enable the buttons after a win or loss in a match.

So basically view is used to present the data

//package com.srk;
//creating a model (objects that contain data and operations)

public class TictactoeModel {
//create a private ascces variable inside the model
private int[][] matrix = new int[3][3];//create 3*3 matrix to hold the values out by buttons
private boolean hassameValue = false;//to Identify the values which are same as consequently and also row or column or diagonally
private boolean hasAllBoxCompleted = false;//to check if its drwa or not

public boolean isAllBoxCompleted() {
return hasAllBoxCompleted;
}

public void setAllBoxCompleted(boolean allBoxCompleted) {
hasAllBoxCompleted = allBoxCompleted;
}


//when return the value (getter for hasSameValue)
public boolean HassameValue() {
return hassameValue;
}


//getter for matrix
public int[][] getMatrix() {
return matrix;
}

//setter for matrix
public void setMatrix(int[][] matrix) {
this.matrix = matrix;
}


//method to set the value when click to matrix at correct index
public void setValue(int value, int index) {
if (index < 3) {
matrix[0][index] = value;
}
//if value is 5 then 5-3=>2 so it moves to store the matrix [1][2]
else if (index < 6) {
index = index - 3;//easily to find the which colum its belongs
matrix[1][index] = value;//set the value to appropriate place
} else {
index = index - 6;//easily to find the which colum its belongs
matrix[2][index] = value;//set the value to appropriate place
}

}


//method to find if its win or lose
public void checkingWinorLoose(int value) {

// matrixCrossed= {0, 1, 2};
if (matrix[0][0] == value && matrix[0][1] == value && matrix[0][2] == value) {
hassameValue = true;
//found same value so make as true


}
// matrixCrossed{4, 5, 6};
else if (matrix[1][0] == value && matrix[1][1] == value && matrix[1][2] == value) {
hassameValue = true;
//found same value so make as true

}
// matrixCrossed={7, 8, 9};
else if (matrix[2][0] == value && matrix[2][1] == value && matrix[2][2] == value) {
hassameValue = true;
//found same value so make as true

}
// matrixCrossed{1, 4, 7};
else if (matrix[0][0] == value && matrix[1][0] == value && matrix[2][0] == value) {
hassameValue = true;
//found same value so make as true

}
// matrixCrossed= new int[]{2, 5, 8};
else if (matrix[0][1] == value && matrix[1][1] == value && matrix[2][1] == value) {
hassameValue = true;
//found same value so make as true
}
// matrixCrossed{9, 6, 3};
else if (matrix[0][2] == value && matrix[1][2] == value && matrix[2][2] == value) {
hassameValue = true;
//found same value so make as true

}
// matrixCrossed{1, 5, 9};
else if (matrix[0][0] == value && matrix[1][1] == value && matrix[2][2] == value) {
hassameValue = true;
//found same value so make as true

}
// matrixCrossed{3, 5, 7};
else if (matrix[0][2] == value && matrix[1][1] == value && matrix[2][0] == value) {
hassameValue = true;
//found same value so make as true

}


}

public void ischecksdrwaw() {
int count = 0;
for (int i = 0; i < 3; i++) {
for (int j = 0; j < 3; j++) {
if (matrix[i][j] != 0) {
count++;

//return isAllBoxCompleted;
}
}
}
if (count == 9) hasAllBoxCompleted = true;

// return isAllBoxCompleted;
}

}

Controller

The Controller makes use of both the Model and the View. It updates the models as a result of the execution.

Here the interface ActionListerner were implemented to do action when button cliked

Action is, When you click the button, the value is stored in the model(matrix 3x3) object.And check the condition if user win or not or tied .if its win or tied update the GUI

It will be invoked as a result of a user’s action on a view

Finally, Controller that accepts input from the user and converts it to commands for Model or View

//package com.srk;

import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class TicTacToeController implements ActionListener {

private TictactoeModel model;//create a Tictactoe model of the object
private TicTacToeView view;//create a TictacToe view object


//createconstructor for controller
public TicTacToeController(TictactoeModel model, TicTacToeView view) {
this.model = model;
this.view = view;
//initView();
}

@Override
public void actionPerformed(ActionEvent e) {


for (int i = 0; i < 9; i++) {
if (e.getSource() == view.getButtons()[i]) {

if (view.isUser1turn()) {//if isuser1turn is true automatically user2turn=>false

if (view.getButtons()[i].getText() == "") {//if button text is empty
view.getButtons()[i].setForeground(Color.BLUE);//set foreground color to blue
view.getButtons()[i].setText(Integer.toString(1));//set button text as 1
model.setValue(1, i);// set the model matrix to 1 appropriate index
model.checkingWinorLoose(1);//if its checking as win or loose for every setting


if (model.HassameValue()) { //some time matrix found same value
view.user1Wins(); //set a user1 as winner
}
model.ischecksdrwaw();
if (model.isAllBoxCompleted()) {
view.matchDraw();
}

view.setUser1turn(false);//user2 as automatically true


}
} else {
if (view.getButtons()[i].getText() == "") {//if button text is empty
view.getButtons()[i].setForeground(Color.yellow);//set foreground color to yello
view.getButtons()[i].setText(Integer.toString(2));//set button text as 2
model.setValue(2, i);// set the model matrix to 2 appropriate index
model.checkingWinorLoose(2);//if its checking as win or loose for every setting
if (model.HassameValue()) {//some time matrix found same value
view.user2Wins();//set a user2 as winner
}

view.setUser1turn(true);//user2 as automatically false


}

}
}
}

}


}

Running MVP

Finally create Main.java file to call the our GUI

//package com.srk;
/*
Author=>KARAN R
Date=14/02/2022



*/

public class Main {

public static void main(String[] args) {

runGUI();

}
public static void runGUI(){
new TicTacToeView();
}
}

--

--

Rasathurai Karan

Department of Computer Engineering University of Peradeniya