My program isn't doing what I want it to do (x and o game / Tic Tac Toe)

Processing Coding Questions
21

I forgot to include the empty line rule.
Some years ago I made an excel file that tried to clarify the strategy used in those “easy-to-play” games:


It is in Spanish but I hope google translate could help you translate it from Spanish.

The solution is simply counting each X and O in each line, then assigning values to each line depending on who you are (X or O),

1.TOP mission is selecting a line with two of your faction…
2.SECOND-TOP is a line with two of your rival (to avoid losing)
3.THIRD-TOP is a line with one of your faction and two empty holes. (if you play to win, you win).
4.FOURTH-TOP is a line with one of your rival and two empty holes. (if you play not to lose but not to win, you lose)
5.BETTER THAN NOTHING is a line empty.
6.NEUTRAL is a line with one of your faction and one of your rival. Neither of you can conquer that line.

Each cell sums up the value of all the lines crossing it. So if you give, say, 1 to “BETTER THAN NOTHING”, the central cell will have a value of 4 at beginning, since 4 lines cross it and all of them are empty.

The values I proposed in my previous message are not checked for balance. I simply tried to give to each priority a value bigger than the sum of all less-relevant lines. So I used powers of 4.
But I think on my old basic programs I used different numbers to balance between priorities, to avoid situations where one player forces a win.
Yours,

José.

(Sorry. I am overwhelmed with work these days. I should be having my supper and going to bed, since it is 23:15 now).

1 Like
22

And about matrix, I meant something like:
int gameboard[3][3]; /* store here the game board */

(I can’t recall now if two-dimensional arrays/matrices are available in javascript or only on java mode. I always make mistakes with arrays and select the wrong syntax.).
of course, you should also store lines:

Maybe an object to store lines would be useful.
You could store StartX, StartY, Xdirection (+1, 0), Y direction (+1, 0, -1 /for diagonal/ ), CountX (number of X), CountO (number of O), ValueX (value for X), ValueO (value for O).
On a first pass, you could load the “linevalue” object, and, on a second pass, you could use it to load values on a “cellvalue[3][3]” matrix.

But I can’t recall how to declare objects or arrays of them.

1 Like
23

Ok thanks for your help!

1 Like
24

Just reporting on my progress

I made a tic tac toe program where you have a menu as 1st screen.

You can choose to

  • play with 2 humans
  • play AI vs. Human
  • two AI’s play against each other.

In the third type, two AI’s play against each other, I made it so that YOUR AI (AI #1) plays a random AI (AI #2) (it chooses randomly an empty cell). Now it automatically plays 10.000 games and reports the result. Now you can change things in your code (regarding AI #1) and check out if it still plays perfect.

So this is a great way to test AI #1!

Explanation

The AI #2 is very bad, but with 10.000 games even it finds randomly a way to win.
When AI #1 plays perfect though AI #2 never wins.
When there’s minor flaw in AI #1, AI #2 wins about 20 Games of 10.000.
There is test data below.

Some of my code

I did not optimize the code in terms of OOP or speed

Here is some code for the board:

// The Board 
//  x coordinates of all 9 fields [all same in one column]
int[] xPosition = 
  {
  110, 300, 490, 
  110, 300, 490, 
  110, 300, 490
}; 

//  y coordinates of all 9 fields [all same in one row]
int[] yPosition = 
  {
  150, 150, 150, 
  300, 300, 300, 
  450, 450, 450
}; 

// The status of all 9 fields: empty, or player X or player 0 (record the progress of the Game) // THE BOARD 
char[] clicked =  
  {
  ' ', ' ', ' ', 
  ' ', ' ', ' ', 
  ' ', ' ', ' '
};

Internal board for the AI

Here is the internal board for the AI to add up the scores from your rules:

It must have initially values like 1,3,4 (since I didn’t implement your rule “5.BETTER THAN NOTHING is a line empty.” correctly. When I implement this, the initial scores can all be 0 obviously, so thank you)

// AI: The scores for all 9 fields: intial Score for each field. In each move fields get a score, the field with the best score is the field for the next AI move.
int[] pointsOfFieldForAI = new int[9];   // THE BOARD with AI scores 
final int[] pointsOfFieldForAIEmpty =  
  {
  3, 1, 3, 
  1, 4, 1, 
  3, 1, 3
};

Data for the lines

And here is the data for the lines that are checked by the AI:

String[] winnings = {
  "012", // the horizontals lines // this is actually how the field is enumerated in the arrays above
  "345", 
  "678", 

  "036", // vertical lines
  "147", 
  "258", 

  "048", // diagonal lines
  "246"
};

I use the numbers from each String as indexes for the board and the AI Score Board.

Report

Here is a report that I generated from the 10.000 Games test,
to test which initial values for the AI Score Table are best:

**Protokoll: X and O Game** 

*Analysis of the necessary initial values for the internal AI-Score-Board to calculate the scores for the AI-Moves.*   


final int[] pointsOfFieldForAIEmpty =  
  {
  1, 1, 1, 
  1, 4, 1,                                   
  1, 1, 1
} 
29.11.2020 12:52
10000 games with: 9904 wins and 170 draws; 9884 vs. 20      [AI #1 looses 20 Games, it’s not perfect] 

--------------------------------

final int[] pointsOfFieldForAIEmpty =  
  {
  3, 1, 3, 
  1, 1, 1,                                      
  3, 1, 3
};
29.11.2020 12:57
10000 games with: 9884 wins and 231 draws; 9884 vs. 0     [AI #1 looses 0 Games, it’s perfect] 

--------------------------------

This is the best array for the 9 fields: 

final int[] pointsOfFieldForAIEmpty =  
  {
  3, 1, 3, 
  1, 4, 1, 
  3, 1, 3
};
29.11.2020 13:13
10000 games with: 9892 wins and 214 draws; 9892 vs. 0      [AI #1 looses 0 Games, it’s perfect] 

--------------------------------

final int[] pointsOfFieldForAIEmpty =  
  {
  0, 0, 0, 
  0, 0, 0, // 1 4 1 
  0, 0, 0
};
29.11.2020 13:15
10000 games with: 9829 wins and 317 draws; 9739 vs. 90     [AI #1 looses 90 Games, it’s NOT perfect] 

--------------------------------

pretty much Nonsense values: 

final int[] pointsOfFieldForAIEmpty =  
  {
  1, 4, 1, 
  4, 0, 4, // 1 4 1 
  1, 4, 1
};

29.11.2020 15:26
10000 games with: 9708 wins and 514 draws; 9486 vs. 222      [AI #1 looses 222 Games, it’s NOT perfect]

So, a cool way to test your AI.

Again, thank you for your great ideas!

Warm regards,

Chrisir

Unbenannt
Unbenannt602×627 9.17 KB

1 Like
25

hello could you tell me more about the draw/tie and a win for the tic tac toe game

1 Like
26

a draw appears when all fields are filled AND not a win is detected

a win can occur during the game but also when all fields are occupied (in the last move)

During the game

When you have an array “clicked” (the board) you need to store the moves in it.
So it’s an array of char and initially all cells are ’ ', spaces.
When a move occurs set the cell to ‘X’ or ‘0’

How to detect a Draw/Tie

make a for-loop over the array “clicked” and count the ’ ’ empty cells (spaces).

When your count gives 0 (zero) and it’s not a win, you have a Draw.

OR count everything not ’ ’ (so being X or 0)

boolean itIsDraw() {

  int counter  =  0;

  for (int i = 0; i < clicked.length; i++) {
    if (clicked[i] != ' ') {
      counter ++;
    }
  }//for 

  return 
    counter == 9; // returns true when it is a Draw/Tie (counter == 9), otherwise false
}// func

How to detect a Win

You have to go over all lines (lines you can win in, there are 3 vertical, 3 horizontal, 2 diagonal lines on the board) in clicked and count for each the X and 0. When you have three of them in one line, the player has one.

To know what the lines are specifically, you can store them as String for example.

Like here, the data for the lines that are checked :


String[] winnings = {
  "012", // the horizontals lines // this is actually how the field is enumerated in the arrays above
  "345", 
  "678", 

  "036", // vertical lines
  "147", 
  "258", 

  "048", // diagonal lines
  "246"
};

Example for check win

probably it is not too wise to use array of String for the lines (their indexes)

But here is the check for win:


// Tools for Check win 

void checkWin() {
  // check if somebody has won.
  // check all lines on the board using the indexes in winnings.

  // if we already have a win, we leave
  if (win) {
    return; //leave
  }

  // loop over all lines in winnings[] (horizontal, vetical, diagonal) 
  for (int i = 0; i<winnings.length; i++) {
    if (checkWinHelper(winnings[i], 'X')) break; 
    if (checkWinHelper(winnings[i], '0')) break;
  }//for
}//func 

boolean checkWinHelper(String stringWith3IndexesForOneLine, char playerName_ ) {
  // Check one line on the Board. 
  // The function expects a 3 letter String from winnings[] which represents a line and char playerName_: X or 0.

  // Error when the length of the String stringWith3IndexesForOneLine is not 3
  if (stringWith3IndexesForOneLine.length() != 3) {
    //Error
    println("Error 742: A triple from winnings has not exactly 3 numbers: "+stringWith3IndexesForOneLine);
    return false; //leave
  }

  // ------

  // count the occurance of player on the Board for the line denoted by stringWith3IndexesForOneLine: 
  int counter=0; 
  // we loop over the 3 chars / indexes in stringWith3IndexesForOneLine which denote the line in clicked[]
  for (char currentChar : stringWith3IndexesForOneLine.toCharArray() ) {
    // convert the current char to int, which serves as index for clicked[]
    int fieldNumber = int(currentChar+"");  
    if (clicked[fieldNumber] == playerName_) {
      counter++;
    }//if
  } //for

  // Evaluate the result of the counting
  if (counter==3) {
    // Yes, we have a winner 
    win = true; 
    winPlayer = playerName_; 
    return true; // leave
  }//if

  // No, we don't have a winner (win = false;)
  return false;
}//func
//

OKAY?

How to write an AI

Or do you mean how to let the computer make moves and let it win?

How to write an AI you can play against is a little harder. It has been discussed above. Basically by the criteria mentioned above set Scores for each cell of the board, store them in an array “scores” (similar to “clicked”).
Then make the move on the cell which has the most points in the score.

Warm regards,

Chrisir

27

Ok thank you so much for your time and assistance

1 Like
28

hi im trying to make a main menu or the tic tac toe game
PImage background;
int score=0;
int state=0;
final int mainMenu=0;
final int game=1;

void setup() {
size(500, 500);
}
void draw() {
switch(state) {
case mainMenu:
runMenu();
break;
}

case game:
runGame();
break;

void runMenu() {
background=loadImage(“start.jpg”);
fill(255);
text(“X and O game”, 100, 100);
text(“Press a to begin the game”, 150, 150);
if (key==‘a’) {
runGame();
}
void runGame() {
}
}
is there something wrong with the code :slightly_frowning_face:

1 Like
29

This Sketch better. See below.

Remarks

Some brackets } where wrong. For example the switch() { } section was closing too soon.

Remember to hit ctrl-t in processing so the code gets auto-formatted, better indents. The indents of the lines with a pair of brackets are the same.

  • For example void draw() { has the same indent as it’s closing bracket }.
  • And switch() { has the same indent as its }.

Then check if the { ... } pairs are correct:

  • When you place the cursor after one bracket } , the corresponding bracket { will light up.
  • This works both ways, from { to } OR from } to { .
  • When you see that for example the bracket that should light up is for a switch-clause but a bracket for a function lights up, something is wrong.

Idea

Also, you can write a comment after a closing bracket which section it is closing (e.g. // function or // if or // switch).

PImage background;
int score=0;
int state=0;
final int mainMenu=0;
final int game=1;


// ----------------------------------------------------------------------
// The two core functions 

void setup() {
  size(500, 500);
  background=loadImage("start.jpg"); // always load in setup()
}//function 

void draw() {
  switch(state) {

  case mainMenu:
    runMenu();
    break;

  case game:
    runGame();
    break;
  }//switch
  //
}//function 

// ----------------------------------------------------------------------
// The functions called by draw() 

void runMenu() {
  background(background);
  fill(255);
  text("X and O game", 100, 100);
  text("Press a to begin the game", 150, 150);
  if (key=='a') {
    state=game; // change state here
    //runGame();// don't call it here - call it from draw() as you do
  }//if
}//function 

void runGame() {
  background(110);
  text("X and O game", 
    210, 40);
  //
}//function 
//
1 Like
30

thank you so much youve helped me alot in this topic im very grateful

1 Like
31

char player=‘X’;//this tells us whos turn it is during the game
void setup() {
size(600, 600);
background(255);//sets the colour of the background to white
strokeWeight(6);//sets the width of the stroke
noFill();//this gives the ellipse just the outline and makes it hollow
}
void draw() {
stroke(0);//sets the colour of the lines to black
line(200, 100, 200, 500);//creates the first vertical line
line(400, 100, 400, 500);//creates the second vertical line
line(100, 100+400/3, 500, 100+400/3);//draws the first horizontal line
line(100, 250+400/3, 500, 250+400/3);//draws the second horizontal line
}
void mouseClicked() {
textSize(32);
text(“Its 0’s turn”, 100, 550);
fill(0, 102, 153);
if (player==‘X’) {//this statement controls what happens when the player plays X
stroke(0, 255, 0);//sets the variable X to green
line(mouseX+50, mouseY-50, mouseX-50, mouseY+50);//draws the second line of the variable X
line(mouseX-50, mouseY-50, mouseX+50, mouseY+50);//draws the second line of the variable X
textSize(32);
text(“Its X’s turn”,100,550);
fill(0,102,153);

player='0';//this statement controls what happens when the player plays O

} else {
player=‘X’;//this statement produces X after O is played
stroke(255, 0, 0);//changes the colour of the circle to red

ellipse(mouseX, mouseY, 100, 100);//draws a circle

}
}
would i put all this info under void run game?

32

Not really.

What it is in draw() must be moved into the function runGame().

What is before setup stays there.

What is in setup stays there. But you must have only one size() command.

mouseClicked() stays the same. You can say at its start: if (state != game) return; to leave when the state is wrong. Otherwise a mouse click in state menu would be registered. Bad.

1 Like
33 
PImage background;
int score=0;
int state=0;
final int mainMenu=0;
final int game=1;
char player='X';//this tells us whos turn it is during the game


void setup() {
  size(600,600);
  background=loadImage("yo.jpg");
  strokeWeight(6);//sets the width of the stroke
  noFill();//this gives the ellipse just the outline and makes it hollow
}
void draw() {
  switch(state) {
  
    case mainMenu:
    runMenu();
    break;


case game:
  runGame();
  break;
}

}





void runMenu() {
  background(background);
  fill(0);
  text("X and O game", 100, 100);
  text("Press a to begin the game", 150, 150);
  if (key=='a') {
    state=game;
  }
}
  void runGame() {
    background(110);
    text("X and 0 game",210,40);
     stroke(0);//sets the colour of the lines to black
  line(200, 100, 200, 500);//creates the first vertical line
  line(400, 100, 400, 500);//creates the second vertical line 
  line(100, 100+400/3, 500, 100+400/3);//draws the first horizontal line
  line(100, 250+400/3, 500, 250+400/3);//draws the second horizontal lin
  }
  void mouseClicked() {
    if (state != game) 
   textSize(32);
  text("Its 0's turn", 100, 550); 
  fill(0, 102, 153);
  if (player=='X') {//this statement controls what happens when the player plays X
    stroke(0, 255, 0);//sets the variable X to green
    line(mouseX+50, mouseY-50, mouseX-50, mouseY+50);//draws the second line of the variable X
    line(mouseX-50, mouseY-50, mouseX+50, mouseY+50);//draws the second line of the variable X
    textSize(32);
    text("Its X's turn",100,550);
    fill(0,102,153);

    player='0';//this statement controls what happens when the player plays O
  } else {
    player='X';//this statement produces X after O is played
    stroke(255, 0, 0);//changes the colour of the circle to red

    ellipse(mouseX, mouseY, 100, 100);//draws a circle
  }
}

when i run the program the x and o dissappears immediately i click them and the inside of the circle is blue.

34

Hello,

Please format your code:
https://discourse.processing.org/faq#format-your-code

:)

1 Like
35

you forgot the return command:

if (state != game)
  return;

here



PImage background;
int score=0;
int state=0;
final int mainMenu=0;
final int game=1;
char player='X';//this tells us whos turn it is during the game

// -----------------------------------------------------------------------------------------

void setup() {
  size(600, 600);
  background=loadImage("yo.jpg");
  strokeWeight(6);//sets the width of the stroke
  noFill();//this gives the ellipse just the outline and makes it hollow
}

void draw() {
  switch(state) {

  case mainMenu:
    runMenu();
    break;

  case game:
    runGame();
    break;
  }
}

// -----------------------------------------------------------------------------------------

void runMenu() {
  if (background==null) 
    background(255); 
  else 
  background(background);

  fill(0);
  text("X and O game", 100, 100);
  text("Press a to begin the game", 150, 150);
  if (key=='a') {
    background(110);
    state=game;
  }
}

void runGame() {
  textSize(32);
  fill(0, 102, 153);
  text("X and 0 game", 210, 40);
  stroke(0);//sets the colour of the lines to black
  line(200, 100, 200, 500);//creates the first vertical line
  line(400, 100, 400, 500);//creates the second vertical line
  line(100, 100+400/3, 500, 100+400/3);//draws the first horizontal line
  line(100, 250+400/3, 500, 250+400/3);//draws the second horizontal lin
}

// -----------------------------------------------------------------------------------------

void mouseClicked() {

  if (state != game)
    return;

  if (player=='X') { //this statement: IF it's X's move ? 
    stroke(0, 255, 0);//sets the variable X to green
    line(mouseX+50, mouseY-50, mouseX-50, mouseY+50);//draws the second line of the variable X
    line(mouseX-50, mouseY-50, mouseX+50, mouseY+50);//draws the second line of the variable X

    deleteFooter();
    fill(0, 102, 153);
    textSize(32);
    text("Its X’s turn", 100, 550);
    player='0';//this statement: 0's turn now
  } else {
    player='X';//this statement: X's turn now
    stroke(255, 0, 0);//changes the colour of the circle to red
    noFill(); 
    ellipse(mouseX, mouseY, 100, 100);//draws a circle

    deleteFooter(); 
    textSize(32);
    fill(0, 102, 153);
    text("Its 0’s turn", 100, 550);
  }
}

void deleteFooter() {
  fill(110);
  noStroke(); 
  rect(0, 520, width, 200);
}
1 Like
36

hi For the arrays i would use ellipse for the O right but what about the X?

1 Like
37

you can use this what you have now, but replace mouseX and mouseY with the array like
x[2] and y[2] etc.

1 Like
38 
type or PImage background; // image for background 
char player='X';   // this tells us whose turn it is during the game
int score=0;       // the score

//Program screens
final int mainMenu = 0;//defines mainMenu
final int game     = 1;//defines game
int state = mainMenu;//sets mainmenu as first screen player sees


void setup() {
  size(600, 600);//sets screen size
  background=loadImage("yo.jpg");//sets picture for background
  strokeWeight(6);//sets the width of the stroke
}

void draw() {
  switch(state) {//this functions switches the state of the program

  case mainMenu:
    runMenu();//sets the screen for the main menu
    break;

  case game:
    runGame();//sets the screen for the game
    break;
  }
}



void runMenu() {
  if (background==null)//sets the condition for which the background changes 
    background(255); //sets background to white
  else 
  background(background);//sets background to image

  fill(0); // black text 
  textSize(32);//sets text size
  text("X and O game", 100, 100);//displays X and O game
  textSize(21);//sets text size
  text("Press 'a' to begin the game", 150, 180);//displays press a to begin the game
  if (key=='a') {//states what happens if a key is pressed
    background(110);//sets background colour
    state=game;//takes player to game
  }
}

void runGame() {
  textSize(32);//sets text size
  fill(0, 102, 153);//determines text colour
  text("X and 0 game", 210, 40);//displays x and o game

  // draw grid 
  stroke(0);//sets the colour of the lines to black
  line(200, 100, 200, 500);//creates the first vertical line
  line(400, 100, 400, 500);//creates the second vertical line
  line(100, 100+400/3, 500, 100+400/3);//draws the first horizontal line
  line(100, 250+400/3, 500, 250+400/3);//draws the second horizontal lin


  if (player=='X') { //states what happens when its player x's turn 
    deleteFooter();
    fill(0, 102, 153);//sets text colour
    textSize(32);//sets text size
    text("It’s X’s turn", 100, 550);//displays its x turn
  } else {//states what happens if its not player x's turn
    deleteFooter(); 
    textSize(32);//sets text size
    fill(0, 102, 153);//sets text colour
    text("It’s 0’s turn", 100, 550);//displays its o's turn
  }
}



void mouseClicked() {
  if (state != game)//this is to make sure we are in the right state
    return; // leave

  if (player=='X') {  //sets the condition for what happens when its player x's turn
    stroke(0, 255, 0); //sets the color for the letter X to green
    line(mouseX+50, mouseY-50, mouseX-50, mouseY+50);//draws the first line of the letter X
    line(mouseX-50, mouseY-50, mouseX+50, mouseY+50);//draws the second line of the letter X

    player='0';//this statement states that its 0's turn now
  } else {
    stroke(255, 0, 0);//changes the colour of the circle to red
    noFill();//this gives the ellipse just the outline and makes it hollow
    ellipse(x[0], y[0], 100, 100);//draws a circle
    ellipse(x[1], y[1], 100, 100);//draws a circle
    ellipse(x[2], y[2], 100, 100);//draws a circle
    ellipse(x[3], y[3], 100, 100);//draws a circle
    ellipse(x[4], y[4], 100, 100);//draws a circle
    ellipse(x[5], y[5], 100, 100);//draws a circle
    ellipse(x[6], y[6], 100, 100);//draws a circle   
    ellipse(x[7], y[7], 100, 100);//draws a circle
    ellipse(x[8], y[8], 100, 100);//draws a circle
    ellipse(x[9], y[9], 100, 100);//draws a circle

    player='X';//this statement states that its X's turn now
  }
}

void deleteFooter() {
  // make a rect to delete the old text "It’s 0’s turn"/"It’s X’s turn"
  fill(110);//fills rectangle
  noStroke(); //no stroke
  rect(0, 520, width, 200);//draws a rectangle
}

when I do the array for o it says x cant be assigned to a variable am I supposed to define it use int x=0;

1 Like
39

I think that won’t work because we only have 9 fields from 0 to 8

40 
PImage background; // image for background 
char player='X';   // this tells us whose turn it is during the game
int score=0;       // the score

//Program screens
final int mainMenu = 0;//defines mainMenu
final int game     = 1;//defines game
int state = mainMenu;//sets mainmenu as first screen player sees
int[]x=
{
  110,300,490,
  110,300,490,
  110,300,490
};
int[]y=
{
  150,150,150,
  300,300,300,
  450,450,450
};


void setup() {
  size(600, 600);//sets screen size
  background=loadImage("yo.jpg");//sets picture for background
  strokeWeight(6);//sets the width of the stroke
}

void draw() {
  switch(state) {//this functions switches the state of the program

  case mainMenu:
    runMenu();//sets the screen for the main menu
    break;

  case game:
    runGame();//sets the screen for the game
    break;
  }
}



void runMenu() {
  if (background==null)//sets the condition for which the background changes 
    background(255); //sets background to white
  else 
  background(background);//sets background to image

  fill(0); // black text 
  textSize(32);//sets text size
  text("X and O game", 100, 100);//displays X and O game
  textSize(21);//sets text size
  text("Press 'a' to begin the game", 150, 180);//displays press a to begin the game
  if (key=='a') {//states what happens if a key is pressed
    background(110);//sets background colour
    state=game;//takes player to game
  }
}

void runGame() {
  textSize(32);//sets text size
  fill(0, 102, 153);//determines text colour
  text("X and 0 game", 210, 40);//displays x and o game

  // draw grid 
  stroke(0);//sets the colour of the lines to black
  line(200, 100, 200, 500);//creates the first vertical line
  line(400, 100, 400, 500);//creates the second vertical line
  line(100, 100+400/3, 500, 100+400/3);//draws the first horizontal line
  line(100, 250+400/3, 500, 250+400/3);//draws the second horizontal lin


  if (player=='X') { //states what happens when its player x's turn 
    deleteFooter();
    fill(0, 102, 153);//sets text colour
    textSize(32);//sets text size
    text("It’s X’s turn", 100, 550);//displays its x turn
  } else {//states what happens if its not player x's turn
    deleteFooter(); 
    textSize(32);//sets text size
    fill(0, 102, 153);//sets text colour
    text("It’s 0’s turn", 100, 550);//displays its o's turn
  }
}



void mouseClicked() {
  if (state != game)//this is to make sure we are in the right state
    return; // leave

  if (player=='X') {  //sets the condition for what happens when its player x's turn
    stroke(0, 255, 0); //sets the color for the letter X to green
    line(x[0]+50, y[0]-50, x[0]-50, y[0]+50);//draws the first line of the letter X
    line(x[0]-50, y[0]-50,x[0] +50,y[0] +50);//draws the second line of the letter X
     line(x[1]+50, y[1]-50, x[1]-50, y[1]+50);//draws the first line of the letter X
    line(x[1]-50, y[1]-50,x[1] +50,y[1] +50);//draws the second line of the letter X
     line(x[2]+50, y[2]-50, x[2]-50, y[2]+50);//draws the first line of the letter X
    line(x[2]-50, y[2]-50,x[2] +50,y[2] +50);//draws the second line of the letter X
     line(x[3]+50, y[3]-50, x[3]-50, y[3]+50);//draws the first line of the letter X
    line(x[3]-50, y[3]-50,x[3] +50,y[3] +50);//draws the second line of the letter X
     line(x[4]+50, y[4]-50, x[4]-50, y[4]+50);//draws the first line of the letter X
    line(x[4]-50, y[4]-50,x[4] +50,y[4] +50);//draws the second line of the letter X
     line(x[5]+50, y[5]-50, x[5]-50, y[5]+50);//draws the first line of the letter X
    line(x[5]-50, y[5]-50,x[5] +50,y[5] +50);//draws the second line of the letter X
     line(x[6]+50, y[6]-50, x[6]-50, y[6]+50);//draws the first line of the letter X
    line(x[6]-50, y[6]-50,x[6] +50,y[6] +50);//draws the second line of the letter X
     line(x[7]+50, y[7]-50, x[7]-50, y[7]+50);//draws the first line of the letter X
    line(x[7]-50, y[7]-50,x[7] +50,y[7] +50);//draws the second line of the letter X
 line(x[8]+50, y[8]-50, x[8]-50, y[8]+50);//draws the first line of the letter X
    line(x[8]-50, y[0]-50,x[0] +50,y[0] +50);//draws the second line of the letter X
    player='0';//this statement states that its 0's turn now
  } else {
    stroke(255, 0, 0);//changes the colour of the circle to red
    noFill();//this gives the ellipse just the outline and makes it hollow
    ellipse(x[0], y[0], 100, 100);//draws a circle
    ellipse(x[1], y[1], 100, 100);//draws a circle
    ellipse(x[2], y[2], 100, 100);//draws a circle
    ellipse(x[3], y[3], 100, 100);//draws a circle
    ellipse(x[4], y[4], 100, 100);//draws a circle
    ellipse(x[5], y[5], 100, 100);//draws a circle
    ellipse(x[6], y[6], 100, 100);//draws a circle   
    ellipse(x[7], y[7], 100, 100);//draws a circle
    ellipse(x[8], y[8], 100, 100);//draws a circle


    player='X';//this statement states that its X's turn now
  }
}

void deleteFooter() {
  // make a rect to delete the old text "It’s 0’s turn"/"It’s X’s turn"
  fill(110);//fills rectangle
  noStroke(); //no stroke
  rect(0, 520, width, 200);//draws a rectangle
}

thanks for your reply but is there something wrong with the array because when I click all the xs show at the same time same with the os