jQuery记忆游戏

Question

我正在创建一个基于aditia rahman jQuery Memory Game http://superdit.com/2011/02/09/jquery-memory-game/的记忆游戏。我已经改变了我的版本轻微动态添加图像与div标签匹配使用jQuery的唯一ID，而不是手动这样做。有两个问题：

1。）当我点击卡片时，它不会打开＆＃34;或者翻转以显示自己以找到匹配的卡片/图像。

2。）在Firebug中进行测试时，我注意到卡片/图像始终位于相同的位置而不是随机放置。例如，div id =＆＃34; 1＆＃34;包含图像id =＆＃34; 01＆＃34;以下是div id =＆＃34; 2包含图像id =＆＃34; 02＆＃34;，这将使游戏变得沉闷和太容易，而不是div id = 1＆＃34;包含图像id =＆＃34; 01＆＃34;应该有一个随机数，如div id =＆＃34; 9＆＃34; image id =＆＃34; 09＆＃34;每次用户玩或重置游戏时使游戏更具挑战性。

这是用于动态加载图像并为每个图像赋予克隆

的id的jQuery脚本

var boxopend     =     "",
    imgopend     =     "",
    count        =      0,
    found        =      0,
    children     =     $("boxcard").children(),
    child        =     $("boxcard div:first-child");

var divs = $('div');

divs.each(function(i){
    //goes through each div and add unique id attribute e.g card1 - card12
    $(this).attr("id", "card" + i);

    //creates images and gives unique src, and alt attribute and then appends
    //to corresponding div  
    var img = $("<img />");
    img.attr({
        //"id": i,
        "src": "img/" + i + ".png",
        "alt": "image" + i,
});
    $(this).append(img);
});

$(divs.clone()).each(function(i){
    var divNew = $('<div></div>').insertAfter($('div:last-child'));
    divNew.attr("id", "card" + i + "00");

var img = $("<img />");
    img.attr({
        //"id": i,
        "src": "img/" + i + ".png",
        "alt": "image" + i,
});
    divNew.append(img);
});

这是我试图使用上面的脚本

的教程脚本

function randomFromTo(from, to){
        return Math.floor(Math.random() * (to - from + 1) + from);
    };

    function shuffle(){
        var array_img = new Array();
        for (i=0; i array_img[i] = $("#" +child.attr("id") + "img").attr("src");
        child = child.next();
    }

    for(z = 0; z randIndex = randomFromTo(0, array_img.length - 1);

    //set new image

    $("#"+child.attr("id")+"img").attr("src", array_img[randIndex]);
    array_img.splice(randIndex, 1);

    child = child.next();

    function openCard(){

        id = $(this).attr("id");

        if($("#"+id+"img").is(:"hidden")){
            $("#boxcard div").unbind("click", openCard);

            $("#"+id+"img").slideDown('fast');

            if(imgopened == ""){
                boxopened = id;
                imgopened = $("#"+id+"img").attr("src");
                setTimeout(function(){
                    $("#boxcard div").bind("click", openCard)
                }, 300);
            }else{
                currentopened = $("#"+id+"img").attr("src");
                if(imgopened != currentopened){
                    //close again
                    setTimeout(function(){
                        $("#"+id+"img").slideUp("fast");
                        $("#"+boxopened+"img").slideUp("fast");
                        boxopened = "";
                        imgopened = ""
                    }, 400);
                }else{
                    //found
                    $("#"+ id + "img").addClass("opacity");
                    $("#" + boxopened + "img").addClass("opacity");
                    found++;
                    boxopened = "";
                    imgopened = "";
                }

                setTimeout(function(){
                    $("#boxcard id").bind("click", openCard)
                }, 400);
            }

            count++;
            $("#count").html("" + count);

            if(found == 10){
                msg ='<span id="msg">Congrats ! You Found All Shoes With 
                </span>';

                $("span.link").prepend(msg);
            }
        }   
    }
})(); 

最后是HTML

<section id="boxbutton">

       <span class="link">
            <span id="count">0</span>
       </span>
      </section>
        <section id="boxcard">
            <div><!--<img src="img/0.png" alt="image0"/>--></div>
            <div><!--<img src="img/1.png" alt="image1"/>--></div> 
            <div><!--<img src="img/2.png" alt="image2"/>--></div> 
            <div><!--<img src="img/3.png" alt="image3"/>--></div> 
            <div><!--<img src="img/4.png" alt="image4"/>--></div> 
            <div><!--<img src="img/5.png" alt="image5"/>--></div> 
            <div><!--<img src="img/6.png" alt="image6"/>--></div> 
            <div><!--<img src="img/7.png" alt="image7"/>--></div> 
            <div><!--<img src="img/8.png" alt="image8"/>--></div> 
            <div><!--<img src="img/9.png" alt="image9"/>--></div> 
            <div><!--<img src="img/10.png" alt="image10"/>--></div>
            <div><!--<img src="img/11.png" alt="image11"/>--></div>
            <div><!--<img src="img/12.png" alt="image12"/>--></div> 
         </ul>
        </section>