Javascript 如何使用jQuery使变量多次随机_Javascript_Jquery_Random

Javascript 如何使用jQuery使变量多次随机

javascript jquery random

Javascript 如何使用jQuery使变量多次随机,javascript,jquery,random,Javascript,Jquery,Random,我试图在jQuery中制作一个卡片记忆游戏，但我有一个小问题。我希望这样，当你点击一张卡片时，每次启动程序时，图像都是随机的。我还试图使它这样的形象，一张卡，然后与另一个随机卡共享。现在我有卡片，但是当一张图片被随机选择时，它会应用到所有的卡片上。这是我到目前为止的JavaScript。如果有人能帮我，那就太好了 var score = 0; var images = ["images are here"]; Image = images[Math.floor(Math.random() * i

我试图在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>


纸牌游戏

我盯着这个看了很长时间才明白。这是你的问题：图像仅设置一次。每次用户单击时，您都需要重新分配

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 + ')'
    });
});

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

如果我正确理解您的目标，您不希望在单击该牌时随机选择该牌，否则您无法保证每张牌只出现两次，更不用说在玩游戏时更改了。相反，您希望在开始时洗牌一次。这里有一种编写随机播放代码的方法：

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];
}

var N=10；//图像数量
var指数=新数组（2*N）；
对于（var i=0；i>1；//0,0,1,1,2,2，。。。
//做一个费舍尔·耶茨洗牌
对于（var i=2*N-1；1在这个xD上有点困惑，我明白你的意思，但我想知道我该如何处理实际的图像URL，然后让它们显示在卡片上。我现在可能听起来像个傻瓜：如果你有10个图像，你不只是想要10个图像被洗牌——你想要20个图像在每个图像被洗牌的地方被洗牌e在组中出现了两次，对吗？对于这一点，您可以在我得到它的地方使用images[indexs[i]]。我应该将代码放在哪里？我尝试了“background image”：“url（'+images[indexs[i]]+'））'但这只使用一个图像。如果我将I交换为j，它只使用不同的图像。我假设我将其放置在错误的位置。设置背景图像的单击处理程序函数需要有我传入的数字。如果有10个不同的图像，则0