TIC TAC TOE GAME

  @author Piero Orderique

  @date 09 Jan 2021

*/

​

let grid = [

  ['','',''],

  ['','',''],

  ['','',''],

];

​

let players;

let currentPlayer;

let winningPlayer;

​

let gameOn = true

​

function setup() {

  createCanvas(400, 400);

  players = ['X', 'O'];

  currentIndex = int(random(0, 2)); // select random player

}

​

function draw() {

  background(245);

  if(gameOn){showGrid();}

  else{showResetScreen()}

}

​

function gameWon(){

  // check rows

  for(row = 0; row < grid.length; row++){

    let xsum = 0

    let osum = 0

    for(col = 0; col < grid[0].length; col++){

      if(grid[row][col] == "X"){xsum += 1}

      if(grid[row][col] == "O"){osum += 1}

    }

    if(xsum == 3){return true}

    if(osum == 3){return true}

  }

  // check rows

  for(col = 0; col < grid[0].length; col++){

    let xsum = 0

    let osum = 0

    for(row = 0; row < grid.length; row++){

      if(grid[row][col] == "X"){xsum += 1}

      if(grid[row][col] == "O"){osum += 1}

    }

    if(xsum == 3){return true}

    if(osum == 3){return true}

  }

  // check diagonals

  let x1sum = 0

  let o1sum = 0

  let x2sum = 0

  let o2sum = 0

  for(i = 0; i < grid.length; i++){

    if(grid[i][i] == "X"){x1sum += 1}

    if(grid[i][i] == "O"){o1sum += 1}

    if(grid[i][grid.length - 1 - i] == "X"){x2sum += 1}

    if(grid[i][grid.length - 1 - i] == "O"){o2sum += 1}

  }

  if(x1sum == 3){return true}

  if(o1sum == 3){return true}

  if(x2sum == 3){return true}

  if(o2sum == 3){return true}

  // if still no return, check to see if board is full

  let nullcount = 0

  for(row = 0; row < grid.length; row++){

    for(col = 0; col < grid[0].length; col++){

      if(grid[row][col] == ''){nullcount += 1}

    }

  }

  if(nullcount == 0){return null}

  return false

}

​

function showGrid() {

  // show gridlines

  strokeWeight(15)

  for(i = 1; i < grid.length; i++){

    let x = i*width/grid[0].length 

    line(x, 0, x, height)

  }

  for(i = 1; i < grid.length; i++){

    let y = i*height/grid[0].length 

    line(0, y, width, y)

  }

  // iterate through grid and print contents

  textSize(width/7)

  textStyle(BOLD)

  textAlign(CENTER)

  for(row = 0; row < grid.length; row++){

    for(col = 0; col < grid[0].length; col++){

      // stagger the coordinates

      let x = int(width*col/grid.length) + width/(2*grid.length)

      let y = int(height*row/grid[0].length) + height/(2*grid[0].length) + height/30

      // show the text now

      text(grid[row][col], x, y);

    }

  }

}

​

function showResetScreen(){

  textAlign(CENTER)

  textSize(width/15)

  text("GAME OVER\nWinner is Player " + winningPlayer, width/2, height/3)

  textSize(width/20)

  text("Press Spacebar to play again", width/2, height/1.5)

}

​

function resetGame(){

  gameOn = true

  // reset grid

  for(row = 0; row < grid.length; row++){

    for(col = 0; col < grid[0].length; col++){

      grid[row][col] = ''

    }

  }

  currentIndex = int(random(0, 2)); // select random player

}

​

function mouseClicked(){

  if(gameOn){

    // map where player clicks to an index in the grid

    let row = int(map(mouseY, 0, height, 0, grid[0].length))

    let col = int(map(mouseX, 0, width, 0, grid.length))

​

    // place player's symbol there IF empty and update current player

    if(grid[row][col] != ''){

      console.log("INVALID MOVE")

    } else {

      grid[row][col] = players[currentIndex]

    }

    // quit game IF there is a winner

    gameOver = gameWon()

    if(gameOver == null){

      winningPlayer = "no one"

      gameOn = false

      return;

    }

    gameOn = !gameOver

    if(!gameOn){winningPlayer = players[currentIndex]}

    else{currentIndex = (currentIndex + 1) % players.length}

  }

}

​

function keyPressed(){

  // reset ONLY if game is over and spacebar pressed (key code = 32)

  if(keyCode == 32 && !gameOn){

    resetGame()

  }

}