HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Card-matching game

Submitted by: @import:stackexchange-codereview··
0
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

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

  • "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 ) nor i declard 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 buildCards which could be extracted and named.



  • You have a magical constant in incrementScoreBoard which 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.