p5.js Web Editor | Tic Tac Toe

xxxxxxxxxx
let size;
let grid = [];
let gridCheck = [];
let turn;
​
function setup() {
  createCanvas(400, 400);
  size = width / 3;
  for (let y = 0; y < 3; y++) {
    for (let x = 0; x < 3; x++) {
      grid.push(createVector(x, y, {
        r: 220,
        g: 220,
        b: 220
      }));
      gridCheck.push(0);
    }
  }
  turn = true;
  //console.log(gridCheck);
}
​
function mousePressed() {
  setX(mouseX, mouseY, turn);
  checkWin();
  if (turn) {
    turn = false;
  } else {
    turn = true;
  }
}
​
function draw() {
  background(220);
  drawTictactoeTable();
}
​
function checkWin() {
  let greens = [];
  let reds = [];
  for (let i = 0; i < gridCheck.length; i++) {
    if (gridCheck[i] == 0 || gridCheck[i] == 1) {
      greens[i] = 0;
    } else {
      greens[i] = 1;
    }
  }
  for (let i = 0; i < gridCheck.length; i++) {
    reds[i] = gridCheck[i] % 2;
  }
  
  //console.log(gridCheck);
  //console.log(reds);
  //console.log(greens);
  //console.log();
​
  for (let i = 0; i < winCond.length; i++) {
    let won = 0;
    if (turn) {
      for (let j = 0; j < reds.length; j++) {
        if (reds[j] == winCond[i][j] && reds[j] == 1) {
          won++;
        }
      }
    } else {
      for (let j = 0; j < greens.length; j++) {
        if (greens[j] == winCond[i][j] && greens[j] == 1)  {
          won++;
        }
      }
    }
    if (won >= 3) {
      //console.log(turn);
      if (turn) {
        console.log("Red Player Wins");
      } else {
        console.log("Green Player Wins");
      }
    } else {
      won = 0;
    }
  }
​
}
​
function setX(x, y) {
  if (x > 266) {
    x = 2;
  } else if (x > 133) {
    x = 1;
  } else {
    x = 0;
  }
​
  if (y > 266) {
    y = 2;
  } else if (y > 133) {
    y = 1
  } else {
    y = 0;
  }
​
  for (let i = 0; i < grid.length; i++) {
    if (grid[i].x == x && grid[i].y == y) {
      noStroke();
      if (turn) {
        grid[i].z = {
          r: 255,
          g: 0,
          b: 60
        };
        gridCheck[i] = 1;
      } else {
        grid[i].z = {
          r: 0,
          g: 155,
          b: 60
        };
        gridCheck[i] = 2;
      }
      //console.log(gridCheck);
    }
  }
}
​
​
function drawTictactoeTable() {
  stroke(0);
  strokeWeight(2);
  line(size, 10, size, height - 10);
  line(size * 2, 10, size * 2, height - 10);
  line(10, size, width - 10, size);
  line(10, size * 2, width - 10, size * 2);
​
  noStroke();
  for (let i = 0; i < grid.length; i++) {
    fill(grid[i].z.r, grid[i].z.g, grid[i].z.b);
    rect(grid[i].x * size + 10, grid[i].y * size + 10, 113, 113);
  }
}
​
let winCond = [
  [1, 1, 1,
    0, 0, 0,
    0, 0, 0
  ],
  [0, 0, 0,
    1, 1, 1,
    0, 0, 0
  ],
  [0, 0, 0,
    0, 0, 0,
    1, 1, 1
  ],
  [1, 0, 0,
    1, 0, 0,
    1, 0, 0
  ],
  [0, 1, 0,
    0, 1, 0,
    0, 1, 0
  ],
  [0, 0, 1,
    0, 0, 1,
    0, 0, 1
  ],
  [1, 0, 0,
    0, 1, 0,
    0, 0, 1
  ],
  [0, 0, 1,
    0, 1, 0,
    1, 0, 0
  ]
];
Cookies

Sketch Files

Console

Preview
