# I don't know how to make the shapes appear alternately. Tic tac toe

I program tic-tac-toe but I don’t know how to make the shapes appear alternately. that is:
the player has bet X is the next time he clicks on a field, O will appear
it’s about the mouseClicked function. the one at the end of the code
this is code:

``````var symbol = function(player, poleX,poleY){

if(player === 0){

if(poleX === 1 && poleY === 1){
stroke(224, 34, 66);
ellipse(100,100,180,180);
print("we succeeded in executing the draw command in field 1.1");
}
else if(poleX === 2 && poleY === 1){
stroke(224, 34, 66);
ellipse(300,100,180,180);
print("we succeeded in executing the draw command in field 2.1");
}
else if(poleX === 3 && poleY === 1){
stroke(224, 34, 66);
ellipse(500,100,180,180);
print("we succeeded in executing the draw command in field 3.1");
}
if(poleX === 1 && poleY === 2){
stroke(224, 34, 66);
ellipse(100,300,180,180);
print("we succeeded in executing the draw command in field 1.2");
}
if(poleX === 2 && poleY === 2){
stroke(224, 34, 66);
ellipse(300,300,180,180);
print("we succeeded in executing the draw command in field 2.2");
}
if(poleX === 3 && poleY === 2){
stroke(224, 34, 66);
ellipse(500,300,180,180);
print("we succeeded in executing the draw command in field 3.2");
}
if(poleX === 1 && poleY === 3){
stroke(224, 34, 66);
ellipse(100,500,180,180);
print("we succeeded in executing the draw command in field 1.3");
}
if(poleX === 2 && poleY === 3){
stroke(224, 34, 66);
ellipse(300,500,180,180);
print("we succeeded in executing the draw command in field 2.3");
}
if(poleX === 3 && poleY === 3){
stroke(224, 34, 66);
ellipse(500,500,180,180);
print("we succeeded in executing the draw command in field 3.3");
}
else if(poleX >3 || poleX <0 || poleY >3 || poleY <0 ){
print("I can't draw the X in pole " + poleX + "," + poleY +  " . The number is too big or too small");
}
}
else if(player === 1){
if(poleX === 1 && poleY === 1){
stroke(43, 133, 39);
line(40,35,170,160);
line(40,170,170,40);
print("we succeeded in executing the draw command in field 1.1");
}
else if(poleX === 2 && poleY === 1){
stroke(43, 133, 39);
line(240,35,370,170);
line(220,170,370,40);
print("we succeeded in executing the draw command in field 2.1");
}
else if(poleX === 3 && poleY === 1){
stroke(43, 133, 39);
line(440,35,570,170);
line(420,170,570,40);
print("we succeeded in executing the draw command in field 3.1");
}
if(poleX === 1 && poleY === 2){
stroke(43, 133, 39);
line(40,235,170,360);
line(40,370,170,240);
print("we succeeded in executing the draw command in field 1.2");
}
if(poleX === 2 && poleY === 2){
stroke(43, 133, 39);
line(240,235,370,360);
line(240,370,370,240);
print("we succeeded in executing the draw command in field 2.2");
}
if(poleX === 3 && poleY === 2){
stroke(43, 133, 39);
line(440,235,570,360);
line(440,370,570,240);
print("we succeeded in executing the draw command in field 3.2");
}
if(poleX === 1 && poleY === 3){
stroke(43, 133, 39);
line(40,435,170,560);
line(40,570,170,440);
print("we succeeded in executing the draw command in field 1.3");
}
if(poleX === 2 && poleY === 3){
stroke(43, 133, 39);
line(240,435,370,560);
line(240,570,370,440);
print("we succeeded in executing the draw command in field 2.3");
}
if(poleX === 3 && poleY === 3){
stroke(43, 133, 39);
line(440,435,570,560);
line(440,570,570,440);
print("we succeeded in executing the draw command in field 3.3");
}
else if(poleX >3 || poleX <0 || poleY >3 || poleY <0 ){
print("I can't draw the X in pole " + poleX + "," + poleY +  " . The number is too big or too small");
}
}
};
function setup() {
createCanvas(800, 800);

strokeWeight(8);

var board = function(boardType){
if(boardType === 0){
stroke(37, 34, 224);
line(1,200,599,200);
line(1,400,599,400);

line(200,1,200,599);
line(400,1,400,599);
}
};

board(0);

}
function mouseClicked() {
var currentPlayer = 0;

if(currentPlayer === 0 ){

if(mouseY<200){
if(mouseX <200){
symbol(0,1,1);
}
if(mouseX <400 && mouseX > 200){
symbol(0,2,1);
}
if(mouseX <600 && mouseX > 400){
symbol(0,3,1);
}

}
else if(mouseY<400){
if(mouseX <200){
symbol(0,1,2);
}
if(mouseX <400 && mouseX > 200){
symbol(0,2,2);
}
if(mouseX <600 && mouseX > 400){
symbol(0,3,2);
}

}
else if(mouseY<600){
if(mouseX <200){
symbol(0,1,3);
}
if(mouseX <400 && mouseX > 200){
symbol(0,2,3);
}
if(mouseX <600 && mouseX > 400){
symbol(0,3,3);
}

}
}
if(currentPlayer ===1){

if(mouseY<200){
if(mouseX <200){
symbol(1,1,1);
}
if(mouseX <400 && mouseX > 200){
symbol(1,2,1);
}
if(mouseX <600 && mouseX > 400){
symbol(1,3,1);
}
}
else if(mouseY<400){
if(mouseX <200){
symbol(1,1,2);
}
if(mouseX <400 && mouseX > 200){
symbol(1,2,2);
}
if(mouseX <600 && mouseX > 400){
symbol(1,3,2);
}

}
else if(mouseY<600){
if(mouseX <200){
symbol(1,1,3);
}
if(mouseX <400 && mouseX > 200){
symbol(1,2,3);
}
if(mouseX <600 && mouseX > 400){
symbol(1,3,3);
}

}
}
}
``````

when we look at this line in the function, player tells us whose turn it is (in the function symbol).

It can be 0 or 1

What to do

currentPlayer also does tell us this, so after each move (with currentPlayer === 1) say `currentPlayer =0;` and vice versa

Remarks (also to do)

also: This line `var currentPlayer = 0;` must be OUTSIDE mouseClicked()
(meaning the variable currentPlayer has a global scope and is not resetted to 0 at the start of mouseClicked())

• or better say var currentPlayer = 1; since it is X who starts the game (not ‘O’)

And: you want else if in this line: ` } else if (currentPlayer === 1) {`

Remark

Of course you can calculate the position

``````var currentPlayer = 1;

var symbol = function (player, poleX, poleY) {
if (player === 0) {
stroke(224, 34, 66);
ellipse(100 + (poleX - 1) * 200, 100 + (poleY - 1) * 200, 180, 180);
print(
player,
" succeeded in executing the draw command in field ",
poleX,
poleY
);
player = 1;
} else if (player === 1) {
stroke(43, 133, 39);
var x1 = 100 + (poleX - 1) * 200;
var y1 = 100 + (poleY - 1) * 200;
line(x1 - 65, y1 - 65, x1 + 65, y1 + 65);
line(x1 - 65, y1 + 65, x1 + 65, y1 - 65);
print(
player,
" succeeded in executing the draw command in field ",
poleX,
poleY
);
player = 0;
}
};

//-------------------------------------------------------------------------------
``````

[EDITED]

1 Like

Thank you for your help. The code helped a lot and we managed to achieve the goal after a little editing

1 Like