Im making a tictactoe game. It's not the traditional one which the board is only 3x3, but infinity in size
Im trying to convert an array of a board that looks like this:
[[0,0,0],[0,0,0],[0,0,0]]
into a html board. basically each "0" of the array is a tile.
toBoard([[0,0,0],[0,0,0],[0,0,0]])
function toBoard(arr) {
var newBoard = document.createElement("table");
for (var a = 0; a < arr.length; a++) {
var row = document.createElement("tr");
for (var b = 0; b < arr[a].length; b++) {
var tile = document.createElement('th')
var sqr = document.createElement("img");
sqr.src = "client/emptySquare.svg";
sqr.id = `${a} ${b}`;
sqr.onclick = () => tileClickHandler(sqr.id);
tile.appendChild(sqr);
row.appendChild(tile)
}
newBoard.appendChild(row)
}
return newBoard;
}
I tried to use a table, each cell of the table will have an image element (they will have a onclick function so the game knows which part of the table the player clicked) but it doesn't work.
The table looks like this:
As you can see the board has ugly unwanted spacing. I tried to set border-spacing to 0px but it still doesn't work. How to fix this issue? Or is there a better and more efficient way than table and images?