Question

我问过这个问题，但是我做了很长时间并且不够具体，所以这里再次提出。

我正在创建一个有趣的游戏，我找到了如何在线操作的说明。如果有12张牌面朝下的牌，你点击2张牌，如果图像匹配，他们会面朝上，你赢了2点，直到你找到所有的比赛。

我需要做的是将每个图像添加到一个随机位置，两次！我需要为每个图像生成随机位置，然后将图像添加到与页面中该位置对应的正确位置。您可以将游戏板视为4 x 3网格。 “行”中的每个空格都会得到一个图像。我遇到的问题是只有1个图像被随机选择而不是所有6个图像随机选择两次

这里是jsfiddle：http://jsfiddle.net/26Pda/1/

这是图像：

http://efreeman.userworld.com/jQuery/images/cheese.gif
http://efreeman.userworld.com/jQuery/images/eggs.gif
http://efreeman.userworld.com/jQuery/images/kitchen_blender.gif
http://efreeman.userworld.com/jQuery/images/tea.gif
http://efreeman.userworld.com/jQuery/images/kitchen_collander.gif
http://efreeman.userworld.com/jQuery/images/kitchen_teapot.gif

这是html：

<!doctype html>
<html>
<head>
<title>jQuery: Manipulating and Traversing Elements Project</title>
<meta charset="utf-8">
<style>
div.container, div.row, form {
clear: both;
}
div.row > div {
position: relative;
float: left;
width: 100px;
height: 170px;
padding: 30px;
margin: 10px;
border: 1px solid black;
box-shadow: 3px 3px 5px grey;
vertical-align: bottom;
}
div.row > div > img {
display: inline-block;
position: absolute;
width: 100px;
bottom: 30px;
}
.visible {
 visibility: visible;
 }
 .hidden {
 visibility: hidden;
 }
.done {
visibility: visible;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="game.js"> </script>
</head>
<body>
<div class="container">
<div class="row">
<div></div>
<div></div>
<div></div>
 <div></div>
 </div>
 <div class="row">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 <div class="row">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
 </div>
 <form>
 <input type="button" value="Play again">
 </form>
 </body>
 </html>

Answer 1

这是我将使用的代码：

http://jsfiddle.net/26Pda/6/

var images = ['...']; //your images above
var imagesused = [];
$('.container div:not(.row)').each(function() {
    var rand = Math.Floor(Math.Random() * images.length);
    $(this).append('<img src="' + images[rand] + '"/>');
    if (imagesused.search(images[rand]) != -1) images.splice(rand, 1);
    else (imagesused.push(images[rand]);
});

我们在这里做的很简单。我们制作一个数组来存储我们使用的图像。然后我们遍历需要图像的每个<div>。

然后我们选择一个随机图像。这是通过选择images数组的随机索引来完成的。之后，我们创建一个新的<img>元素，并将其源设置为随机选择的图像。

然后我们检查我们使用的图像是否在imagesused数组中。如果已经存在，我们将从仍可使用的图像数组中删除该图像。如果不是，我们将图像添加到该阵列上。

我们得到两个图像（而不是1或3+）的原因是因为我们在将它推到imagesused数组之前使用它一次，然后当我们第二次使用它时，我们将它从images数组，因此不再可用。如果我们每次迭代都无条件地从图像数组中删除它，那么你只能使用它一次。

每次都将图像添加到随机div中

1 个答案: