如何使用 jQuery 使变量多次随机化答案

【问题标题】：How to make a variable random multiple times with jQuery如何使用 jQuery 使变量多次随机化
【发布时间】：2013-08-25 14:35:11
【问题描述】：

我正在尝试用 jQuery 制作卡片记忆游戏，但我遇到了一个小问题。我想要它，所以当您单击卡片时，每次启动程序时图像都是随机的。我也在尝试使一张卡的图像与另一张随机卡共享。现在我有卡片，但是当随机选择图像时，它会应用于所有卡片。到目前为止，这是我的 JavaScript。如果有人可以在这里帮助我，那就太好了。

var score = 0;
var images = ["images are here"];
Image = images[Math.floor(Math.random() * images.length)];
$("#score").text("Number of turns: " + score);

$(".cards").mouseenter(function () {
    $(this).animate({
       height: "+=10px",
        width: "+=10px"
    });
});
$(".cards").mouseleave(function () {
    $(this).animate({
        height: "-=10px",
        width: "-=10px"
    });
});

$(".cards").click(function () {
    score++;
    $("#score").text("Number of turns: " + score);

    $(this).css({
        "background-image": 'url(' + Image + ')'
    });
});

编辑：这是html：

<body>
     <h5>card game</h5>

    <div id="card1" class="cards"></div>
    <div id="card2" class="cards"></div>
    <div id="card3" class="cards"></div>
    <div id="card4" class="cards"></div>
    <div id="card5" class="cards"></div>
    <div id="card6" class="cards"></div>
    <div id="score"></div>
</body>

【问题讨论】：

标签： javascript jquery random

【解决方案1】：

我盯着这个看了好久才弄明白。这是你的问题：图像只设置一次。每次用户点击时都需要重新分配Image。以下是您的代码的外观：

var score = 0;
var images = ["images are here"];
$("#score").text("Number of turns: " + score);

$(".cards").mouseenter(function () {
    $(this).animate({
       height: "+=10px",
        width: "+=10px"
    });
});
$(".cards").mouseleave(function () {
    $(this).animate({
        height: "-=10px",
        width: "-=10px"
    });
});

$(".cards").click(function () {
    score++;
    $("#score").text("Number of turns: " + score);

    Image = images[Math.floor(Math.random() * images.length)];
    $(this).css({
        "background-image": 'url(' + Image + ')'
    });
});

注意：您用于随机化的方法并不能保证同一张卡片不会弹出两次。

【讨论】：

【解决方案2】：

如果我正确理解你的目标，你不想在点击卡片的时候随机选择卡片，否则你不能保证每张卡片只会出现两次，更不用说在游戏进行时更改玩过。相反，你想在一开始就洗牌一次。这是编码随机播放的一种方法：

var N = 10; // number of images
var indices = new Array(2*N);
for( var i=0 ; i<2*N ; ++i ) indices[i] = i>>1; // 0,0,1,1,2,2,...
// Do a Fisher-Yates shuffle
for( var i=2*N-1 ; 1<=i ; --i )
{
  var j = Math.floor( Math.random() * (i+1) ); // random 0 <= j <= i
  if( i == j ) continue;
  // Swap i and j
  indices[i] ^= indices[j];
  indices[j] ^= indices[i];
  indices[i] ^= indices[j];
}

将 N 更改为不同图像的数量。那么你的牌组中的牌数是 2*N。

运行上述代码后，以 images[indices[0]]、images[indices[1]]、images[indices[2]]、...、images[indices[2*N- 1]]。每张图片将以随机顺序在此序列中恰好出现两次。

希望对您有所帮助。

【讨论】：

对这个 xD 有点困惑我明白你在说什么，但我想知道我将如何洗牌实际的图像 URL，然后让它们选择显示在卡片上。我现在可能听起来像个菜鸟：p
如果您有 10 张图片，您不只是希望将 10 张图片打乱 - 您需要打乱 20 张图片，其中每张图片在卡片组中出现两次，对吗？为此，您将使用 0
啊，我明白了。我应该把我的代码放在哪里？我试过 "background-image": 'url(' + images[indices[i]] + ')' 但只使用一张图片。如果我将 i 换成 j 它只会使用不同的图片。我假设我把它放在错误的地方。
设置背景图片的点击处理函数需要传入i的数字。如果你有10张不同的图片，那么0