patternjavascriptMinor
Minesweeper clone in jQuery
Viewed 0 times
jquerycloneminesweeper
Problem
This was my first attempt at writing object-oriented JavaScript. It's a Minesweeper clone in jQuery. I thought I had done an OK job, but I've just received some feedback stating that it wasn't written in an object-oriented manner. I don't expect anyone to read this line for line. I'm just looking for general feedback.
```
$(document).ready(function() {
var Minesweeper = function() {
var self = this;
var defaultOptions = {
boardSize: [8, 8],
difficulty: 'easy'
}
// initialize our cell object
var cells;
this.init = function(options) {
// empty the cell object if it has anything in it
cells = [];
if (typeof options == 'object') {
options = $.extend(defaultOptions, options);
} else {
options = defaultOptions;
}
self.difficulty = options.difficulty;
// setup a new game
self.newGame(options.boardSize);
};
this.newGame = function(boardSize) {
//remove the old board if there is one, detach event listeners as well
$('#minesweeper').empty();
var x = boardSize[0];
var y = boardSize[1];
self.width = x;
//setup our new board
self.addUI();
self.buildGrid(x, y);
}
this.addUI = function() {
var board = $('#minesweeper');
var checkMe = $('').attr({
id: 'check-me',
class: 'happy-smiley'
});
var mineCount = $('').attr('id', 'mine-count');
var timer = $('').attr('id', 'timer').html('0');
var ui = $('').attr('id', 'ui');
ui.append(mineCount);
ui.append(timer);
```
$(document).ready(function() {
var Minesweeper = function() {
var self = this;
var defaultOptions = {
boardSize: [8, 8],
difficulty: 'easy'
}
// initialize our cell object
var cells;
this.init = function(options) {
// empty the cell object if it has anything in it
cells = [];
if (typeof options == 'object') {
options = $.extend(defaultOptions, options);
} else {
options = defaultOptions;
}
self.difficulty = options.difficulty;
// setup a new game
self.newGame(options.boardSize);
};
this.newGame = function(boardSize) {
//remove the old board if there is one, detach event listeners as well
$('#minesweeper').empty();
var x = boardSize[0];
var y = boardSize[1];
self.width = x;
//setup our new board
self.addUI();
self.buildGrid(x, y);
}
this.addUI = function() {
var board = $('#minesweeper');
var checkMe = $('').attr({
id: 'check-me',
class: 'happy-smiley'
});
var mineCount = $('').attr('id', 'mine-count');
var timer = $('').attr('id', 'timer').html('0');
var ui = $('').attr('id', 'ui');
ui.append(mineCount);
ui.append(timer);
Solution
As @Esailija has said in the comments, OOP is about, well, objects.
Before you write any code, you should stop and think - what are the key concepts at play here? This is a Minesweeper implementation, so the very first thing you should do is lay down all the objects you can think of, what their respective members might be, and how they're all related.
As you write your code, you should keep an eye out for objects and methods that do too many things. For your code to be simple, each building block must also be fairly simple, i.e. if an object owns too much of the functionality, part of it can probably be broken down into simpler objects.
After you implemented an object, don't just move on to the next one: re-read your code, refactor repeating or redundant code into smaller reusable functions, lookout for cyclomatic complexity (e.g. nested ifs / "arrow" code) and review all names involved. Proper naming is just as important as getting the code to work: if it's a pet project you might finish it and then forget it, but in real-world code you're going to have to maintain the code, and that means all you've written was about 20% of the time you'll end up spending on that code - the other 80% is reading your code. That said your naming looks good :)
Before you write any code, you should stop and think - what are the key concepts at play here? This is a Minesweeper implementation, so the very first thing you should do is lay down all the objects you can think of, what their respective members might be, and how they're all related.
As you write your code, you should keep an eye out for objects and methods that do too many things. For your code to be simple, each building block must also be fairly simple, i.e. if an object owns too much of the functionality, part of it can probably be broken down into simpler objects.
After you implemented an object, don't just move on to the next one: re-read your code, refactor repeating or redundant code into smaller reusable functions, lookout for cyclomatic complexity (e.g. nested ifs / "arrow" code) and review all names involved. Proper naming is just as important as getting the code to work: if it's a pet project you might finish it and then forget it, but in real-world code you're going to have to maintain the code, and that means all you've written was about 20% of the time you'll end up spending on that code - the other 80% is reading your code. That said your naming looks good :)
Context
StackExchange Code Review Q#29771, answer score: 5
Revisions (0)
No revisions yet.