Jahrelang glaubte ich, dass Drag-and-Drop-Spiele-insbesondere diejenigen, die Rotation, r?umliche Logik und R?tsell?sung beinhalteten-die ausschlie?liche Dom?ne von JavaScript waren. Bis eines Tages fragte ich KI:

"Ist es m?glich, ein vollst?ndig interaktives Tangram -Puzzlespiel mit nur CSS zu erstellen?"

Die Antwort: "Nein - nicht wirklich. Du wirst JavaScript brauchen." Das war all die Motivation, die ich brauchte, um etwas anderes zu beweisen.

Aber zuerst stellen wir die offensichtliche Frage: Warum sollte jemand das tun?

Also…

• Um zu wissen, wie weit CSS bei der Erstellung einer interaktiven Benutzeroberfl?che gedr?ngt werden kann.
• Um meine CSS -F?higkeiten besser zu werden.
• Und es macht Spa?!

Fair genug?

Hier ist die nicht überraschende Wahrheit: CSS ist dafür nicht genau gemacht. Es ist keine logische Sprache, und seien wir ehrlich, es ist auch nicht besonders dynamisch. (Sicher, wir haben CSS-Variablen und einige praktische integrierte Funktionen jetzt, Hurra!)

In JavaScript denken wir natürlich an Funktionen, Schleifen, Bedingungen, Objekte und Vergleiche. Wir schreiben Logik, abstrakte Dinge in Methoden und versenden schlie?lich ein Bündel, das der Browser versteht. Und sobald es versendet wird? Wir schauen uns dieses letzte JavaScript -Bundle selten an - wir konzentrieren uns nur darauf, es schlank zu halten.

Fragen Sie sich jetzt: Ist das nicht genau das, was Sass für CSS tut?

Warum sollten wir endlose Linien von sich wiederholenden CSS von Hand schreiben, wenn wir Mixins und Funktionen verwenden k?nnen, um es zu erzeugen-sauber, effizient und ohne sich darum zu kümmern, wie viele Linien es dauert, solange der Ausgang optimiert ist?

Wir haben es also auf den Test gestellt und es stellt sich heraus, dass Sass JavaScript zumindest in Bezug auf Logik- und Puzzle-Verhalten auf niedriger Ebene ersetzen kann. Mit nichts als Karten, Mixins, Funktionen und einer Menge Mathematik haben wir es geschafft, unser Tangram -Puzzle zum Leben zu erwecken, kein JavaScript erforderlich.

Lassen Sie die (nur CSS) Spiele beginnen! ??

Das Spiel

Das Spiel besteht aus sieben Teilen: dem klassischen Tangram -Set. Natürlich k?nnen diese Stücke in ein perfektes Quadrat (und auch viele andere Formen) angeordnet werden. Aber wir brauchen ein bisschen mehr als nur statische Stücke.

Also hier ist, was ich baue:

• Ein Puzzletor, das die Zielform ist, die der Spieler nachbilden muss.
• Ein Startknopf, der alle Teile in einen Staging -Bereich schlurft.
• Jedes Stück ist klickbar und interaktiv.
• Das Puzzle sollte den Benutzer wissen lassen, wenn er ein Stück falsch macht und auch feiert, wenn er das Puzzle beendet.

Die HTML -Struktur

Ich habe damit begonnen, die HTML -Struktur einzurichten, was keine kleine Aufgabe ist, da die Anzahl der beteiligten Elemente berücksichtigt wurde.

• Jede Form erhielten sieben Optionsfelder. Ich habe Radios über Kontrollk?stchen ausgew?hlt, um ihre eingebaute Exklusivit?t zu nutzen. In derselben Gruppe kann nur einer ausgew?hlt werden. Dies machte es viel einfacher zu verfolgen, welche Form und der Zustand derzeit aktiv waren.
• Die Startschaltfl?che? Auch ein Funkeingang. Ein Kontrollk?stchen h?tte auch funktionieren k?nnen, aber aus Gründen der Konsistenz habe ich auf der ganzen Linie mit Radios geblieben.
• Die Puzzlekarte selbst ist einfach eine einfache alte
  , einfach und effektiv.
• Für die Rotation haben wir acht Optionsfelder hinzugefügt, die jeweils ein 45-Grad-Inkrement darstellen: 45 °, 90 °, 135 °, bis 360 °. Diese simulierten Rotationssteuerungen vollst?ndig in CSS.
• Jede potenzielle Schattenposition bekam auch einen eigenen Optionsknopf. (Ja, es ist viel, ich wei?.)
• Und um alles umzuwickeln, habe ich einen klassischen Reset -Taste in a eingeschlossen
  Verwenden , damit die Spieler zu jedem Zeitpunkt leicht von vorne beginnen k?nnen.

  Angesichts der schiere Anzahl der erforderlichen Elemente habe ich Mops verwendet, um die HTML effizienter zu generieren. Es war nur eine Komfortwahl. Es wirkt sich in keiner Weise auf die Logik oder das Verhalten des Puzzles aus.

  Unten finden Sie eine Probe des kompilierten HTML. Es mag auf den ersten Blick überw?ltigend aussehen (und dies ist nur ein Teil davon!), Aber es zeigt die strukturelle Komplexit?t. Dieser Abschnitt ist zusammengebrochen, um Ihren Bildschirm nicht zu nutzen, aber er kann erweitert werden, wenn Sie ihn erkunden m?chten.

  ?ffnen Sie den HTML -Code

  <div>
    <div></div>
    <div></div>
    <form>
      <input type="checkbox" autofocus>
      <button type="reset">Neu starten</button>
      <label for="start">Start</label>
      <div>
        <input type="radio" name="tan-active">
        <input type="radio" name="tan-active">
        <!-- Inputs for others tans -->
        <input type="radio" name="tan-active">
        <input type="radio" name="tan-rotation">
        <input type="radio" name="tan-rotation">
        <!--radios for 90, 225, 315, 360 -->
  
        <input type="checkbox" name="tan-rotation">
        <input type="checkbox" name="tan-rotation">
        <!-- radio for every possible shape shadows-->
  
        <label for="rotation-45">?</label>
        <label for="rotation-90">?</label>
        <!--radios for 90, 225, 315, 360 -->
        <label for="rotation-reset">?</label>
  
        <label for="blueTriangle-tan"></label>
        <div></div>
        <!-- labels for every tan and disabled div -->
  
        <label for="blueTriangle-tan-1-90"></label>
        <label for="blueTriangle-tan-1-225"></label>
        <!-- labels radio for every possible shape shadows-->
        <div></div>
      </div>
    </form>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

  Erstellen von Karten für Formdaten

  Jetzt, da das HTML -Skelett bereit ist, ist es Zeit, es mit etwas echter Kraft zu injizieren. Hier kommen unsere Sass -Karten ins Spiel, und hier beginnt die Puzzlungslogik zu gl?nzen.

  HINWEIS: Karten in SASS halten Tasten und Wertepaare und erleichtern Sie es einfach, einen Wert nach dem entsprechenden Schlüssel zu schauen. Wie Objekte in JavaScript, W?rterbücher in Python und na ja, Karten in c.

  Ich kartiere alle Kerndaten, die für die Steuerung jedes Tangram -Stücks (TAN) erforderlich sind: seine Farbe, Form, Position und sogar Interaktionslogik. Diese Karten enthalten:

  • TheBackground-Color für jede Br?une,
  • TheClip-Pathcoordinaten, die ihre Formen definieren,
  • die anf?ngliche Position für jede Tan,
  • Die Position des BlockingsDiv (der die Interaktion deaktiviert, wenn eine Tan ausgew?hlt ist),
  • Die Schattenpositionen (Koordinaten für die auf der Task Board angezeigte Silhouette der Tan),
  • die Netzinformationen und
  • Die Gewinnerkombinationen - die genauen Zielkoordinaten für jede Br?une, die die richtige L?sung markieren.

   $ farben: (blaufarben: #53a0e0, gelbfarben: #f7db4f, / * farben für jede braun * /);
  $ n-Kind-Grid: (1: (2, 3, 1, 2,), 2: (3, 4, 1, 2,), 4: (1, 2, 2, 3,), / * Weitere Eintr?ge, die hinzugefügt werden sollen * /);
  $ bluePosiblePositionen: (45: Keine, 90: (6.7, 11,2),), 135: Keine, 180: Keine, / * Positionen, die bis zu 360 Grad * /) definiert sind;
  / * Andere Tans *//
  
  / * Daten definiert für jede Tan */
  $ tansshapes: (
    Bluetriangle: (
      Farbe: map.get ($ colors, blaufarben),
      Clip-Pfad: (0 0, 50 50, 0 100,),
      ROT -BTN -Position: (-20, -25,),
      Exit-Mode-BTN-Position: (-20, -33,),
      Tan -Position: (-6, -37,),
      Diable -Labor -Position: (-12, -38,),
      Possenpositionen: $ blueposiblePositionen,
      Richtige Position: ((4.7, 13,5), (18,8, 13,3),),
      Transform-Ursprung: (4.17, 12,5,),
    ),
  );
  
  / * Verbleibende 7 Kombinationen *//
  $ winningcombinations: (
    Combo1: (
      (Bluetriangle, 1, 360),
      (Yellowtriangle, 1, 225),
      (Pinktriangle, 1, 180),
      (Redtriangle, 4, 360),
      (Purpletriangle, 2, 225),
      (Quadrat, 1, 90),
      (Polygon, 4, 90),
    ),
  );

  Sie k?nnen dies in Aktion auf CodePen sehen, wo diese Karten das tats?chliche Erscheinungsbild und das Verhalten jedes Puzzleteils vorantreiben. Zu diesem Zeitpunkt gibt es keine sichtbare ?nderung in der Vorschau. Wir haben die Daten einfach für die sp?tere Verwendung vorbereitet und gespeichert.

  Verwenden Sie Mixins zum Lesen aus Karten

  Die Hauptidee besteht darin, wiederverwendbare Mixins zu erstellen, die Daten aus den Karten lesen und bei Bedarf auf die entsprechenden CSS -Regeln anwenden.

  Aber vorher haben wir die Dinge auf ein h?heres Niveau erh?ht, indem wir eine Schlüsselentscheidung treffen: Wir haben nie fest codierte Einheiten direkt in den Karten. Stattdessen haben wir eine wiederverwendbare Nutzfunktion erstellt, die die gewünschte Einheit (z. B. Vmin, PX usw.) dynamisch zu einem numerischen Wert hinzufügt, wenn sie verwendet wird. Auf diese Weise k?nnen wir unsere Karten so verwenden, wie wir m?chten.

   @Function Get-Coordinaten ($ data, $ key, $ separator, $ unit) {
    $ koordinaten: null;
  
    // überprüfen Sie, ob das erste Argument eine Karte ist
    @if meta.type-of ($ data) == "map" {{
      // Wenn die Karte den angegebenen Schlüssel enth?lt
      @if map.has-key ($ data, $ key) {
        // Erhalten Sie den mit dem Schlüssel verknüpften Wert (erwartet eine Liste von Koordinaten)
        $ koordinaten: map.get ($ data, $ key);
      }
  
    // Wenn das erste Argument eine Liste ist
    } @else if meta.type-of ($ data) == "list" {
      // Stellen Sie sicher, dass der Schlüssel ein gültiger Index (1 basierend) innerhalb der Liste ist
      @if meta.type-of ($ key) == "Nummer" und $ key> 0 und $ key <p> Sicher, in der Vorschau taucht noch nichts auf, aber die wahre Magie beginnt jetzt.</p><p> Jetzt gehen wir weiter zum Schreiben von Mixins. Ich werde den Ansatz für den ersten Mixin im Detail erl?utern, und der Rest wird durch Kommentare beschrieben.</p><p> Der erste Mixin wird dynamisch graid-columnandGrid-Rowplacement-Regeln für untergeordnete Elemente basierend auf Werten anhand, die in einer Karte gespeichert sind, angewendet. Jeder Eintrag in der Karte entspricht einem Elementindex (1 bis 8) und enth?lt eine Liste von vier Werten: [Start-Col, End-Col, Startreihe, Endreihe].</p><pre rel="SCSS" data-line=""> @mixin tanagram-grid-positionierung ($ nth-Kind-Grid) {
    // Schleifen Sie die Nummern 1 bis 8, entsprechend den Tanam -Teilen
    @Für $ i von 1 bis 8 {
  
      // überprüfen Sie, ob die Karte einen Schlüssel für das aktuelle Stück enth?lt (1-8)
      @if map.has-key ($ n-te-Kind-Grid, $ i) {
  
        // Die Gitterwerte für dieses Stück erhalten: [Starts?ule, Ends?ule, Startreihe, Endreihe]
        $ values: map.get ($ n-Kind-Grid, $ i);
  
        // ziele auf das n -te Kind (Stück) und stelle seine Gitterpositionen ein
        &: nth-child (#{$ i}) {
          // Grid-S?ule festlegen: Start- und Endwerte basierend auf den ersten beiden Elementen in der Liste
          Grid-S?ule: #{list.nth ($ values, 1)} / #{list.nth ($ values, 2)};
  
          // Grid-Row setzen: Start- und Endwerte basierend auf den letzten beiden Elementen in der Liste
          Grid-Row: #{list.nth ($ values, 3)} / #{list.nth ($ values, 4)};
        }
      }
    }
  }

  Wir k?nnen erwarten, dass das folgende CSS generiert wird:

   .Tanagram-Box: N-te-Kind (1) {
    Grid-S?ule: 2/3;
    Gitterreihe: 1/2;
  }
  
  .Tanagram-Box: N-te-Kind (2) {
    Gitters?ule: 3/4;
    Gitterreihe: 1/2;
  }

  In diesem Mixin war mein Ziel tats?chlich, alle Formen (Br?une) zu erstellen. Ich benutze Clip-Pfad. Es gab Ideen, um ausgefallene SVG -Bilder zu verwenden, aber in diesem Testprojekt geht es eher um das Testen der Logik als um das Fokus auf wundersch?nes Design. Aus diesem Grund bestand die einfachste L?sung darin, die Elemente gem?? den Abmessungen zu schneiden, w?hrend sie sich noch auf dem Platz befinden (die anf?ngliche Position aller Tans).

  In diesem Fall wurde durch eine statische Berechnung die $ tansshapesmap mit TheClip-PathProperty aktualisiert:

   Clip-Pfad: (0 0, 50 50, 0 100);

  Dies enth?lt die Clippunkte für alle Br?une. Im Wesentlichen formt und f?rbt sich dieser Mixin jeweils entsprechend.

   @mixin set-tan-clip-path ($ tanname, $ values) {
    // Initialisieren Sie eine leere Liste, um die endgültigen Clip-Pfad-Punkte zu halten
    $ clip-Pfad-Punkte: ();
  
    // extrahieren Sie die "Clip-Pfad" -Daten aus der Karte, die Koordinatenpaare enth?lt
    $ clip-path-key: map.get ($ values, clip-path);
  
    // Holen Sie sich die Anzahl der Koordinatenpaare, um durchzuschleudern
    $ count: list.length ($ clip-path-Key);
  
    // durch jeden Koordinatenpunkt durchlaufen
    @Für $ i von 1 bis $ count {
      // Konvertieren Sie jedes Zahlenpaar in eine formatierte Koordinatenzeichenfolge mit Einheiten
      $ Current-Punkt: Get-Coordinates ($ clip-path-Key, $ i, ","%");
  
      // Fügen Sie die formatierte Koordinate zur Liste hinzu und trennen Sie jeden Punkt mit einem Komma
      $ clip-path-Punkte: list.append ($ clip-path-Punkte, #{$ current-point}, comma);
    }
  
    // Stil für das Vorschauelement (Laborversion) mit der konfigurierten Hintergrundfarbe
    #tan#{$ tanname} lab {
      Hintergrund: map.get ($ values, color);
      Clip-Pfad: Polygon (#{$ clip-Pfad-Punkte}); // Wenden Sie die vollst?ndige Liste der Clip-Pfad-Punkte an
    }
  
    // Tragen Sie den gleichen Clip-Pfad auf das tats?chliche Tan-Element an
    .#{$ tanname} {
      Clip-Pfad: Polygon (#{$ clip-Pfad-Punkte});
    }
  }

  und Ausgabe in CSS sollte sein:

   .bluetriangle {
    Clip-Pfad: Polygon (0% 0%, 50% 50%, 0% 100%);
  }
  / * Andere Tans *//

  Logik starten

  Okay, jetzt m?chte ich klarstellen, was zuerst passieren soll, wenn das Spiel geladen wird.

  Erstens mit einem Klick auf die Schaltfl?che Start alle Tans ?Gehen Sie zu ihren Positionen“. In Wirklichkeit weisen wir ihnen Atransform: Translate () mit spezifischen Koordinaten und einer Rotation zu.

   .Start: ~ .shadow #tanbluetrianglelab {
    Transform-Origin: 4,17VMin 12,5 VMin;
    Transformation: Translate (-6VMin, -37VMin) Drehung (360 Grad);
    Cursor: Zeiger;
  }

  Also behalten wir dieses Muster immer noch bei. Wir verwenden Transformation und ?ndern einfach die Positionen oder Winkel (in den Karten) der Tans und deren Schatten auf der Task -Board.

  Wenn eine Br?une angeklickt wird, wird die Rotationstaste angezeigt. Wenn Sie darauf klicken, sollte sich die Br?une um ihre Mitte drehen, und dies setzt sich mit jedem nachfolgenden Klick fort. Es gibt tats?chlich acht Optionsfelder, und mit jedem Klick verschwindet einer und der n?chste wird angezeigt. Wenn wir den letzten erreichen, verschwinden Sie das Klicken und das erste taucht wieder auf. Auf diese Weise erhalten wir den Eindruck, auf die gleiche Schaltfl?che zu klicken (sie sind natürlich gleich) und k?nnen unendlich auf die Br?une klicken (drehen). Genau das erm?glicht das folgende Mixin.

   @mixin set-tan-rotationsstaaten ($ tanname, $ values, $ angles, $ color) {
    // Dieser Mixin wendet dynamisch Rotations -UI -Stile basierend auf der Konfiguration eines TAN an.
    // Es steuert die Positionierung und das Aussehen von Rotationsschaltfl?chen und visuellem Feedback, wenn ein Rotationsstatus aktiv ist.
    @each $ angle in $ angles {
      & ~ #ROT #{$ Angle} {Transform: Translate (Get-Coordinate ($ values, Rot-Btn-Position, ', Vmin)); Hintergrund: $ color;}
      & ~ #Rotation- #{$ Angle}: geprüft {{
        @each $ key in map.keys ($ tansshapes) {
          & ~ #tan #{$ key} labres {Sichtbarkeit: sichtbar; Hintergrund: RGBA (0,0,0,0,4); }
          & ~ #tan #{$ key} Lab {Opazit?t: .3; }
          & ~ #Rotreset {Sichtbarkeit: sichtbar; }
        } 
      }
    }
  }

  Und das erzeugte CSS sollte sein:

   #Bluetriangle-Tan: Checked ~ #Rotation-45: geprüft ~ #tanbluetrianglelab {
    Transformation: Translate (-6vmin, -37VMin) drehen (45 Grad);
  }
  
  #Bluetriangle-Tan: Checked ~ #Rotation-45: geprüft ~ #tanbluetrianglelabres {
    Sichtbarkeit: versteckt;
  }

  OK, die folgenden Mixins verwenden die Blatt-Clip-Methandset-RotationMixine. Sie enthalten alle Informationen über die Tans und ihr Verhalten, auf die Tan geklickt wird und welche Rotation ausgew?hlt wird, sowie deren Positionen (wie im zweiten Mischung definiert).

   @mixin generate tan-f?rmige und interaktionen ($ tansshapes) {
  // Wendet die Styling -Logik- und UI -Interaktionen für jede einzelne Br?une -Form aus der Karte von $ tansshapes an.
    @each $ tanname, $ values ??in $ tansshapes {
      $ color: color.scale (map.get ($ values, color), $ hellness: 10%); 
      $ Angles: (45, 90, 135, 180, 225, 270, 315, 360); 
      @include set-tan-clip-path ($ tanname, $ values);
  
      ## {$ Tanname} -tan: Checked {
        & ~ #tan #{$ tanname} res {Sichtbarkeit: versteckt; }
        & ~ #tan #{$ Tanname} Lab {Opazit?t: 1! Wichtig; Hintergrund: #{$ color}; Cursor: auto;}
        @each $ key in map.keys ($ tansshapes) {
            & ~ #tan #{$ tanname} Res: geprüft ~ #tan #{$ key} Labres {Sichtbarkeit: sichtbar;}
        }
        & ~ #Rot45 {Anzeige: Flex; Sichtbarkeit: sichtbar;}
        & ~ #Rotreset {Transformation: Translate (Get-Coordinate ($ values, exit-mode-btn-position, ',', vmin)); }
        @include set-tan-rotationsstaaten ($ tanname, $ values, $ angles, $ color);
      }  
    }
  }

   @mixin set-initial-tan-position ($ tansshapes) {
  // Dieser Mixin legt die anf?ngliche Position und Transformation sowohl für die interaktiven ("Labra" als auch für Schatten- (`Labres`) -Versionen fest
  // jeder braunen Form, basierend auf Koordinaten in der Karte von $ tansshapes.
   @each $ tanname, $ values ??in $ tansshapes {
      & ~ .Shadow #tan #{$ tanname} lab {
        Transform-Origin: Get-Coordinaten ($ values, Transform-Origin, '', Vmin);
        Transformation: Translate (Get-Coordinate ($ values, tan-position, ', vmin)) drehen (360 °);
        Cursor: Zeiger;
      }
      & ~ .Shadow #tan #{$ tanname} labres {
        Sichtbarkeit: versteckt;
        Transformation: Translate (Get-Coordinaten ($ VULICE, Diable-Labor-Position, ', Vmin)); 
      }
    }
  }

  Wie bereits erw?hnt, ist eines der Dinge, die sichtbar werden, sein Schatten - eine Silhouette, die auf der Task -Board erscheint.

  Diese Schattenpositionen (Koordinaten) sind derzeit statisch definiert. Jeder Schatten verfügt über einen bestimmten Ort auf der Karte, und ein Mixin liest diese Daten und wendet sie mit TRANSFORM: translate () auf den Schatten an.

  Wenn die geklickte Tan gedreht wird, kann sich die Anzahl der sichtbaren Schatten auf der Taskboard sowie deren Winkel ?ndern, was erwartet wird.

  Natürlich wurde mit Namenskonventionen besondere Sorgfalt vorgesehen. Jedes Schattenelement erh?lt eine eindeutige ID, die aus dem Namen (von seiner übergeordneten Tan geerbt) und einer Zahl, die seine Sequenzposition für den angegebenen Winkel darstellt, hergestellt wird.

  Ziemlich cool, oder? Auf diese Weise vermeiden wir komplizierte Namensmuster vollst?ndig!

   @Mixin Render-possible-tan-Positionen ($ name, $ angle, $ m?glichePositionen, $ Sichtbarkeit, $ color, $ id, $ transformorigin) {
      // Dieses Mixin erzeugt Stile für m?gliche Positionen einer Br?unungsform basierend auf Namen, Rotationswinkel und Konfigurationskarte.
      // Es behandelt sowohl Quadrate als auch Polygone, normalisieren ihre Rotationswinkel entsprechend und wenden Sie Transformationsstile an, wenn Positionen vorhanden sind.}
    @if $ name == 'Square' {
      $ Angle: Normalize-Winkel ($ Angle); // Normalzujemo Ugao Ako Je u Pitanju Square
    } @else wenn $ name == 'polygon' {
      $ Angle: Normalize-Polygon-Winkel ($ Angle);
    }
    @if map.has-key ($ m?glichePositionen, $ angle) {
      $ values: map.get ($ m?glichePositionen, $ Angle);
  
      @if $ values! = keine {
        $ count: list.length ($ values);
  
        @Für $ i von 1 bis $ count {
          $ Position: Get-Coordinate ($ values, $ i, ',', vmin);
          & ~ #tan#{$ name} lab-#{$ i}-#{$ Angle} { 
            @if $ vissibility == sichtbar {
              Sichtbarkeit: sichtbar;
              Hintergrundfarbe: $ Farbe;
              Deckkraft: .2;
              Z-Index: 2;
              Transform-Origin: #{$ transformorigin};
              Transformation: Translate (#{$ Position}) rotieren (#{$ angle} Deg);
            } @else if $ vissibility == versteckt {Sichtbarkeit: versteckt; }
            &: Hover {Deckkraft: 0,5; Cursor: Zeiger; }
          }
        }
      }
    }
  }

  Das erzeugte CSS:

   #Bluetriangle-Tan: Checked ~ #Tanbluetrianglelab-1-360 {
    Sichtbarkeit: sichtbar;
    Hintergrundfarbe: #53A0E0;
    Opazit?t: 0,2;
    Z-Index: 2;
    Transform-Origin: 4,17VMin 12,5 VMin;
    Transformation: Translate (4,7 VMIN, 13,5 VMIN) Drehung (360 Grad);
  }

  Dieser n?chste Mixin ist an den vorherigen gebunden und verwaltet, wann und wie die tanischen Schatten aussehen, w?hrend ihre übergeordnete Br?une mit der Taste gedreht wird. Es h?rt den aktuellen Drehwinkel an und prüft, ob für diesen spezifischen Winkel Schattenpositionen definiert sind. Wenn ja, wird sie angezeigt; Wenn nicht - keine Schatten!

   @mixin render-funktionsf?hige Positionen für Rotation {
     // Dieses Mischung wendet die Drehung zu jeder Br?unungsform an. Es schl?gt jede Br?une durch, berechnet seine m?glichen Positionen für jeden Winkel und behandelt die Sichtbarkeit und Transformation.
     // Es stellt sicher, dass die Rotation korrekt angewendet wird, einschlie?lich der Behandlung der überg?nge zwischen verschiedenen BAN -Positionen und Sichtbarkeitszust?nden.
   @each $ tanname, $ values ??in $ tansshapes {
      $ m?glichePositionen: map.get ($ values, possenpositionen);
      $ possibletanscolor: map.get ($ values, color);
      $ validPosition: Get-Coordinaten ($ values, korrekte Position, ',', vmin);
      $ transformorigin: Get-Coordinaten ($ values, Transform-Origin, '', Vmin); 
      $ rotresposition: Get-Coordinaten ($ values, exit-mode-btn-position ',', vmin);
      $ Angle: 0;
      @Für $ i von 1 bis 8 {
        $ Angle: $ I * 45;
        $ Nextangle: if ($ Angle 45> 360, 45, $ Angle 45);
        @include Render-position-Feedback-on-Task ($ tanname, $ angle, $ m?glichePositionen, $ possibletanscolor, #{$ tanname} -Tan, $ validPosition, $ transformorigin, $ rotresposition);   
          ## {$ tanname} -tan {
          @Include Render-Possible-Tan-Positionen ($ Tanname, $ Angle, $ m?gliche Positionen, Hidden, $ possibletanscolor, #{$ tanname} -Tan, $ transformorigin)
        }
          ## {$ Tanname} -tan: Checked {
            @include Render-possible-tan-Positionen ($ tanname, 360, $ m?glichePositionen, sichtbar, $ possibletanscolor, #{$ tanname} -Tan, $ transformorigin);
            & ~ #Rotation- #{$ Angle}: geprüft {{
              @include Render-possible-tan-Positionen ($ tanname, 360, $ m?gliche Positionen, versteckt, $ possibletanscolor, #{$ tanname} -Tan, $ transformorigin);
              & ~ #tan#{$ tanname} lab {transform: translate (get-koordinaten ($ values, tan-position, ',', vmin)) drehen (#{$ Angle} Deg);}
              & ~ #tan #{$ tanname} labres {Sichtbarkeit: versteckt; }
              & ~ #ROT #{$ Angle} {Sichtbarkeit: versteckt; }
              & ~ #ROT #{$ Nextangle} {Sichtbarkeit: sichtbar} 
              @include Render-possible-tan-Positionen ($ tanname, $ angle, $ m?glichePositionen, sichtbar, $ possibletanscolor, #{$ tanname} -Tan, $ transformorigin);
          }
        }
      }
    }
  }

  Wenn der Schatten eines Br?uners angeklickt wird, sollte sich die entsprechende Br?une in die Position dieses Schattens bewegen. Das n?chste Mixin prüft dann, ob diese neue Position die richtige für die L?sung des Puzzles ist. Wenn es richtig ist, erh?lt die Br?une einen kurzen blinkenden Effekt und wird nicht unkompliziert, was signalisiert, dass sie korrekt platziert wurde. Wenn es nicht korrekt ist, bleibt die Br?une einfach am Standort des Schattens. Es gibt keinen Effekt und es bleibt draggierbar/klickbar.

  Natürlich gibt es eine Liste aller richtigen Positionen für jede Br?une. Da einige Tans die gleiche Gr??e haben - und einige k?nnen sich sogar zu gr??eren, vorhandenen Formen verbinden - haben wir mehrere gültige Kombinationen. Für diese Kamelaufgabe wurden alle berücksichtigt. Eine spezielle Karte mit diesen Kombinationen wurde zusammen mit einem Mixin erstellt, das sie liest und anwendet.

  Am Ende des Spiels, wenn alle Br?une in ihre richtigen Positionen gelegt werden, l?sen wir einen ?Zusammenführungs“ -Effekt aus - und die Silhouette des Kamels wird gelb. Zu diesem Zeitpunkt besteht die einzige verbleibende Aktion darin, auf die Schaltfl?che Neustart zu klicken.

  Nun, das war lang, aber das bekommen Sie, wenn Sie den Spa? (wenn auch hart und langwierig) w?hlen. Alles als Ode an CSS-Magie!