JS: How to create a random selector that will not select the same item twice?

Question

I make a random selection of a hero for the game, and this tool will randomly select heroes for the player. I want to add a function in which he selects heroes for the entire team of 3 people, but I do not know how to make sure that the same hero is not selected more than once. Here is an example of my code for choosing a random hero for a player. Thanks in advance!!

<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> 

Answer 1

First of all, I will have an array of all the heroes outside the scope of pickhero (). Then I will have a second array that will point to the original array and lose elements as the heroes are selected.

Here is a simple example.

 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); } 

Answer 2

Remove the selected image from the image array.

Then random selection in the image array.

Hope that helps!

Answer 3

it might be better to return the string instead of using the hard-coded target 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(); 

Answer 4

Just hack the function for you.

 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; }; 

The arguments you need to pass are the array you want to select, and how many elements you want to select. For example, if I have

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

And I want three different elements to be randomly selected from this array, I would write

 randElemsWithoutReplace(myArray, 3); 

This will return an array with three randomly selected elements.