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

**URL:** https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516
**Category:** Coding Questions
**Created:** [November 18, 2020, 7:42pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516 "2020-11-18T19:42:31Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![DijaAngel](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@DijaAngel](https://discourse.processing.org/u/DijaAngel)
#### Post date: [November 18, 2020, 7:42pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/1 "2020-11-18T19:42:31Z")

</div>

char player=‘X’;  
void setup(){  
size(600,600);  
background(255);  
strokeWeight(6);  
noFill();  
}  
void draw(){  
stroke(0);  
line(200,100,200,500);  
line(400,100,400,500);  
}  
void mouseClicked(){  
if(player==‘X’){  
stroke(0,255,0);  
line(mouseX-50,mouseY-50,mouseX+50,mouseY+50);

```
player='0';

```

}else{  
ellipse(mouseX,mouseY,10,30);  
}  
}  
im trying to make an x and o game but i dont know what im missing

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 18, 2020, 9:07pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/2 "2020-11-18T21:07:17Z")

</div>

**Whose turn is it?**

> [@DijaAngel](#):
>
> `player=‘X’;`

You need to repeat this in the `else` section so player X has its turn again.

(because in the else-section it’s O’s turn)

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 18, 2020, 9:10pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/3 "2020-11-18T21:10:12Z")

</div>

**How to draw the X**

> [@DijaAngel](#):
>
> line(mouseX-50,mouseY-50,mouseX+50,mouseY+50);

That’s one line of an X ?

you also need the / line :

line(mouseX+50,mouseY-50,mouseX-50,mouseY+50);

**How to draw the grid**

and you want two more vertical lines for the grid, like this:  
` line (100, 100+400/3, 500, 100+400/3);`

(not tested)

---

<div class="post-metadata">

### Author: ![DijaAngel](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@DijaAngel](https://discourse.processing.org/u/DijaAngel)
#### Post date: [November 18, 2020, 11:24pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/4 "2020-11-18T23:24:19Z")

</div>

Ok thank you so much I will try it

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 19, 2020, 12:29pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/5 "2020-11-19T12:29:52Z")

</div>

Hello,

You can work further on this.

**Design**

O and X could have different colors, for example red and green.

Have a Headline " X and O Game "

Use text() command: [https://www.processing.org/reference/text\_.html](https://www.processing.org/reference/text_.html)

**The X and O**

It would look funny if each cross (X) and O would be slightly different.

- So for the O you could add a random value to the width and the size of the ellipse.
- For the X you could add a random value to the x,y of the corners; so mouseX-50,mouseY-50 becomes … ?

See [https://www.processing.org/reference/random\_.html](https://www.processing.org/reference/random_.html)

**Additional text**

You could make an additional text where it say It’s X’s turn OR It’s O’s turn

Use text() command: [https://www.processing.org/reference/text\_.html](https://www.processing.org/reference/text_.html)

**store the positions**

This is a little harder.

You could store the positions of the center of the 9 fields in an array (list).

Because you have 9 fields, the array would be 9 slots long.

One array could hold

- the x values for the fields and
- one array the y values for the fields

For Arrays see [https://www.processing.org/tutorials/arrays/](https://www.processing.org/tutorials/arrays/)

Remember that arrays start with 0. So

- the first field has the position `x[0], y[0]` on the screen (e.g. `ellipse(x[0], y[0], 50, 50);`)
- the 2nd field has `x[1], y[1]` on the screen and so on

And then check the distance of the center of the field to the mouse (command dist(), see reference: [https://www.processing.org/reference/dist\_.html](https://www.processing.org/reference/dist_.html))

And then draw the X and O at the position of the center of the 9 fields (and not at position of the mouse directly as we do now)

(because at the moment we can draw the X and O anywhere)

**Detect a Draw/Tie and a Win**

- You can count the moves and when there a 9 moves, the board is full and we have a Draw/Tie.

- When you store which of the fields have been clicked by the players, you could check whether one player won the game. That means 3 X in one row, or 3 0. You can ask me more about this later.

It’s a fun topic!

Warm regards,

Chrisir

---

<div class="post-metadata">

### Author: ![DijaAngel](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@DijaAngel](https://discourse.processing.org/u/DijaAngel)
#### Post date: [November 19, 2020, 11:31pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/6 "2020-11-19T23:31:20Z")

</div>

char player=‘X’;  
void setup(){  
size(600,600);  
background(255);//sets the colour of the background to white  
strokeWeight(6);//sets the width of the stroke  
noFill();  
}  
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  
}  
void mouseClicked(){  
if(player==‘X’){  
stroke(0,255,0);//sets the variable X to green  
line(mouseX+50,mouseY-50,mouseX-50,mouseY+50);  
line(mouseX+50,mouseY-50,mouseX+50,mouseY+50);  
line(100,100+400/3,500,100+400/3);  
line(100,100+400/3,500,100+400/3);

```
player='0';

```

}else{  
player=‘X’;  
ellipse(mouseX,mouseY,random(10),random(30));//draws a circle

}  
}  
Am I correct?

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 20, 2020, 6:33am UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/7 "2020-11-20T06:33:08Z")

</div>

You can always test your code and check if you are happy with how it runs.  
Then change the line and run again.  
Check if you are happy with how it runs, change other lines again.

I did this for you now, but it’s a good practice.

**The grid**

> [@DijaAngel](#):
>
> line(100,100+400/3,500,100+400/3);  
> line(100,100+400/3,500,100+400/3);

This belongs in draw() where you draw the lines / grid.

Actually both lines are the same. You need to change the values of the second line.

They must be parallel under each other (like this = ) to form the grid.

**The circles:**

` ellipse(mouseX, mouseY, random(10), random(30));//draws a circle`

I would suggest a minimal diameter that is always there and you add a random value to it.

` ellipse(mouseX, mouseY, 40+random(10), 40+random(30));//draws a circle`

Normally we use O (like in the word Open) and not 0 (zero) for the player.

**The crosses**

The second line is wrong

Try this: line(mouseX-50, mouseY-50, mouseX+50, mouseY+50);

Please read it and understand how it works:

- mouseX and mouseY is the center of the X.
- `mouseX-50, mouseY-50` is the upper left corner where we start the line like this \ leading down to the right.
- mouseX+50, mouseY+50 is the end of the line, which is the lower right corner

I hope this helps.

Warm regards,

Chrisir

---

<div class="post-metadata">

### Author: ![DijaAngel](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@DijaAngel](https://discourse.processing.org/u/DijaAngel)
#### Post date: [November 20, 2020, 5:52pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/8 "2020-11-20T17:52:51Z")

</div>

thank you so much for your help

---

<div class="post-metadata">

### Author: ![DijaAngel](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@DijaAngel](https://discourse.processing.org/u/DijaAngel)
#### Post date: [November 20, 2020, 5:53pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/9 "2020-11-20T17:53:46Z")

</div>

but what does char player=‘X’ mean

---

<div class="post-metadata">

### Author: ![DijaAngel](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@DijaAngel](https://discourse.processing.org/u/DijaAngel)
#### Post date: [November 20, 2020, 5:54pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/10 "2020-11-20T17:54:48Z")

</div>

and the nofill() as well cause id like to comment them

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 20, 2020, 6:38pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/11 "2020-11-20T18:38:26Z")

</div>

> [@DijaAngel](#):
>
> but what does char player=‘X’ mean

We define a character (ONE single letter) named “player” and set it to ‘X’.

“player” tells us whose turn it is during the Game.

So after each move we have to say player=‘X’ OR player = ‘0’ (or O)

Haven’t you written the code yourself?

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 20, 2020, 6:41pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/12 "2020-11-20T18:41:18Z")

</div>

> [@DijaAngel](#):
>
> nofill() as well cause id like to comment them

Each shape like rect or ellipse has two colors:  
the outline and the fill color.

- For the outline (the lines) we use stroke(…);

- For the fill of the are we use fill(…)

To have no fill for the are, just the outline, we say `noFill()`, so the ellipse is hollow

OR we say `noStroke()` so we have no outline, just the area itself

---

<div class="post-metadata">

### Author: ![DijaAngel](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@DijaAngel](https://discourse.processing.org/u/DijaAngel)
#### Post date: [November 20, 2020, 6:57pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/13 "2020-11-20T18:57:02Z")

</div>

Yes but I wanted to comment and didn’t know how to put it in words but thanks for your reply!

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 20, 2020, 6:59pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/14 "2020-11-20T18:59:10Z")

</div>

Ah, okay, I am sorry.

Please tell me when you have more questions.

---

<div class="post-metadata">

### Author: ![DijaAngel](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@DijaAngel](https://discourse.processing.org/u/DijaAngel)
#### Post date: [November 20, 2020, 7:10pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/15 "2020-11-20T19:10:08Z")

</div>

No problem thanks for your help

---

<div class="post-metadata">

### Author: ![JoseMY](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josemy/32/2016_2.png) [@JoseMY](https://discourse.processing.org/u/JoseMY)
#### Post date: [November 24, 2020, 7:42am UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/16 "2020-11-24T07:42:09Z")

</div>

Hi!  
MouseX and MouseY are linear values. You need some “scalar” values like:  
GridSize=100;  
MX= int(MouseX/GridSize)\*GridSize;  
// (MX IS NOW A MULTIPLE OF 100)

Then use MX instead of MouseX, so you cant make an X on (51,51) and another one in (52,52).  
Also I suggest you to make a matrix with X and O’s and use it internally to calculate winner positions.

The rule I use to use is:  
For player X, For each cell, for each line  
Line has 2 X= Value is +16  
Line has 2 O= Value is +8  
Line has 1 X= Value is +4  
Line has 2 empty lines= Value is +1

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 26, 2020, 11:40am UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/17 "2020-11-26T11:40:45Z")

</div>

> [@JoseMY](#):
>
> The rule I use to use is:  
> For player X, For each cell, for each line  
> Line has 2 X= Value is +16  
> Line has 2 O= Value is +8  
> Line has 1 X= Value is +4  
> Line has 2 empty lines= Value is +1

In my understanding this is for the AI to decide which move to make. (when you play against the computer)

It assumes that the AI is X, so AI starts the game (because you wrote “For player X”).

I programmed this now, although I am not the OP. It was hard!

It’s fascinating, so thank you!

**Remarks**

I think you really have to **add** up the scores like you said, so it’s really the old value _plus_ 8 etc. for every move (and not just = 8). Is that correct?

When you say for example: “Line has 2 X”: you assume that the remaining field in that line is empty (that’s not always the case). We have to check this additionally. Is that correct?

Also, often there are different moves for X that score the same. I think when X begins, he should go in the middle (field 5). When he has the choice he should go to a corner. Is that correct?

Chrisir

---

<div class="post-metadata">

### Author: ![JoseMY](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josemy/32/2016_2.png) [@JoseMY](https://discourse.processing.org/u/JoseMY)
#### Post date: [November 26, 2020, 4:50pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/18 "2020-11-26T16:50:25Z")

</div>

_ **begin edit** _\_\_\_

Asking your question, the center square should sum 8 at the beginning of the game (4 empty lines). At this early stage, the corners will add up to 6 and the middle of the sides sould sum.up to 4:

646  
484  
646  
Then, X is at center.  
Scores for Y will be:  
202  
0X0  
202

So Y puts its mark in one of the corners.  
I think my original algorithm gave also negative values for some positions, but I don’t remember clearly.

\_\_\_\_\_\_\_\_\_ edit end \_\_\_\_\_\_\_\_\_\_\_\_

Of course, you can make another AI player for O, replacing all 'X’s with 'O’s in the algorithm I sent you.

I programmed AI tic-tac-toes in old-fashioned basic and in excel before. But I should confess I’m not good at playing it!

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 26, 2020, 6:01pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/19 "2020-11-26T18:01:31Z")

</div>

> [@JoseMY](#):
>
> 4 empty lines)

😉

An empty line was not part of your rule set.

😉

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 26, 2020, 6:02pm UTC](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516/20 "2020-11-26T18:02:43Z")

</div>

> [@JoseMY](#):
>
> Line has 2 empty lines

Or do you mean this?

I read this as „Line has 2 empty cells“

[Next page](https://discourse.processing.org/t/my-program-isnt-doing-what-i-want-it-to-do-x-and-o-game-tic-tac-toe/25516.md?page=2)
