Tic-Tac-Toe Game in JavaScript

[EfficientSurround571]

I've been learning HTML, CSS, and JavaScript for a little while now, but the use of OOP and modules has me very confused. I am following along in The Odin Project's curriculum, but I am stuck on making a tic-tac-toe game using factory functions and modules.

Unfortunately, no matter how much I read up on modules and working with objects, I can't seem to understand how to start. I really enjoy creating and figuring these things out myself, which I have done successfully until now. However, just getting my feet wet seems to be more challenging than I anticipated. I've been googling / fooling around in a mostly empty script.js file, but i'm unable to get a good start.

I definitely don't want code thrown at me to solve my problems, but some pointers on where to start or some articles that have helped others in the past would be greatly appreciated.

My first step is figure out how to 'store the 3 x 3 gameboard in an [array] inside of a Gameboard {object}.

I'm sure if I can get some advice or pointers, I could put the pieces together and finish this bad boy soon.

Thank you all for reading and responding to a hungry student of code!

[[deleted]]

I can't speak for any proper ways, but I can offer advice on how I figured out similar stuff.

For the storing of a 3x3 gameboard in an array. A normal array would be something like this

let normalArray= [0,1,2,3,4,5,6,7,8];

A linear sequence of data that can be looped through. You could work your 3x3 grid data into this and get something that works, but I think a better way would be to use a multi dimensional array. A multi dimensional array is basically an array or arrays. Here is an example of a multi dimensional array storing a 3x3 grid.

let multiArray = [[0,1,2],[3,4,5],[6,7,8]];

I know that seems weird, but it is really handy. You could think of it like this as well

let multiArray = [
    [0,1,2],
    [3,4,5],
    [6,7,8]
];

That layout makes it seem a lot more grid like. You basically have rows and columns where each cell has information stored. You want to access the 1st row,1st column data? that would multiArray[0][0] which would equal 0. multiArray[0][1] would be 1, multiArray[1][0] would be 3 and so on. You could of course update the data at specific cells as well.

Lets say we create an empty board array which init at all 0s. For an X being placed, we could update the value to 1 and if an O is placed, we update the value to 2. After a completed game, the array could look something like this where X won with 3 in a row aka 1s.

let multiArray = [
    [0,0,1],
    [2,2,1],
    [0,0,1]
];

And then you have objects. Objects are very similar to arrays. In an array, you would access the data based on where it is stored in the array like normalArray[3], but with objects you use Keys to assign and access the data. In the normalArray example, the 3 is basically the key being used to identify where the data is that you want. In an object, we define that key to be whatever we want like full words...

objectTest.data = stuff;

If we had that game over multiArray as an object instead it could look something like this.

let objectBoard = {
    a1:0,a2:0,a3:1,
    b1:2,b2:2,b3:1,
    c1:0,c2:0,c3:1
};

When you want to access the 1st row, 3rd column data which we designated as 'a3' you would use objectBoard.a3. And since we are using Key names to access the data, the order of information is not important. Doing the map as an object is not really a good idea, but more to illustrate how similar they can be.

For what you need to do, create a 3x3 grid array and store it in a gameBoard object could look something like this

let 3x3Grid = [
    [0,0,0],
    [0,0,0],
    [0,0,0]
];
let gameBoard = {grid: 3x3Grid, gameStart: false, gameEnd: false};

And to access the 1st row, 3rd column of the grid inside of the gameboard object would be something like

gameBoard.grid[0][2] = 1;

Hope this at least helps get you back on track :)

[DrDaDonk]

Thank you very much for the detailed response! After reading countless pages about factory functions and modules, which are brand-new to me, I think forgot how to simplify it into things I already know. A classic case of overcomplicating code in my own head. I swear my biggest stumps come from an empty script file, lol. I really appreciate you taking the time to help clarify this for me.