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
Whose turn is it?
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)
How to draw the X
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)
Ok thank you so much I will try it
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
The X and O
It would look funny if each cross (X) and O would be slightly different.
See 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
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
For Arrays see https://www.processing.org/tutorials/arrays/
Remember that arrays start with 0. So
x[0], y[0] on the screen (e.g. ellipse(x[0], y[0], 50, 50);)x[1], y[1] on the screen and so onAnd then check the distance of the center of the field to the mouse (command dist(), see reference: 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
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?
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
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-50, mouseY-50 is the upper left corner where we start the line like this \ leading down to the right.I hope this helps.
Warm regards,
Chrisir
thank you so much for your help
but what does char player=‘X’ mean
and the nofill() as well cause id like to comment them
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?
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
Yes but I wanted to comment and didn’t know how to put it in words but thanks for your reply!
Ah, okay, I am sorry.
Please tell me when you have more questions.
No problem thanks for your help
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
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
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!
An empty line was not part of your rule set.
Or do you mean this?
I read this as „Line has 2 empty cells“