用jQuery实现堆栈中的随机/洗牌

Question

我正在为一个小项目构建一个非常简单的记忆游戏。其逻辑如下：

1. 单击“输入”字段，选择要播放多少对
2. 使用类card1、card2等创建div。
3. 克隆div并将它们在数组中的位置随机化。

下面是我的脚本(JSFiddle中的叉)：

$(".button").click(function () {        
    // get the value from the input
    var numCards = parseInt($('input').val());

    for (var i = 1; i <= numCards; i++) {
        // create the cards
        $(".container").append("<div class='card" + i + " cards'></div>") &&
        $(".card" + i).clone().appendTo(".container");
    }

    // randomize cards in stack
    var cards = $(".cards");
    for (var i = 0; i < cards.length; i++) {
        var target = Math.floor(Math.random() * cards.length - 1) + 1;
        var target2 = Math.floor(Math.random() * cards.length - 1) + 1;
        var target3 = Math.floor(Math.random() * cards.length - 1) + 1;
        cards.eq(target).before(cards.eq(target2)).before(cards.eq(target3));
    }
});

现在我需要的是调整第三步，这意味着动态地创建目标vars和代码的最后一行。

cards.eq(target).before(cards.eq(target2)).before(cards.eq(target3));

所以请给我一个建议-你会怎么做？记住这是一个初学者的项目。谢谢!

Answer 1

$(".button").click(function () {        
    // get the value from the input
    var numCards = parseInt($('input').val());

    for (var i = 1; i <= numCards; i++) {
        // create the cards
        $(".container").append("<div class='card" + i + " cards'></div>") &&
        $(".card" + i).clone().appendTo(".container");
    }

    var parent = $(".container");
    var divs = parent.children();
    while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
});

参见jsfidle：http://jsfiddle.net/007y4rju/8/

来源：http://jsfiddle.net/C6LPY/2/

Answer 2

以下是jsfiddle - http://jsfiddle.net/007y4rju/6/中代码的版本

请检查行为是否与原始代码一致。

$(document).ready(function () {

    $(".button").click(function () {        
        // get the value from the input
        var numCards = parseInt($('input').val());

        for (var i = 1; i <= numCards; i++) {
            // create the cards
            $(".container").append("<div class='card" + i + " cards'></div>") &&
            $(".card" + i).clone().appendTo(".container");
        }

        // randomize cards in stack
        var cards = $(".cards");
        var startTarget = Math.floor(Math.random() * cards.length - 1) + 1;
        var collection = cards.eq(startTarget);
        var nextTarget;
        var i;
        for (i = 0; i < cards.length; i++) {
            nextTarget = Math.floor(Math.random() * cards.length - 1) + 1;
            collection.before(cards.eq(nextTarget));
        }
    });
});

Answer 3

克隆div时，可以将类名(card%i%)中的索引随机化。然后，您不需要对克隆的div进行洗牌；您可以按原样追加它们。

$(".button").click(function () {        
    // get the value from the input
    var numCards = parseInt($('input').val());

    for (var i = 1; i <= numCards; i++) {
        // create the cards
        $(".container").append("<div class='card" + i + " cards'></div>");
    }

    var aIndices = [];
    for (var i = 1; i <= numCards; i++) {
        var ix;
        do ix = Math.round(Math.random() * (numCards - 1)) + 1;
        while (aIndices.indexOf(ix) >= 0);
        aIndices.push(ix);
        // clone
        $(".card" + ix).clone().appendTo(".container");
    }
});