Randomize/shuffle 叠卡片 jQuery

Question

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

点击输入框选择你想玩多少对
使用类 card1、card2 等创建 div
克隆 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));
    }
});

我现在需要调整的是第3步，意思是动态创建目标变量，最后一行代码

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

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

Answer 1

这是 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 2

$(".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 3

您可以在克隆 div 时随机化 class 名称 (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");
    }
});

Randomize/shuffle 叠卡片 jQuery

Randomize/shuffle cards in stack with jQuery

javascript

arrays

random

jquery