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

p5.js Coding Questions
1

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);
   }
    
 }
   }
}
2

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
3

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

1 Like