patternjavascriptMinor
OO design for Tic Tac Toe program
Viewed 0 times
toedesignticprogramtacfor
Problem
I am practicing object oriented design and have taken Tic Tac Toe as an example. I have written first all the requirements and then started writing code. I would like to get it reviewed so that I can improve my skill further. Please provide suggestions.
I have placed code at this GitHub repo.
Square.js
Board.js
Player.js
tttgame.js
```
//The game class which governs the play
function TTTGame(squares){
this.board = new Board(squares);
this.board.buildBoard();
this.players = [];
this.players[0] = new Player('John','X');
I have placed code at this GitHub repo.
Square.js
//Square class
function Square(){
this.symbol = "";
this.isOccupied = false;
}
//Based on player turn set symbols
Square.prototype.setSymbol = function(value){
if(value !== 'X' && value !== 'O'){
return 'Please enter X or O';
}else if(this.isOccupied){
return 'This square is already filler'
}else{
this.symbol = value;
this.isOccupied = true;
}
};
Square.prototype.getSymbol = function(){
return this.symbol;
};Board.js
//Board Class
function Board(sqaures){
this.squares = sqaures;
this.grid = [];
this.filledSquare = 0;
}
//Builds board based on number of squares
Board.prototype.buildBoard = function(){
var i,j;
for(i = 0; i < this.squares; i++){
this.grid[i] = [];
for(j = 0; j < this.squares; j++){
this.grid[i][j] = new Square();
}
}
};
//Updates board on each players turn
Board.prototype.update = function(row, column, symbol){
this.grid[row][column].setSymbol(symbol);
this.filledSquare++;
};
//Show the current state of board
Board.prototype.displayBoard = function(){
var i, j,brd = "";
for(i = 0; i < this.squares; i++){
for(j = 0; j < this.squares; j++){
brd += this.grid[i][j].getSymbol() +' - ';
}
brd += '\n';
}
console.log(brd);
};Player.js
//Player Class
function Player(name,symbol){
this.name = name;
this.symbol = symbol;
}tttgame.js
```
//The game class which governs the play
function TTTGame(squares){
this.board = new Board(squares);
this.board.buildBoard();
this.players = [];
this.players[0] = new Player('John','X');
Solution
Overall this looks pretty good. Just a couple of things come to mind:
Square.js
TTTGame.js
General Comments
The name
Vs:
No explanation necessary for the second set of class names.
All in all, this looks pretty good.
Square.js
- The
setSymbolmethod should throw errors instead of returning strings, especially since I don't see any place where those strings are handled in a manner allowing the user to correct their mistake.
- The error message when the square is occupied just needs a slight grammatical correction:
This square is already filled(filled instead of filler)
TTTGame.js
- Create all methods on the prototype. You aren't using any private function scope variables, so putting the methods on the prototype will be more efficient.
General Comments
The name
TTTGame is kind of obtuse. I know it is probably an abbreviation for "Tick Tack Toe Game" but I think a more descriptive name is in order. All around, throwing these classes into a namespace would be useful. Consider the semantic differences between these two sets of classes:Square(is it a tick tack toe square or a two dimensional representation of a plane in mathematics)
Board(Diving board? Game board? Discussion board?)
TTTGame(What does TTT stand for?)
Vs:
TickTackToe.Square
TickTackToe.Board
TickTackToe.Game
No explanation necessary for the second set of class names.
All in all, this looks pretty good.
Context
StackExchange Code Review Q#56325, answer score: 4
Revisions (0)
No revisions yet.