patternjavascriptMinor
Last dot Standing Puzzle Game
Viewed 0 times
laststandingdotgamepuzzle
Problem
The game is a puzzle game made up of a grid of cells represented by html divs. Gameplay is as follows:
I usually code in PHP so most of this was done with Google's help. How can it be improved to fit JavaScript standards and best practices?
```
var gameArea = $('#game-area');
function Cell(row, col) {
this.row = row;
this.col = col;
this.element = null;
Cell.filledClass = 'filled';
Cell.selectedClass = 'selected';
Cell.itemClass = 'item';
this.fill = function() {
this.element.addClass(Cell.filledClass);
return this;
};
this.empty = function() {
this.element.removeClass(Cell.filledClass);
return this;
};
this.isFilled = function() {
return this.element.hasClass(Cell.filledClass);
}
this.select = function() {
this.element.addClass(Cell.selectedClass);
return this;
};
this.unselect = function() {
this.element.removeClass(Cell.selectedClass);
return this;
};
this.isSelected = function() {
return this.element.hasClass(Cell.selectedClass);
}
this.init = function() {
this.element = $('')
.data({
'row': this.row,
'col': this.col
})
.attr({
'id': 'item-' + this.row + '-' + this.col,
'class': Cell.itemClass + ' ' + Cell.filledClass
});
gameArea.append(this.element);
return this;
};
}
function Game(rows, cols) {
this.rows = rows;
this.cols = cols;
this.cells = [];
this.currentCell = null;
this.init = function() {
gameArea.html('');
for (var row = 1; row ');
}
this.getCell(Math.ceil(Math.random() * this.rows)
- On starting a new game, the number of rows and columns is selected from a form.
- The grid is created with all but one of the cells being initially filled.
- A filled cell is selected by clicking and moved to the empty cell while "jumping" over another filled cell.
- The cell that was jumped over is now emptied.
- The objective of the game is to remain with only one cell filled.
I usually code in PHP so most of this was done with Google's help. How can it be improved to fit JavaScript standards and best practices?
```
var gameArea = $('#game-area');
function Cell(row, col) {
this.row = row;
this.col = col;
this.element = null;
Cell.filledClass = 'filled';
Cell.selectedClass = 'selected';
Cell.itemClass = 'item';
this.fill = function() {
this.element.addClass(Cell.filledClass);
return this;
};
this.empty = function() {
this.element.removeClass(Cell.filledClass);
return this;
};
this.isFilled = function() {
return this.element.hasClass(Cell.filledClass);
}
this.select = function() {
this.element.addClass(Cell.selectedClass);
return this;
};
this.unselect = function() {
this.element.removeClass(Cell.selectedClass);
return this;
};
this.isSelected = function() {
return this.element.hasClass(Cell.selectedClass);
}
this.init = function() {
this.element = $('')
.data({
'row': this.row,
'col': this.col
})
.attr({
'id': 'item-' + this.row + '-' + this.col,
'class': Cell.itemClass + ' ' + Cell.filledClass
});
gameArea.append(this.element);
return this;
};
}
function Game(rows, cols) {
this.rows = rows;
this.cols = cols;
this.cells = [];
this.currentCell = null;
this.init = function() {
gameArea.html('');
for (var row = 1; row ');
}
this.getCell(Math.ceil(Math.random() * this.rows)
Solution
Good clean code with good object structure; you made a good transition from php objects to js. There are a few tiny things though to do with consistency you might want to clean up.
You don't have semi-colons after all of your object functions. JavaScript isn't all that picky about them but good practice is to be consistent in whichever method you use. This is especially important in js since not all browsers parse in the same way. By being consistent you'll ensure your code either works or it doesn't, and you won't have to track down elusive bugs.
You don't always declare your 'for' loop variables using the 'var' keyword. Again not critical but it would be best to be consistent.
You don't have semi-colons after all of your object functions. JavaScript isn't all that picky about them but good practice is to be consistent in whichever method you use. This is especially important in js since not all browsers parse in the same way. By being consistent you'll ensure your code either works or it doesn't, and you won't have to track down elusive bugs.
You don't always declare your 'for' loop variables using the 'var' keyword. Again not critical but it would be best to be consistent.
Context
StackExchange Code Review Q#121115, answer score: 2
Revisions (0)
No revisions yet.