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时，可以在类名（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");
    }
});

使用jQuery在堆栈中随机化/随机播放卡片

3 个答案: