0

我问了这个问题，但我把它说得太长了，而且不够具体，所以又来了。

我正在创建一个有趣的游戏，我找到了如何在线进行操作的说明。如果有 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>
4

1 回答 1

0

这是我将使用的代码：

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数组中删除，所以它不再可用利用。如果我们每次迭代都无条件地从图像数组中删除它，那么你只能使用它一次。

于 2013-08-07T21:03:07.483 回答