JavaScript-Spielkarten Teil 3: Animationen

Das neue Multiplayer-Kartenspiel ist jetzt veröffentlicht, und ich habe beschlossen, einige seiner Geheimnisse zu enthüllen (die Kartenbibliothek wird demnächst als Open Source in demselben vertrauten Repo veröffentlicht).

Wenn Sie die ersten beiden Beiträge gelesen haben, habe ich letztendlich ein etwas minimalistischeres Kartenset entworfen:

Kartendeck

In der vorherigen Version von Deck of Cards habe ich JavaScript-Animationen mit meinem eigenen einfachen Helfer namens animationFrames verwendet. Der Grund, warum ich keine CSS-Animationen verwendet habe, ist, dass CSS-Animationen, wenn Sie mehrere Animationen mit nur sehr geringen Verzögerungsunterschieden haben möchten, in der Regel schrecklich aussehen, da die Startzeit nicht genau, sondern irgendwie gerundet oder zufällig ist.

Ein weiterer Grund für die Verwendung von JS-Animationen ist die präzise Steuerung jedes Animationsrahmens. Wenn ich zum Beispiel in einer Shuffle-Animation den Z-Wert ändern muss, kann ich einfach die Koordinaten der Kartenelemente ändern, anstatt sie tatsächlich im DOM zu verschieben oder ihre Z-Index-Werte zu ändern.

In der neuen Multiplayer-Version habe ich die Bibliothek erweitert und modernisiert.

Mischen

Wie funktioniert das Mischen tatsächlich?

Jeden Tag mische ich

Wenn Sie die Karten nur zufällig auseinanderbreiten und sie zufällig wieder in den Stapel zurückschieben, besteht das Problem darin, dass sich die Karten durcheinander bewegen und es nicht realistisch aussieht. Das wollen wir nicht.

Was bei einem echten Kartenspiel tatsächlich passiert, werden die Karten nach dem Zufallsprinzip von Karte zu Karte nach links und rechts ausgeglichen. Dann, wenn sie zurück in den Stapel gehen, nimmst du noch einmal zufällig Karte für Karte links oder rechts.

Damit das Mischen von Animationen realistisch funktioniert, müssen wir für jede Karte den linken oder rechten Stapel auswählen:

const left = [];
const right = [];
for (sei i = 0; i 
  if (Math.random () <0.5) {
    left.push (Karte);
    card.xTarget * = -1;
  } else {
    right.push (Karte);
  }
  const animation = new AnimationFrames ({
    Verzögerung: i * 2,
    Dauer: 200,
    Lockerung: 'quadInOut'
  });
  animation.onprogress = (e) => {
    const {xStart, xTarget, yStart, yTarget} = card;
    Karten [i] .x = xStart + e * (xStart + xTarget);
    Karten [i] .y = yStart + e * (yStart + yTarget);
    card.x = Karten [i] .x;
    card.y = Karten [i] .y;
    Karten [i] .update ();
  });
  karten [i] .animation = animation;
}

Ich erstelle virtuelle Karten nur für die Animation, damit diese von den eigentlichen Kartenkomponenten getrennt werden. Der Grund ist, dass ich in der Mitte der Animation die Koordinaten der Karten tauschen werde, wenn sie sich wieder auf den Stapel bewegen und sich die Stapelreihenfolge ändert.

Der eigentliche Code ist etwas komplizierter, aber um die Dinge einfach zu halten, zeige ich hier nur die Theorie.

Nachdem die Hälfte der Karten animiert wurde, tausche ich die Karten so aus, dass ich zufällig die linke oder rechte Karte nehme und einen neuen virtuellen Stapel erstelle:

const deck = neues Array (cards.length);
while (left.length || right.length) {
  if (Math.random () <0.5) {
    deck.push (left.length? left.shift (): right.shift ());
  } else {
    deck.push (right.length? right.shift (): left.shift ());
  }
}

Nachdem ich den neuen Stapel habe, tausche ich:

for (sei i = 0; i 
  const animation = new AnimationFrames ({
    Verzögerung: i * 2,
    Dauer: 200,
    Lockerung: 'quadInOut'
  });
  const xStart = deck [i] .x;
  const yStart = deck [i] .y;
  const xTarget = -i * 1/4;
  const yTarget = -i * 1/4;
  karten [i] .x = xStart;
  karten [i] .y = yStart;
  animation.onprogress = (e) => {
    Karten [i] .x = xStart + e * (xStart + xTarget);
    Karten [i] .y = yStart + e * (yStart + yTarget);
  };

So sieht es in Zeitlupe aus:

Auf diese Weise erstellen Sie eine realistische und stets einzigartige Shuffle-Animation, ohne dass die DOM-Reihenfolge geändert oder der Z-Index geändert wird.

Lassen Sie mich wissen, was Sie dachten. Gab es etwas, das Sie nicht verstanden haben oder weitere Informationen wünschen?

Sie finden mich auf Twitter und GitHub. Die neue Kartenbibliothek wird demnächst als Open-Source-Version erhältlich sein. Befolgen Sie also das Repo, um Updates zu erhalten! Und vor allem: Viel Spaß mit dem neuen Multiplayer-Kartenspiel unter https://deck.of.cards

Schlagen Sie bitte auch vor, worum es im nächsten Artikel gehen könnte!