我正在尝试用 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 + ')'
});
});
注意:您使用的随机化方法并不能保证同一张卡片不会弹出两次。
关于javascript - 如何使用 jQuery 使变量随机多次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18387628/