jQuery Top Trumps

Supertrumpf ist ein Kartenspiel, welches wahrscheinlich jeder von uns schonmal gespielt hat. Ich selbst kannte es bisher nur unter dem Namen Quartett, weil man vor allem Quartettspielkarten dafür verwendet. Autos, Flugzeuge, Städte, Wrestler; das Thema spielte eigentlich keine große Rolle. Hauptsache es gab Werte, die man vergleichen und Karten, die man gewinnen konnte. Für jQuery habe ich nun ein Plugin geschrieben, mit dem man ein solches Kartenspiel einfach selbst erstellen kann.

Dabei definiert man zunächst einmal einen Container, in dem das Spiel gerendert werden soll und gibt dem Plugin anschließend Optionen mit. Wichtig sind hier vor allem die beiden Optionen fields und cards. Mit fields definiert man dabei die vorhandenen Vergleichsfelder. name ist hierbei der Name des Feldes, der dem Spieler angezeigt wird und comparison bestimmt, welcher Wert besser ist (< für kleiner ist besser, > für größer ist besser). cards definiert den Kartenstapel. Jede Karte wird dabei mit einem name (also dem Namen der Karte) und einem Array fields ausgestattet. fields bestimmt jeweils einen Wert für jedes Feld, was ihr zuvor angelegt habt.

Das sieht dann zum Beispiel so aus:

$('#your-game-container').toptrumps({
  'fields' : [
    {'name': 'Smaller A', 'comparison' : '<'},
    {'name': 'Bigger A',  'comparison' : '>'},
    {'name': 'Bigger B',  'comparison' : '>'},
    {'name': 'Smaller B', 'comparison' : '<'}
  ],
  'cards' : [
    {'name': 'Example 1', 'fields' : [57, 8, 161, 534]},
    {'name': 'Example 2', 'fields' : [54, 10, 186, 524]},
    {'name': 'Example 3', 'fields' : [38, 7, 178, 553]},
    {'name': 'Example 4', 'fields' : [69, 4, 196, 410]},
    {'name': 'Example 5', 'fields' : [69, 9, 150, 464]},
    {'name': 'Example 6', 'fields' : [19, 2, 155, 463]},
    {'name': 'Example 7', 'fields' : [32, 2, 142, 534]},
    {'name': 'Example 8', 'fields' : [73, 5, 164, 443]},
    {'name': 'Example 9', 'fields' : [31, 5, 183, 546]},
    {'name': 'Example 10', 'fields' : [53, 8, 103, 557]},
    {'name': 'Example 11', 'fields' : [54, 3, 132, 428]},
    {'name': 'Example 12', 'fields' : [62, 6, 79, 445]}
  ]
});

Das Spiel wird derzeit ausschließlich gegen eine KI gespielt. Diese hat drei verschiedene Schwierigkeitsgrade, definiert als difficulty. easy ist der leichteste Schwierigkeitsgrad. Hier startet der Spieler als erstes und hat damit einen Vorteil gegenüber der CPU. Felder werden durch die CPU zufällig ausgewählt. normal ist das gleiche in grün, hier beginnt jedoch die CPU zuerst.

Erst unter hard wirds dann interessant. Hier beginnt die CPU nicht nur zuerst, sie berechnet außerdem die Gewinnwahrscheinlichkeit der einzelnen Werte ihrer Karte und wählt den mit der höchsten Wahrscheinlichkeit aus. Anders als man vielleicht denken sollte, ist Supertrumpf kein Glücksspiel. Derjenige der die Karten am besten kennt, hat einen klaren Vorteil. Und niemand errechnet Wahrscheinlichkeiten schneller als eine KI.

Zu guter letzt könnt Ihr noch über die Option trick auswählen, was passieren soll, wenn bei einem Vergleich ein Gleichstand auftritt. requeue fügt die Karten am Ende des Stapels erneut ein und ignore verwirft die Karten völlig.

Den Quellcode und eine detailliertere Dokumentation könnt Ihr Euch aus dem Repository jQuery Top Trumps auf Github herunterladen.

In der Demo unten könnt Ihr das Spiel gegen die KI schon einmal ausprobieren. Als Karten werden die Grumpy Cats verwendet, welche von Sophie Sievert liebevoll illustriert wurden. Viel Spaß.