Memory Homework

[bluemittens505]

This code is mostly working, but it has a bug. When you click on the same tile twice, the code considers the "tiles matching" and removes the tile. I tried checking if this.$td and tile.$td were equal in Tile.prototype.matches(), but I didn't get the results I expected. Is there a way to prevent this bug? Or is my whole design flawed? :-(

[afeld]

is my whole design flawed?

Not at all – this looks really good!

I tried checking if this.$td and tile.$td were equal in Tile.prototype.matches(), but I didn't get the results I expected

Ah. Remember in the first class when we were talking about different types in JavaScript, and how two objects that look the same aren't triple-equal (===)? For example:

var a = {};
var b = {};
a === b; // false

You ran into that exact issue here, because clicked1.$td is not the same (jQuery) object as clicked2.$td, even though they contain the same element object under the hood (in a property). This happened because $(this) separately for each Tile that is created. Does that make sense? There are several ways to fix this, each with a simplified example:

1. Only create the jQuery object once.

   // change
   game.clicked1 = new Tile($(this));
   game.clicked2 = new Tile($(this));
   // to
   var $tile = $(this);
   game.clicked1 = new Tile($tile);
   game.clicked2 = new Tile($tile);

2. Compare the underlying element object rather than the jQuery object. Like an array, you can use square brackets to access the underlying elements from a jQuery object.

   // change
   clicked1.$td === clicked2.$td
   // to
   clicked1.$td[0] === clicked2.$td[0]

3. Use jQuery's .is() method to compare two jQuery objects directly.

   // change
   clicked1.$td === clicked2.$td
   // to
   clicked1.$td.is(clicked2.$td)

Hope that helps? Remind me to bring this up in class – it's tricky!

[afeld]

Don't be afraid of whitespace within lines 😉 Makes things more readable.

[afeld]

Left a bunch of nitpicky comments, but great work overall!