Pendant des années, je pensais que les jeux de glisser-déposer - en particulier ceux impliquant la rotation, la logique spatiale et la résolution de puzzle - étaient le domaine exclusif de JavaScript. Jusqu'à un jour, j'ai demandé à ai:

?Est-il possible de construire un jeu de puzzle Tangram entièrement interactif en utilisant uniquement CSS??

La réponse: "Non - pas vraiment. Vous aurez besoin de JavaScript." C'était toute la motivation dont j'avais besoin pour prouver le contraire.

Mais d'abord, posons la question évidente: pourquoi quelqu'un ferait-il cela?

Bien…

• Pour savoir jusqu'où CSS peut être poussé dans la création d'UIS interactives.
• Pour améliorer mes compétences CSS.
• Et c'est amusant!

Assez juste?

Maintenant, voici la vérité sans surprise: CSS n'est pas exactement con?u pour cela. Ce n'est pas une langue logique, et soyons honnêtes, ce n'est pas particulièrement dynamique non plus. (Bien s?r, nous avons des variables CSS et des fonctions intégrées pratiques maintenant, Hourra!)

En JavaScript, nous pensons naturellement en termes de fonctions, de boucles, de conditions, d'objets, de comparaisons. Nous écrivons la logique, abstraits des choses en méthodes et finissons finalement un paquet que le navigateur comprend. Et une fois qu'il est expédié? Nous regardons rarement ce dernier paquet JavaScript - nous nous concentrons simplement sur le maintien du maigre.

Maintenant, demandez-vous: n'est-ce pas exactement ce que Sass fait pour CSS?

Pourquoi devrions-nous écrire à la main des lignes infinies de CSS répétitives lorsque nous pouvons utiliser des mixins et des fonctions pour le générer - proprement, efficacement et sans se soucier du nombre de lignes qu'il faut, tant que la sortie est optimisée?

Ainsi, nous le mettons à l'épreuve et il s'avère que SASS peut remplacer JavaScript, du moins en ce qui concerne la logique de bas niveau et le comportement du puzzle. Avec rien d'autre que des cartes, des mixins, des fonctions et beaucoup de mathématiques, nous avons réussi à donner vie à notre puzzle Tangram, aucun javascript requis.

Laissez commencer les jeux (CSS uniquement)! ??

Le jeu

Le jeu se compose de sept pièces: le jeu de tangram classique. Naturellement, ces pièces peuvent être disposées en un carré parfait (et de nombreuses autres formes aussi). Mais nous avons besoin d'un peu plus que des pièces statiques.

Voici donc ce que je construis:

• Un objectif de puzzle, qui est la forme cible que le joueur doit recréer.
• Un bouton de démarrage qui mélange toutes les pièces dans une zone de mise en scène.
• Chaque pièce est cliquable et interactive.
• Le puzzle devrait informer l'utilisateur quand il se trompe d'une pièce et célébrer également quand il termine le puzzle.

La structure HTML

J'ai commencé par configurer la structure HTML, qui n'est pas une petite tache, compte tenu du nombre d'éléments impliqués.

• Chaque forme a re?u sept boutons radio. J'ai choisi des radios plut?t que des cases à cocher pour profiter de leur exclusivité intégrée. Un seul peut être sélectionné dans le même groupe. Cela a rendu beaucoup plus facile de suivre la forme et l'état actuellement actifs.
• Le bouton Démarrer? également une entrée radio. Une case à cocher aurait également pu fonctionner, mais pour la cohérence, je suis resté avec des radios à tous les niveaux.
• La carte du puzzle elle-même est juste un vieux vieux
  , simple et efficace.
• Pour la rotation, nous avons ajouté huit boutons radio, chacun représentant un incrément de 45 degrés: 45 °, 90 °, 135 °, jusqu'à 360 °. Ceux-ci simulent entièrement des contr?les de rotation dans CSS.
• Chaque position d'ombre potentielle a également obtenu son propre bouton radio. (Oui, c'est beaucoup, je sais.)
• Et pour tout envelopper, j'ai inclus un bouton de réinitialisation classique à l'intérieur d'un
  En utilisant , afin que les joueurs puissent facilement recommencer à tout moment.

  Compte tenu du nombre d'éléments requis, j'ai utilisé PUG pour générer le HTML plus efficacement. C'était purement un choix de commodité. Cela n'affecte en aucune fa?on la logique ou le comportement du puzzle.

  Vous trouverez ci-dessous un échantillon du HTML compilé. Cela peut sembler écrasant à première vue (et ce n'est qu'une partie de celui-ci!), Mais il illustre la complexité structurelle impliquée. Cette section est effondrée pour ne pas nuer votre écran, mais elle peut être élargie si vous souhaitez l'explorer.

  Code HTML ouvert

  <div>
    <div></div>
    <div></div>
    <form>
      <input type="checkbox" autofocus>
      <button type="reset">Redémarrage</button>
      <label for="start">Commencer</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>

  Création de cartes pour les données de forme

  Maintenant que le squelette HTML est prêt, il est temps de l'injecter avec un réel pouvoir. C'est là que nos cartes Sass entrent, et c'est là que la logique du puzzle commence à briller.

  Remarque: les cartes dans les paires de clés et les valeurs SASS Hold, et facilitent la recherche d'une valeur par sa clé correspondante. Comme des objets en JavaScript, les dictionnaires en python et, bien, les cartes en c.

  Je cartographier toutes les données de base nécessaires pour contr?ler chaque pièce Tangram (Tan): sa couleur, sa forme, sa position et même la logique d'interaction. Ces cartes contiennent:

  • Thebackground-Color pour chaque bronzage,
  • Theclip-Pathcoordontes qui définissent leurs formes,
  • la position initiale pour chaque bronzage,
  • La position du BlockingDiv (qui désactive l'interaction lorsqu'un beige est sélectionné),
  • Les positions de l'ombre (coordonnées pour la silhouette du tan affichée sur le tableau des taches),
  • les informations sur la grille, et
  • Les combinaisons gagnantes - la cible exacte coordonne pour chaque bronzage, marquant la bonne solution.

   $ Couleurs: (Color bleu: # 53A0E0, couleur jaune: # f7db4f, / * couleurs pour chaque bronzage * /);
  $ nth-child-grid: (1: (2, 3, 1, 2,), 2: (3, 4, 1, 2,), 4: (1, 2, 2, 3,), / * Plus d'entrées à ajouter * /);
  $ Blueposible Positions: (45: Aucun, 90: ((6.7, 11.2),), 135: Aucun, 180: Aucune, / * Positions définies jusqu'à 360 degrés * /);
  / * Autres bronzages * /
  
  / * Données définies pour chaque tan * /
  $ tansshapes: (
    Bluetriangle: (
      couleur: map.get ($ couleurs, couleur bleue),
      Clip Path: (0 0, 50 50, 0 100,),
      Position rot-btn: (-20, -25,),
      Position de mode de sortie-btn: (-20, -33,),
      Position bronzée: (-6, -37,),
      Diable-Lab Position: (-12, -38,),
      Pospositions: $ Blueposible Positions,
      position correcte: ((4.7, 13.5), (18.8, 13.3),),
      Transform-Origin: (4.17, 12.5,),
    ),
  ));
  
  / * 7 combinaisons restantes * /
  $ victorieux: ((
    combo1: (
      (Bluetriangle, 1, 360),
      (Yellowtriangle, 1, 225),
      (Pinktriangle, 1, 180),
      (Redtriangle, 4, 360),
      (violetriangle, 2, 225),
      (carré, 1, 90),
      (polygone, 4, 90),
    ),
  ));

  Vous pouvez le voir en action sur Codepen, où ces cartes entra?nent l'apparence et le comportement réels de chaque pièce de puzzle. à ce stade, il n'y a pas de changement visible dans l'aper?u. Nous avons simplement préparé et stocké les données pour une utilisation ultérieure.

  Utilisation de mixins pour lire à partir de cartes

  L'idée principale est de créer des mixins réutilisables qui liront les données des cartes et de les appliquer aux règles CSS correspondantes en cas de besoin.

  Mais avant cela, nous avons élevé les choses à un niveau supérieur en prenant une décision clé: nous n'avons jamais été codés en dure directement à l'intérieur des cartes. Au lieu de cela, nous avons construit une fonction d'utilité réutilisable qui ajoute dynamiquement l'unité souhaitée (par exemple, VMIN, PX, etc.) à toute valeur numérique lorsqu'elle est utilisée. De cette fa?on, quand peut utiliser nos cartes comme nous le voulons.

   @Function get-coordon
    $ coordonnées: null;
  
    // Vérifiez si le premier argument est une carte
    @if meta.type-of ($ data) == "map" {
      // Si la carte contient la clé spécifiée
      @if map.has-key ($ data, $ key) {
        // Obtenez la valeur associée à la clé (ce qui devrait être une liste de coordonnées)
        $ coordonnées: map.get ($ data, $ key);
      }
  
    // Si le premier argument est une liste
    } @else si meta.type-of ($ data) == "list" {
      // Assurez-vous que la clé est un index valide (basé sur 1) dans la liste
      @if meta.type-of ($ key) == "nombre" et $ key> 0 et $ key <p> Bien s?r, rien ne se présente dans l'aper?u, mais la vraie magie commence maintenant.</p><p> Maintenant, nous passons à l'écriture de mixins. Je vais expliquer l'approche en détail pour le premier mixin, et le reste sera décrit par des commentaires.</p><p> Le premier mélange applique dynamiquement des règles de Replayage-ColmnandGrid à des éléments enfants en fonction des valeurs stockées sur une carte. Chaque entrée de la carte correspond à un index d'élément (1 à 8) et contient une liste de quatre valeurs: [start-Col, endol, start-row, final].</p><pre rel="SCSS" data-line=""> @Mixin Tanagram-Grid Positioning ($ nth-child-grid) {
    // Boucle à travers les nombres 1 à 8, correspondant aux pièces Tanam
    @for $ i de 1 à 8 {
  
      // Vérifiez si la carte contient une clé pour la pièce actuelle (1-8)
      @if map.has-key ($ nth-child-grid, $ i) {
  
        // Obtenez les valeurs de la grille pour cette pièce: [start-colum, terminal-colum, start-row, final]
        $ valeurs: map.get ($ nth-child-grid, $ i);
  
        // cibler le nième enfant (pièce) et définir ses positions de grille
        &: nth-child (# {$ i}) {
          // Définir la colonne de grille: valeurs de démarrage et de fin basées sur les deux premiers éléments de la liste
          grid-column: # {list.nth ($ valeurs, 1)} / # {list.nth ($ valeurs, 2)};
  
          // Définir la grille: valeurs de démarrage et de fin basées sur les deux derniers éléments de la liste
          Grid-Row: # {list.nth ($ VALEUR, 3)} / # {list.nth ($ valeurs, 4)};
        }
      }
    }
  }

  Nous pouvons nous attendre à ce que le CSS suivant soit généré:

   .Tanagram-box: nth-child (1) {
    Colonne de grille: 2/3;
    Grid-Row: 1/2;
  }
  
  .Tanagram-box: nth-child (2) {
    Colonne de grille: 3/4;
    Grid-Row: 1/2;
  }

  Dans ce mixin, mon objectif était en fait de créer toutes les formes (tans). J'utiliseClip-path. Il y avait des idées pour utiliser des images SVG sophistiquées, mais ce projet de test consiste davantage à tester la logique plut?t qu'à se concentrer sur la belle conception. Pour cette raison, la solution la plus simple était de couper les éléments en fonction des dimensions alors qu'elles sont encore dans le carré (la position initiale de toutes les TAN).

  Ainsi, dans ce cas, grace à un calcul statique, le $ tansshapesmap a été mis à jour avec TheClip-Pathproperty:

   Path de clip: (0 0, 50 50, 0 100);

  Cela contient les points de clip pour toutes les bronzages. Essentiellement, ce mélange fa?onne et colore chaque bronzage en conséquence.

   @mixin set-tan-clip-path ($ tanname, $ valeurs) {
    // Initialisez une liste vide pour maintenir les points de chemin à clips finaux finaux
    $ Clip-Path-Point: ();
  
    // Extraire les données ?clip-path? de la carte, qui contient des paires de coordonnées
    $ clip-path-key: map.get ($ valeurs, clip-path);
  
    // obtient le nombre de paires de coordonnées pour faire passer
    $ Count: list.length ($ clip-path-key);
  
    // boucle à travers chaque point de coordonnée
    @for $ i de 1 à $ Count {
      // convertir chaque paire de nombres en une cha?ne de coordonnées formatée avec des unités
      $ Current-point: Get-coordonnées ($ clip-path-key, $ i, "", "%");
  
      // Ajouter les coordonnées formatées à la liste, en séparant chaque point avec une virgule
      $ clip-path-points: list.append ($ clip-path-points, # {$ current-point}, virgule);
    }
  
    // Style pour l'élément d'aper?u (version de laboratoire), en utilisant la couleur d'arrière-plan configuré
    #tan # {$ tanname} lab {
      Contexte: map.get ($ valeurs, couleur);
      clip-path: polygon (# {$ clip-path-points}); // applique la liste complète des points clip-chemin
    }
  
    // applique le même chemin à clip
    . # {$ tanname} {
      clip-path: polygon (# {$ clip-path-points});
    }
  }

  et la sortie dans CSS devrait être:

   .Bluetrianggle {
    Path de clip: polygone (0% 0%, 50% 50%, 0% 100%);
  }
  / * autres bronzages * /

  Démarrer la logique

  Très bien, je voudrais maintenant clarifier ce qui devrait arriver en premier lorsque le jeu se charge.

  Tout d'abord, en cliquant sur le bouton Démarrer, toutes les bronzages ?allez à leurs positions?. En réalité, nous les attribuons à ATRANSform: tradlate () avec des coordonnées spécifiques et une rotation.

   .start: vérifié ~ .Shadow #TanBluetrianGlelab {
    Transform-Origin: 4.17 Vmin 12.5Vmin;
    Transform: traduire (-6vmin, -37vmin) Rotate (360DEG);
    curseur: pointeur;
  }

  Donc, nous maintenons toujours ce modèle. Nous utilisons la transformée et changeons simplement les positions ou les angles (dans les cartes) de la Tans et de leurs ombres sur le tableau des taches.

  Lorsqu'un bronzage est cliqué, le bouton de rotation appara?t. En cliquant dessus, le bronzage doit tourner autour de son centre, et cela continue à chaque clic ultérieur. Il y a en fait huit boutons radio, et à chaque clic, on dispara?t et le suivant appara?t. Lorsque nous atteignons le dernier, en cliquant, il le fait dispara?tre et le premier réappara?t. De cette fa?on, nous avons l'impression de cliquer sur le même bouton (ils sont bien s?r stylisés) et de pouvoir cliquer (faire tourner le bronzage) infiniment. C'est exactement ce que le mélange suivant permet.

   @Mixin set-tan-rotation-states ($ tanname, $ valeurs, $ angles, $ couleur) {
    // Ce mélange applique dynamiquement les styles d'interface utilisateur de rotation basés sur la configuration d'un Tan.
    // Il contr?le le positionnement et l'apparence des boutons de rotation et la rétroaction visuelle lorsqu'un état de rotation est actif.
    @each $ angle dans $ angles {
      & ~ #ROT # {$ angle} {transform: tradlate (get-coordony ($ valeurs, rot-btn position, ',', vmin)); Contexte: $ couleur;}
      & ~ #ROTATION - # {$ angle}: vérifié {
        @each $ key dans map.keys ($ tansshapes) {
          & ~ #tan # {$ key} Labres {visibilité: visible; Contexte: RGBA (0,0,0,0,4); }
          & ~ #tan # {$ key} lab {opacity: .3; }
          & ~ #ROTRESET {Visibilité: Visible; }
        } 
      }
    }
  }

  Et le CSS généré devrait être:

   # Bluetriangle-Tan: vérifié ~ # rotation-45: vérifié ~ #TanBluetrianGlelab {
    Transform: traduire (-6vmin, -37vmin) Rotation (45DEG);
  }
  
  # Bluetrianggle-tan: vérifié ~ # rotation-45: vérifié ~ #TanBluetrianGleLabres {
    Visibilité: cachée;
  }

  Ok, les mixins suivants utilisent theset-clip-pathandset-rotationMixins. Ils contiennent toutes les informations sur les TAN et leur comportement par rapport auquel le Tan est cliqué et quelle rotation est sélectionnée, ainsi que leurs positions (telles que définies dans le deuxième mixin).

   @Mixin Générat-tan-tans and Interactions ($ tansshapes) {
  // Applique les interactions de la logique de style et de l'interface utilisateur pour chaque forme de bronzage individuel de la carte $ tansshapes.
    @each $ tanname, $ valent dans $ tansshapes {
      $ Color: Color.Scale (Map.get ($ VALEUR, COLOR), $ Lightss: 10%); 
      $ angles: (45, 90, 135, 180, 225, 270, 315, 360); 
      @include set-tan-clip-path ($ tanname, $ valeurs);
  
      ## {$ tanname} -tan: vérifié {
        & ~ #tan # {$ tanname} res {Visibility: Hidden; }
        & ~ #tan # {$ tanname} lab {opacity: 1!
        @each $ key dans map.keys ($ tansshapes) {
            & ~ #tan # {$ tanname} Res: vérifié ~ #tan # {$ key} labres {visibilité: visible;}
        }
        & ~ # rot45 {affichage: flex; visibilité: visible;}
        & ~ #ROTRESET {transform: tradlate (get-coordony ($ valeurs, exit-mode-btn position, ',', vmin)); }
        @include des états de rotation de set-tan ($ tanname, $ valeurs, $ angles, $ couleur);
      }  
    }
  }

   @Mixin set initial-tan position ($ tansshapes) {
  // Ce mixin définit la position et la transformation initiales pour les versions interactives (`Lab ') et Shadow (? Labres ?
  // de chaque forme de bronzage, sur la base des coordonnées fournies sur la carte $ tansshapes.
   @each $ tanname, $ valent dans $ tansshapes {
      & ~ .shadow #tan # {$ tanname} lab {
        Transform-Origin: get-coordon ($ VALEUR, Transform-Origin, '', vmin);
        Transform: tradlater (get-coordonnées ($ valeurs, position tan, ',', vmin)) rotation (360Deg);
        curseur: pointeur;
      }
      & ~ .shadow #tan # {$ tanname} labres {
        Visibilité: cachée;
        Transform: tradlate (get-coordon ($ VALEUR, Diable-Lab Position, ',', vmin)); 
      }
    }
  }

  Comme mentionné précédemment, lorsqu'un bronzage est cliqué, l'une des choses qui devient visible est son ombre - une silhouette qui appara?t sur le tableau des taches.

  Ces positions d'ombre (coordonnées) sont actuellement définies statiquement. Chaque ombre a une place spécifique sur la carte, et un mixin lit ces données et l'applique à l'ombre à l'aide de TRANSFORM: tradlate ().

  Lorsque le bronzage cliqué est tourné, le nombre d'ombres visibles sur le tableau des taches peut changer, ainsi que leurs angles, ce qui est prévu.

  Bien s?r, des soins spéciaux ont été pris avec des conventions de dénomination. Chaque élément de l'ombre obtient un ID unique, fabriqué à partir du nom (hérité de son bronzage parent) et un nombre qui représente sa position de séquence pour l'angle donné.

  Assez cool, non? De cette fa?on, nous évitons complètement les modèles de dénomination compliqués!

   @Mixin Render-posible-tan Positions ($ Name, $ angle, $ possibles posositions, $ visibilité, $ colore, $ id, $ transformorigin) {
      // Ce mélange génère des styles pour les positions possibles d'une forme de bronzage en fonction de son nom, de son angle de rotation et de sa carte de configuration.
      // il gère les carrés et les polygones, normalisant leurs angles de rotation en conséquence et appliquant des styles de transformation si les positions existent.}
    @if $ name == 'square' {
      $ Angle: normalisation-angle ($ Angle); // normalizujemo ugao ako je u pitanju carré
    } @else si $ name == 'polygon' {
      $ Angle: normaliser-polygon-angle ($ angle);
    }
    @if map.has-key ($ posositions possibles, $ angle) {
      $ VALEUR: Map.get ($ Possible Positions, $ angle);
  
      @if $ valeurs! = Aucun {
        $ Count: list.length ($ valeurs);
  
        @for $ i de 1 à $ Count {
          $ Position: Get-coordonnées ($ valeurs, $ i, ',', vmin);
          & ~ #tan # {$ name} lab - # {$ i} - # {$ angle} { 
            @if $ visibilité == Visible {
              Visibilité: visible;
              Color d'arrière-plan: $ couleur;
              Opacité: .2;
              Z-Index: 2;
              Transform-Origin: # {$ transformorigin};
              transform: tradlate (# {$ position}) rotation (# {$ angle} deg);
            } @else if $ visibilité == Hidden {visibilité: cachée; }
            &: Hover {Opacité: 0,5; curseur: pointeur; }
          }
        }
      }
    }
  }

  Le CSS généré:

   # Bluetrianggle-Tan: vérifié ~ # tanbluetrianglelab-1-360 {
    Visibilité: visible;
    Color d'arrière-plan: # 53A0E0;
    Opacité: 0,2;
    Z-Index: 2;
    Transform-Origin: 4.17 Vmin 12.5Vmin;
    Transformer: traduire (4.7vmin, 13,5vmin) Rotation (360DEG);
  }

  Ce prochain mixin est lié au précédent et gère quand et comment les ombres de bronzage apparaissent pendant que leur bronzage parent est tourné à l'aide du bouton. Il écoute l'angle de rotation de courant et vérifie s'il y a des positions d'ombre définies pour cet angle spécifique. S'il y en a, il les affiche; Sinon - pas d'ombres!

   @Mixin render les positions possibles par rotation {
     // Ce mélange applique une rotation à chaque forme de bronzage. Il boucle à travers chaque bronzage, calcule ses positions possibles pour chaque angle et gère la visibilité et la transformation.
     // Il garantit que la rotation est appliquée correctement, y compris la manipulation des transitions entre diverses positions de bronzage et les états de visibilité.
   @each $ tanname, $ valent dans $ tansshapes {
      $ Positions possibles: map.get ($ VALEUR, POSSOSOSITIONS);
      $ possibletanscolor: map.get ($ valeurs, couleur);
      $ validPosition: get-coordonnées ($ valeurs, position correcte, ',', vmin);
      $ transformorigin: get-coordonnées ($ valeurs, transform-origin, '', vmin); 
      $ ROTRESOSITION: Get-coordonnées ($ VALEUR, sortie-mode-btn position, ',', vmin);
      $ angle: 0;
      @for $ i de 1 à 8 {
        $ angle: $ i * 45;
        $ Nextangle: if ($ angle 45> 360, 45, $ angle 45);
        @include Render Position-Feedback-on-task ($ tanname, $ angle, $ possible posositions, $ possibleTanscolor, # {$ tanname} -tan, $ validPosition, $ transformorigin, $ rotResposition);   
          ## {$ tanname} -tan {
          @include Render-posible-tan Positions ($ tanname, $ angle, $ possible posositions, Hidden, $ possibletanscolor, # {$ tanname} -tan, $ transformorigin)
        }
          ## {$ tanname} -tan: vérifié {
            @include Render-posible-tan Positions ($ tanname, 360, $ possible posositions, visible, $ possibletanscolor, # {$ tanname} -tan, $ transformorigin);
            & ~ #ROTATION - # {$ angle}: vérifié {
              @include Render-posible-tan Positions ($ tanname, 360, $ possible posositions, Hidden, $ possibleTanscolor, # {$ tanname} -tan, $ transformorigin);
              & ~ #tan # {$ tanname} lab {transform: tradlate (get-coordon
              & ~ #tan # {$ tanname} Labres {visibilité: Hidden; }
              & ~ #ROT # {$ angle} {Visibilité: Hidden; }
              & ~ #ROT # {$ Nextangle} {Visibilité: Visible} 
              @include Render-posible-tan Positions ($ tanname, $ angle, $ possible posositions, visible, $ possibletanscolor, # {$ tanname} -tan, $ transformorigin);
          }
        }
      }
    }
  }

  Lorsque l'ombre d'un tan est cliquée, le bronzage correspondant doit se déplacer vers la position de cette ombre. Le mixin suivant vérifie ensuite si cette nouvelle position est la bonne pour résoudre le puzzle. S'il est correct, le bronzage obtient un bref effet clignotant et devient inclicable, signalant qu'il a été placé correctement. Si ce n'est pas correct, le bronzage reste simplement à l'ombre. Il n'y a aucun effet et il reste dragable / cliquable.

  Bien s?r, il y a une liste de toutes les positions correctes pour chaque bronzage. étant donné que certains Tans partagent la même taille - et que certains peuvent même se combiner pour former des formes plus grandes et existantes - nous avons plusieurs combinaisons valides. Pour cette tache de chameau, toutes ont été prises en compte. Une carte dédiée avec ces combinaisons a été créée, ainsi qu'un mixin qui les lit et les applique.

  à la fin du jeu, lorsque toutes les bronzages sont placés dans leurs positions correctes, nous déclenchant un effet de ?fusion? - et la silhouette du chameau devient jaune. à ce stade, la seule action restante consiste à cliquer sur le bouton Redémarrer.

  Eh bien, c'était long, mais c'est ce que vous obtenez lorsque vous choisissez le chemin amusant (quoique dur et long). Tout comme une ode à la magie uniquement CSS!