0

jQuery と PHP を使用してメモリ ゲームを作成しています (ここにあるスクリプトを使用しています)。しかし、私は2つの異なる画像を組み合わせて使用​​しています。HTML 形式では、各カードは次のようになります。

<div class="card {toggle:'imagename'}">                 
<div class="off"></div>                 
<div class="on {toggle:'imageid'}"></div>
</div>

基本的に、2 つのカードが選択されると、jQuery は ID が一致するかどうかをチェックすることになっています。もともと画像が一致するかどうかを確認することになっていましたが、2 つの異なる画像であるため、それができませんでした (1 つしか表示されません)。以下は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;
};

どんな助けでも大歓迎です。

追加情報：

ペアには同じ画像名があり、CSS クラス名として「_desc」を一方に追加しました (つまり、一方の画像のタイトルは「i1」で、もう一方の画像のタイトルは「i1_desc」です)。

カードがそこに座っているペアが見つかった場合、それらは元の位置にリセットされたり消えたりしません。

4

1 に答える 1