JS：如何创建一个不会选择两次相同项目的随机选择器？答案

【问题标题】：JS: How to create a random picker that won't pick the same item twice?JS：如何创建一个不会选择两次相同项目的随机选择器？
【发布时间】：2015-09-15 10:38:45
【问题描述】：

我正在为游戏制作一个随机英雄选择器，这个工具会为玩家随机选择英雄。我想添加一个可以为整个 3 人团队选择英雄的功能，但我不知道如何制作，这样同一个英雄就不会被多次选择。这是我为玩家选择随机英雄的代码示例。提前谢谢！！！！

<script language="JavaScript">

function pickhero(){
var imagenumber = 16 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
images = new Array
images[1] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/ringo.png"
images[2] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/krul.png"
images[3] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/ardan.png"
images[4] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/saw.png"
images[5] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/petal.png"
images[6] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/adagio.png"
images[7] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/catherine.png"
images[8] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/koshka.png"
images[9] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/skaarf.png"
images[10] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/joule.png"
images[11] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/glaive.png"
images[12] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/taka.png"
images[13] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/celeste.png"
images[14] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/vox.png"
images[15] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/fortress.png"
images[16] = "http://www.vaingloryfire.com/images/wikibase/icon/heroes/rona.png"
var image = images[rand1]
document.team1hero1.src = image
}
</script>

【问题讨论】：

标签： javascript random

【解决方案1】：

从图像数组中移除选取的图像。

然后随机选取图像数组。

希望对您有所帮助！

【讨论】：

【解决方案2】：

首先，我会有一个包含pickhero() 范围之外的所有英雄的数组。然后，我将有第二个数组，它将指向原始数组并在选择英雄时丢失元素。

这是一个简单的例子。

var heroes = ["link1", "link2", "link3", "link4"];
var heroesAvailable = [];
for (var i=0; i<heroes.length; i++) {
    heroesAvailable.push(i);  // [0, 1, 2, 3]
}

var heroesChosen = [];
for (var i=0; i<3; i++) {  // choose 3 heroes
    // the amount of heroes not chosen yet
    var imageNumber = heroesAvailable.length;
    var randHero = Math.floor(Math.random()*imageNumber);

    heroesChosen.push(heroes[heroesAvailable[randHero]]);

    // remove that hero from the available array
    heroesAvailable.splice(randHero, 1);
}

【讨论】：

【解决方案3】：

刚刚为你准备了一个函数。

var randElemsWithoutReplace = function (ls_, n) {
  var ls = ls_.slice();
  var selections = [];
  for (var i = 0; i < n; i++) {
    selections.push(ls.splice(Math.floor(Math.random()*ls.length), 1)[0]);
  }
  return selections;
};

您应该传递给它的参数是您要从中选择的数组以及您要选择的元素数量。例如，如果我有

var myArray = ['a', 'b', 'c', 'd', 'e'];

我想从该数组中随机选择三个不同的元素，我会写

randElemsWithoutReplace(myArray, 3);

这将返回一个包含三个随机选择的元素的数组。

【讨论】：

【解决方案4】：

也许最好返回字符串，而不是使用硬编码目标document.team1hero1.src。

function pickhero() {
    if (!pickhero.images) {
        pickhero.images = ['ringo', 'krul', 'ardan', 'saw', 'petal', 'adagio', 'catherine', 'koshka', 'skaarf', 'joule', 'glaive', 'taka', 'celeste', 'vox', 'fortress', 'rona'];
    }
    var i = Math.random() * pickhero.images.length | 0;
    return 'http://www.vaingloryfire.com/images/wikibase/icon/heroes/' + pickhero.images.splice(i, 1) + '.png';;
}
document.team1hero1.src = pickhero();

【讨论】：