Schneller Tipp Mischen Sie Karten (oder beliebige Elemente) mit dem Fisher-Yates-Shuffle-Algorithmus

In diesem Schnelltipp zeige ich Ihnen, wie Sie den Fisher-Yates-Shuffle-Algorithmus implementieren. Sobald wir wissen, wie es funktioniert, mischen wir ein virtuelles Kartendeck.

Hinweis: Obwohl dieses Tutorial mit JavaScript geschrieben wurde, sollten Sie in der Lage sein, in fast jeder Spieleentwicklungsumgebung dieselben Techniken und Konzepte zu verwenden.


1. Einführung in den Algorithmus

Es gibt verschiedene Möglichkeiten, eine Reihe von Elementen zu mischen, wie in diesem Beitrag gezeigt. Obwohl dies alles gültige Optionen sind, habe ich immer eine Methode verwendet, die vom Fisher-Yates-Shuffle-Algorithmus implementiert wird.

Ich mag diese Methode, weil sie eine "In-Place" -Ummischung vornimmt, ohne dass ein neues Array erstellt werden muss (oder welche Datenstruktur Sie gerade verwenden)..


2. Verwendung des Algorithmus

Wenn Sie die Wikipedia-Seite kurz durchgelesen haben, haben Sie einige Methoden zur Implementierung des Algorithmus erwähnt. Die, die wir verwenden werden, wird "moderne Methode" genannt:

Um ein Array a aus n Elementen zu mischen (Indizes 0… n-1): Für i von (n - 1) bis 1 setzen Sie j auf eine zufällige ganze Zahl mit 0 ≤ j ≤ i tauschen a [j] und a [i aus ]
  1. Sie beginnen mit dem letzten Element in der Liste (die oberste Karte im Stapel, wenn Sie möchten).
  2. Sie wählen zufällig ein anderes Element zwischen dem ersten und dem ausgewählten Element aus.
  3. Sie tauschen diese beiden Elemente aus.
  4. Sie wählen das vorletzte Element in der Liste aus (die zweite Karte im Stapel) und wiederholen # 1 - Nr. 3, bis Sie den Boden des Decks erreichen.

Ich habe eine visuelle Demo zusammengestellt, die die Schritte des Algorithmus zeigt. Hoffentlich macht es die obige Erklärung klarer:


Übersetzung in eine zum Schleife würde so aussehen:

var someArray = [1,2,3,4,5,6,7,8,9]; var theLength = someArray.length - 1; var toSwap; // Der Index, den wir austauschen (d. H. Die Zufallszahl) var temp; // Eine temporäre Variable, die eine Referenz auf die Indexvariable i enthält, auf die für (i = theLength; i> 0; i--) toSwap = Math.floor (Math.random () * i); temp = someArray [i]; someArray [i] = someArray [toSwap]; someArray [toSwap] = Temp; 

Der Grund, warum wir das brauchen Temp Variable ist, weil wir einen Verweis auf das erste Element haben müssen. Wenn wir keinen Verweis auf das erste Element hätten, würden wir das erste Element verlieren, wenn wir das zweite Element mit dem ersten Element austauschen. Da das erste Element jetzt dem zweiten Element entspricht, würde das erste Element durch das zweite Element "das zweite Element sein", da das zweite Element an der Stelle des ersten Elements steht. Durch einen Verweis auf das erste Element können wir stattdessen das zweite Element gleich setzen.


3. Den Algorithmus in die Praxis umsetzen

Die obige Demonstration eignet sich gut für eine visuelle Darstellung der Funktionsweise des Algorithmus. Um ihn jedoch in die Praxis umzusetzen, werden wir jetzt einige virtuelle Karten mischen. Unten ist der Code.

$ (function () var serverString = "http://source.tutsplus.com/gamedev/authors/JamesTyner/FisherYates/src/images/"; var cards = []; var i; for (i = 1; i <= 13; i++)  cards.push("c" + i);  //console.log(cards); function drawCards() $("#holder").empty(); for (i = 0; i < cards.length; i++)  $("#holder").append(""); drawCards (); $ (" # shuffle "). on ('click', shuffle); var theLength = cards.length - 1; var toSwap; var tempCard; function shuffle () console.log ( "Karten vor dem Mischen:" + Karten); für (i = theLength; i> 0; i--) toSwap = Math.floor (Math.random () * i); tempCard = Karten [i]; Karten [i ] = cards [toSwap]; cards [toSwap] = tempCard; console.log ("Karten nach dem Mischen:" + Karten); drawCards ();;

Hier erstellen wir einen Stapel von dreizehn Karten und mischen diese dann, wenn der Shuffle-Button gedrückt wird. Der Fisher-Yates-Shuffle-Algorithmus ist im implementiert Mischen() Funktion.

Ich habe eine weitere Demo erstellt, um dies in Aktion zu zeigen, aber Sie können es auch selbst mit den Dateien versuchen, die in den herunterladbaren Assets dieses Tutorials enthalten sind.


4. Fazit

Der Fisher-Yates-Shuffle-Algorithmus ist eine von mehreren Möglichkeiten, um das Mischen in Ihren Anwendungen zu implementieren. Es ist nicht erforderlich, neue Arrays zu erstellen, da die Shuffle-Funktion verwendet wird. Ich bin ein großer Fan dieses Shuffle-Algorithmus, und vielleicht sind Sie jetzt auch so.

Vielen Dank für das Lesen und ich hoffe, dass Sie dieses Tutorial nützlich gefunden haben.