patternjavascriptMinor
Card-matching game
Viewed 0 times
gamecardmatching
Problem
I updated my code according to a few suggestions from my last post, so I thought I'd repost it to see what other feedback I could get. I also commented it heavily and fixed some of the functionality.
One question I do have is what is the difference between defining a function by doing
rather than
Which one is better or is neither better and it's just a convention to do one over the other?
You can check out the game at mattgowie.com/project-2/.
And here is the source:
```
// Author: Matt Gowie
// Created on: 10/01/12
// Project for Web Dev 2400
$(document).ready(function(){
"use strict";
var numberOfPairs = 30;
var cardsToFlip = [];
var prevCardClasses = [];
var matches = 0;
var score = 0;
var multiplier = 10;
var that = this;
var $board = $('.board'), $winMessage = $('.win-message');
// Check if the player won the game by matching all of the card pairs
var checkForWin = function() {
// Are there no more cards on the board?
if($('.card-container').length === 0) {
// Then the player must have won! Hide the board and show the win message
$board.hide();
$winMessage.show();
}
};
$('.win-message a').click(function() {
// How are the previous cards being reset here?
$('.matches').html('0');
$('.score').html('0');
$('.mult').html('10X');
matches = 0;
score = 0;
multiplier = 10;
buildGameBoard();
});
// Build a deck of cards
//
// numberOfPairs - integer for how many pairs we need, and is
// currently restricted to 0){
rand = Math.random() * deck.length;
shuffled.push(deck.splice(rand, 1)[0]);
}
return shuffled;
};
// Build the cards for the given deck and append them to the board
// deck - a shuffled deck
// Returns void
function buildCards(deck) {
var row = 1, col = 1;
// Loop through each card in the d
One question I do have is what is the difference between defining a function by doing
var funcName = function(){};rather than
function funcName() {};Which one is better or is neither better and it's just a convention to do one over the other?
You can check out the game at mattgowie.com/project-2/.
And here is the source:
```
// Author: Matt Gowie
// Created on: 10/01/12
// Project for Web Dev 2400
$(document).ready(function(){
"use strict";
var numberOfPairs = 30;
var cardsToFlip = [];
var prevCardClasses = [];
var matches = 0;
var score = 0;
var multiplier = 10;
var that = this;
var $board = $('.board'), $winMessage = $('.win-message');
// Check if the player won the game by matching all of the card pairs
var checkForWin = function() {
// Are there no more cards on the board?
if($('.card-container').length === 0) {
// Then the player must have won! Hide the board and show the win message
$board.hide();
$winMessage.show();
}
};
$('.win-message a').click(function() {
// How are the previous cards being reset here?
$('.matches').html('0');
$('.score').html('0');
$('.mult').html('10X');
matches = 0;
score = 0;
multiplier = 10;
buildGameBoard();
});
// Build a deck of cards
//
// numberOfPairs - integer for how many pairs we need, and is
// currently restricted to 0){
rand = Math.random() * deck.length;
shuffled.push(deck.splice(rand, 1)[0]);
}
return shuffled;
};
// Build the cards for the given deck and append them to the board
// deck - a shuffled deck
// Returns void
function buildCards(deck) {
var row = 1, col = 1;
// Loop through each card in the d
Solution
I like your code
Some very minor stuff
As for
Whenever JR says something about JavaScript, one should pay attention. Since 2011 though we have come to the practical conclusion that anonymous functions in the callstack are a major PITA. which means that if we stick to 'Do this instead' we ought to write.
And that just looks wrong ( not DRY ), and should be avoided in my book.
- "Use Strict" within a IFFE
- Good level of comments
- Correct casing and decent naming
- Nice size of methods
Some very minor stuff
- JsHint says you never use
that( line 12 ) norideclard on line 163 and line 171
- function(){} should not have a semicolon after the closing curly brace (
buildCards)
- var f = function(){} should have a semicolon after the closing curly brace (
clickCard)
- You have a magical constant in
buildCardswhich could be extracted and named.
- You have a magical constant in
incrementScoreBoardwhich could be extracted and named.
- You should take out all debugging related code in your final version
As for
var funcName = function(){}; versus function funcName() {};, I always thought the second form was silly. Until I read this:// Don't do this:
function getData() { }
// Do this instead:
var getData = function() { };Whenever JR says something about JavaScript, one should pay attention. Since 2011 though we have come to the practical conclusion that anonymous functions in the callstack are a major PITA. which means that if we stick to 'Do this instead' we ought to write.
var getData = function getData(){};And that just looks wrong ( not DRY ), and should be avoided in my book.
Code Snippets
// Don't do this:
function getData() { }
// Do this instead:
var getData = function() { };var getData = function getData(){};Context
StackExchange Code Review Q#17542, answer score: 2
Revisions (0)
No revisions yet.