0

12枚のカードをひっくり返したゲームを作っています。カードをクリックすると画像が反転し、すべての画像が 2 つあるため、12 枚のカードに合計 6 枚の画像が表示されます。ポイントはそれらのイメージに合わせることです。img srcが反転した画像と同じかどうかを比較するのに問題があります。これは私がこれまでに持っているものです:

http://jsfiddle.net/LbcHf/1/

<div class="container">
<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="row">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
</div>
<form>
<input type="button" value="Play again">
</form>
4

4 に答える 4

3

スクリプトは次のようになります。

var lastSelected;
$(document).ready(function(){
    addImg();
    start();
    click();
});

function check(el){
    if($(lastSelected).attr("src") == $(el).find("img").attr("src") && $(lastSelected).hasClass("visible")) {
            // do sth. with $(this)
            alert("gotcha!");
    }
    lastSelected = $(el).find("img");
}

function start(){
    $("div.row div img").addClass("hidden");
};

function click(){
    $("div.row div").each(function(){
        $(this).click(function(){
         if($("img", this).hasClass("hidden")){
            $("img",this).removeClass("hidden");
            $("img",this).addClass("visible");
             check($(this));

         }else if($("img",this).hasClass("visible")){
            $("img",this).removeClass("visible");
            $("img",this).addClass("hidden");
         }

        });

    });

};

function addImg (){

    var images = ["http://efreeman.userworld.com/jQuery/images/cheese.gif","http://efreeman.userworld.com/jQuery/images/eggs.gif","http://efreeman.userworld.com/jQuery/images/kitchen_blender.gif","http://efreeman.userworld.com/jQuery/images/tea.gif","http://efreeman.userworld.com/jQuery/images/kitchen_collander.gif","http://efreeman.userworld.com/jQuery/images/kitchen_teapot.gif"];

var imagesused = [];
$('.container div:not(.row)').each(function() {
    var rand = Math.floor(Math.random() * images.length);
    $(this).append('<img src="' + images[rand] + '"/>');
    if (imagesused.indexOf(images[rand]) != -1) images.splice(rand, 1);
    else imagesused.push(images[rand]);
    console.log(images);

});
}
于 2013-08-07T21:40:26.127 に答える
0

次のようにする必要があります。

function check(){
    $('img.visible:not(.correct):eq(0)').attr('src') == $('img.visible:not(.correct):eq(1)').attr('src'))){
        $('img.visible:not(.correct)').addClass('correct')
    }
}

したがって、カードがめくられて両方が同じである場合は、classそれらに a を追加して、次回再びチェックされないようにします。したがって、この方法では、めくったばかりの 2 枚のカードのみをチェックします。

于 2013-08-07T21:43:07.880 に答える
0

現在コードを作成しているため、リファクタリングが必要です。しかし、差し迫った質問に答えるには、次のように簡単です。

var last;
function click(){
    $("div.row div").each(function(){
         // ..snip..

             // added code
             console.log(last == $("img",this).attr("src"));
             last = $("img",this).attr("src");

これ以上詳しく説明しない理由は、一度に 2 枚のカードだけを表向きにする必要があると想定しているためです。したがって、表示されているすべてのカードをループする理由はありません。

于 2013-08-07T21:45:05.510 に答える