Question

我正在试图改组3个阵列（不在一起），以创建一个拼图游戏。 var单元格中的信息来自我在HTML代码中定义每个部分等。当我重新加载页面时，我需要显示三个数组中的一个，并且需要内容以随机顺序。拼接并没有把我带到任何地方......我有时会拥有所有的拼图元素，有时会丢失一个（我知道，我知道，拼接会移除）。有什么想法吗？

var cells = ["c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "c10", "c11", "c12",];

var imageSet1 = ["./images1/img1-1.jpg", "./images1/img1-2.jpg", "./images1/img1-3.jpg", "./images1/img1-4.jpg", "./images1/img1-5.jpg", "./images1/img1-6.jpg", "./images1/img1-7.jpg", "./images1/img1-8.jpg", "./images1/img1-9.jpg", "./images1/img1-10.jpg", "./images1/img1-11.jpg", "./images1/img1-12.jpg"];

var imageSet2 = ["./images2/img2-1.jpg", "./images2/img2-2.jpg", "./images2/img2-3.jpg", "./images2/img2-4.jpg", "./images2/img2-5.jpg", "./images2/img2-6.jpg", "./images2/img2-7.jpg", "./images2/img2-8.jpg", "./images2/img2-9.jpg", "./images2/img2-10.jpg", "./images2/img2-11.jpg", "./images2/img2-12.jpg"];

var imageSet3 = ["./images3/img3-1.jpg", "./images3/img3-2.jpg", "./images3/img3-3.jpg", "./images3/img3-4.jpg", "./images3/img3-5.jpg", "./images3/img3-6.jpg", "./images3/img3-7.jpg", "./images3/img3-8.jpg", "./images3/img3-9.jpg", "./images3/img3-10.jpg", "./images3/img3-11.jpg", "./images3/img3-12.jpg"];

var imgSet = [imageSet1, imageSet2, imageSet3];
var imgShuffed = imgSet[Math.floor(Math.random() * imgSet.length)];
for (c in cells) {
  var index = Math.floor(Math.random() * imgSet.length);
  document.getElementById(cells[c]).src = imgShuffed[index];
  imgShuffed.splice(index,1);
}

Answer 1

将问题分解为部分。首先，让我们看看如何改组阵列。

我能想到的最简单的方法是随机选择元素，直到所有元素都消失为止：

RPC_E_WRONG_THREAD

接下来，选择正确的拼图。

function shuffleArray(arr) {
    var newarray = [];
    while(arr.length > 0) {
        var chosenIndex = Math.floor(Math.random() * arr.length); //choose a number thats in the array
        var chosenValue = arr[chosenIndex];
        newarray.push(chosenValue); //add the new value to the array
        arr.splice(chosenIndex, 1); //and "remove" it from the old array by creating a new array without it
    }
    return newarray;
}

console.log(shuffleArray([1,2,3,4,5])); //example

然后随机播放所选集：

var imgSet = [imageSet1, imageSet2, imageSet3];
var chosenSet = imgSet[Math.floor(Math.random()*imgSet.length)];

现在，使用该混洗集来完成这项工作。

Answer 2

如果您使用随机数作为索引来获取图像数据，并通过组合新的混洗数组怎么办？

你需要检查复制 - 但你可以通过保存获取的索引并将新索引与它们进行比较来实现。我得到你的问题吗？

Answer 3

这是你做了一个数组，但有两个维度。对于使用随机函数，您已将所有数组合并为一维数组。我希望它有所帮助

Answer 4

applicationIds

上面的示例为您提供了一个包含前一个条目的随机条目的数组。这为您提供了没有任何重复条目且时间复杂度恒定的随机条目。

Answer 5

以下是演示：http://jsfiddle.net/patelmit69/tjmvqajL/

＆＃13;

var cells = ["c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "c10", "c11", "c12",];
var indexes = new Array();
var imageSet1 = ["http://dummyimage.com/100x100/000/fff&text=img11", "http://dummyimage.com/100x100/000/fff&text=img1-2.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-3.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-4.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-5.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-6.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-7.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-8.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-9.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-10.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-11.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-12.jpg"];

var imageSet2 = ["http://dummyimage.com/100x100/000/fff&text=img11", "http://dummyimage.com/100x100/000/fff&text=img2-2.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-3.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-4.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-5.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-6.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-7.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-8.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-9.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-10.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-11.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-12.jpg"];

var imageSet3 = ["http://dummyimage.com/100x100/000/fff&text=img11", "http://dummyimage.com/100x100/000/fff&text=img3-2.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-3.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-4.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-5.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-6.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-7.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-8.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-9.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-10.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-11.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-12.jpg"];

var imgSet = [imageSet1, imageSet2, imageSet3];
alert(imgSet.length);
var imgShuffed = imgSet[Math.floor(Math.random() * imgSet.length)];

for (c in cells) {
  var index =  Math.floor(Math.random() * imgShuffed.length);
  document.getElementById(cells[c]).src = imgShuffed[index];
  imgShuffed.splice(index,1);
}

＆＃13;

<img id="c1" src='' />
<img id="c2" src='' />
<img id="c3" src='' />
<img id="c4" src='' />
<img id="c5" src='' />
<img id="c6" src='' />
<img id="c7" src='' />
<img id="c8" src='' />
<img id="c9" src='' />
<img id="c10" src='' />
<img id="c11" src='' />
<img id="c12" src='' />

＆＃13;

在没有重复的情况下随机播放图像数组

5 个答案: