how could I map the divs to a two dimensional array tictactoe game

Question

I have a Tic-tac-toe game that I would like to implement using 2 dimensional array. Right now I'm using a simple array and it works fine. But I think it would be easier to implement using 2 dimensional array, so I could take advantage of for loops when checking for winners and other things.

My problem is I can find a way to map from a div clicked to an index in the two dim array. For example if the user clicks on the 3rd div of second row on the UI, how do I map that into the 2Darray[1][2] (the second subarray index 2)? Thanks.

Hope I explained this well. For those interested in looking at the code here's my codepen of tic-tac-toe: https://codepen.io/zentech/pen/xLRzGr

var xPlayer = "X";
var oPlayer = "O";
var turn = "X";
var board = new Array(9);
var message = document.getElementById("message");

$(document).ready(function() {
  $(".square").click(function() {
    var sqrId = $(this).attr("id");
    playerMove(sqrId);
    if (checkWinners()) {
      message.innerHTML = "Message: " + turn + " Wins!";
      return;
    }
    if (checkBoard()) {
      message.innerTHML = "Message: " + turn + " move";
    } else {
      message.innerHTML = "Message: It's a draw!";
    }
    turn = (turn == 'X') ? 'O' : 'X';
  });

  $(".resetGame").click(function() {
    $(".square").text("");
    $("#message").text("Message: ");
    turn = "X";
    board = new Array(9);
  });
});

//getting user move and output to board
function playerMove(sqrId) {
  console.log("player move: " + $('#' + sqrId).attr("id") + " " + turn);
  if ($('#' + sqrId).text() == "") {
    $('#' + sqrId).text(turn);
    board[sqrId] = turn;
  } else {
    console.log("error!");
    message.innerHTML = "Message: Wrong move!..."
    return;
  }
}

//checking for winning combinations
function checkWinners() {
  console.log(board[1]);
  //checking rows
  if (board[0] != undefined && board[0] == board[1] && board[1] == board[2]) {
    return true;
  } else if (board[3] != undefined && board[3] == board[4] && board[4] == board[5]) {
    return true;
  } else if (board[6] != undefined && board[6] == board[7] && board[7] == board[8]) {
    return true;
  }

  //checking columns
  else if (board[0] != undefined && board[0] == board[3] && board[6] == board[8]) {
    return true;
  } else if (board[1] != undefined && board[1] == board[4] && board[4] == board[7]) {
    return true;
  } else if (board[2] != undefined && board[2] == board[5] && board[5] == board[8]) {
    return true;
  }

  //checking across
  else if (board[0] != undefined && board[0] == board[4] && board[4] == board[8]) {
    return true;
  } else if (board[2] != undefined && board[2] == board[4] && board[4] == board[6]) {
    return true;
  } else {
    return false;
  }
}

/* checking if there's more room to play, if not 
   then it's a draw'*/
function checkBoard() {
  for (var i = 0; i < board.length; i++) {
    // console.log(board[i]);
    if (board[i] == undefined) {
      return true;
    }
  }
  return false;
}

body {
  background-color: #999;
  font-family: serif, verdana;
}

h1 {
  font-size: 50px;
}

h2 {
  margin-bottom: 30px;
}

.container {
  margin: 0 auto;
  text-align: center;
}

.row>div {
  margin: 2px;
  border: solid 1px black;
  display: inline-block;
  font-size: 35px;
  width: 50px;
  height: 50px;
  text-align: center;
  padding: 0px;
  vertical-align: top;
  line-height: 50px;
}

#message {
  /* display: inline-block; */
  text-align: center;
}



  
    TicTacToe
    You're playing against the computer!
  
  
    
      
      
      
    
    
      
      
      
    
    
      
      
      
    
  
  
    Message:
    
      Reset Game

how could I map the divs to a two dimensional array tictactoe game

3 Answers