Tic-Tac-OOP

Hi there, if you’re like me, you might have struggled with the idea behind object-oriented programming using JavaScript.

I had no idea what I was doing! And while reading up about OOP helps, for me, the thing that really solidifies a new concept in my head is to build something. So, today we’re going to build Tic Tac Toe.

First Things First

First, let’s think about various classes we might need to make this simple game. Well, if we break down the components of a game there’s a board, players, and the actual game itself.

JavaScript is a prototype based language. This means that instead of writing classes and having objects instantited from the class, you directly write objects.

Let’s get started with building out Tic Tac Toe and hopefully you’ll be able to see some differences.

Ready Player One

So Tic Tac Toe generally has two players, X and O. We can achieve this by creating a Player object.

What types of things do players have? Players have names, if they are an X or an O, and maybe they have how many games they’ve won. There are few ways to approach this.

You can make an object literal:

playerOne = { name: 'Wonder Woman', marker: 'X' };

Use the constructor pattern:

var Player = function(name, marker) {
this.name   = name;
this.marker = marker;
}

var playerOne = new Player('Wonder Woman', 'X');

Or we can add each method and property directly to the prototype:

function Player () {
Player.prototype.name   = 'Wonder Woman';
Player.prototype.marker = 'X';
};

var playerOne = new Player();

Now you can see updating properties on the last one might not be a great experience. I don’t really want all my instances of Player to be Wonder Woman.

I like to set my properties using the constructor method (so they’re easy to update when I create new instances) and like to add methods by adding them to the object’s prototype. While you can declare functions when you use the constructor pattern, what ends up happening is that you recreate that method every time you declare a new instance of the object. Putting methods on the prototype has you declaring a method only once but allows you access to it. People smarter than me say it helps keep memory usage lower.

Anyway, back to the task at hand. We’ve made a player object and an instance of a player. Player One (aka Wonder Woman) is ready to go! But sadly Wonder Woman has nowhere to go.

Building the Game

So what else do you need in a tic tac toe game? Perhaps a board? Some spaces to populate that board? A game? These all sound great to me!

A game probably needs to keep track of who is playing and what board they’re playing on.

A board might keep track of the various spaces.

Spaces probably need to know where they are located.

var Game = function(playerOne, playerTwo) {
this.playerOne = playerOne;
this.playerTwo = playerTwo;
this.board = new Board();
this.currentPlayer = playerOne;
};

var Board = function() {
this.spaces = [];
for(var x = 0; x < 3; x++){
   for(var y = 0; y < 3; y++){
     this.spaces.push(new Space(x, y));
   }
}
};

var Space = function(xCoord, yCoord) {
this.xCoord = xCoord;
this.yCoord = yCoord;
};

Ok, so we have our objects. We’ve put some properties on those objects . Now it’s time for some functionality. There are some basic things I want to be able to do with tic tac toe. So let’s say I’m Wonder Woman. What are the kinds of questions I’m going to ask myself to play this game?

1. Is it my turn?
2. Can I use this space?
3. Did I win?

These questions are going to be the basic methods we’re going to add to our awesome objects.

First up: Is it my turn?

So we need a way to keep track of turns. Easy Peasy.

Game.prototype = {
switchPlayer: function(){
   if( this.turn === 2 ) {
     this.turn = 1;
     this.currentPlayer = this.playerOne;
     return this.playerTwo;
   } else {
     this.turn = 2;
     this.currentPlayer = this.playerTwo;
     return this.playerOne;
   }
}
}

Now we need to know, can a player even use that space and also who is occupying that space?

Space.prototype = {
markSpace: function(player){
   if( !this.marked ) {
     this.marked = player;
     return true;
   }
}
}

Did the player win?

Board.prototype = {
winner: function(player){
   var coords = [];
   this.spaces.map(function(space){
     if(space.marked === player) {
        coords.push({x: space.xCoord, y: space.yCoord});
     }
   });
   if(checkThree(coords)) return true;
   if(checkDiagonal(coords)) return true;
}
}

var checkThree = function(coords){
// winning game logic here!
}

var checkDiagonal = function(coords) {
// more winning game logic here! or you can combine the two into one function
}

I’ll let you come up with the winning game logic. I put my logic in a function that my winner method called.

If you’d like to check out this game in action, you can go here.

Thanks for joining me on this exciting journey. If you end up making a sweet tic tac toe game, I’d love to see it! Tweet at me: @lizzletom

If you’re interested in learning more about the world of OOP in JavaScript check out our Introduction to Object-Oriented Programming using Python, JavaScript, and C#, a perfect jumping point to using OOP for any situation.

About the author

Liz Tom is a Software Developer at Pop Art, Inc in Portland, OR.  Liz’s passion for full stack development and digital media makes her a natural fit at Pop Art.  When she’s not in the office, you can find Liz attempting parkour and going to check out interactive displays at museums.