Thursday, 5 September 2013

jQuery won't remove pair for Memory Game

jQuery won't remove pair for Memory Game

I'm creating a memory game using jQuery and PHP (going off a script found
here), and essentially what I'm trying to do is make it so that when two
cards have been matched, they both are removed. But, I'm using two
different images to be paired. In HTML form, each card looks like this:
<div class="card {toggle:'imagename'}">
<div class="off"></div>
<div class="on {toggle:'imageid'}"></div>
</div>
Essentially, when two cards are chosen the jQuery is suppose to check if
the id's match. Originally it was suppose to check if the images match,
but being two different images I couldn't do that (it'd only display one).
Below is the jQuery:
function matchingCards(event, params){
$cards = $("."+params.css_class+".on:visible");
$.each($cards, function(index, card){
var $card = $(card);
$card.trigger("card_removed");
$card.parent(".card").unbind("*").before("<div
class='card_ph'></div>").remove();
$card = null;
});
$cards_left = $("#game_board>.card");
if ( $cards_left.length == 0 ){
$(document).trigger("game_won", {});
/*
* quickFlip has a problem when working in IE: when the last
* element bound was removed the problem is caused by the bound
* resize event on the window and is causing
* the end game get stuck when the game is over...
*/
$(window).unbind("resize");
}
$cards_left = $cards = null;
};
function checkCards(){
$on_cards = $("#game_board .card>.on:visible");
if ( $on_cards.length == 2 ){
$(document).trigger("player_made_move");
// Get the first object css class
var css_class = $on_cards.parent(".card").metadata()["toggle"];
var $card = $(this);
var this_card = $card.children(".on").metadata()["toggle"];
$matched_cards = $on_cards.filter("."+this_card);
var event_name = "no_match";
if ( $matched_cards.length == 2 ){
event_name = "found_match";
}
if ( css_class == css_class ){
event_name = "no_match";
}
$(document).trigger(event_name, {css_class: css_class});
$matched_cards = null;
}
clearTimeout(chk_cards_timeout);
chk_cards_timeout = null;
$on_cards = null;
};
Any help would be appreciated.
Additional information:
The pairs have the same image name I just added "_desc" to one of them for
the CSS class name (i.e. one image is titled "i1" and the other "i1_desc")
When a pair is found the cards sit there, they don't reset to original
position or dissapear.

No comments:

Post a Comment