Catégories
Astuces et Design

Whack-a-Mole: l'édition CSS | Astuces CSS

Nous avons vu le piratage de la case à cocher et comment il peut être utilisé pour créer une machine à états complète en CSS. Aujourd'hui, nous allons pousser cette pensée un peu plus loin et créer un jeu simple de Whack-A-Mole, où le joueur doit réagir rapidement pour gagner… le tout sans une touche de JavaScript.

Cela peut sembler un peu idiot dans un langage qui n’a aucune notion de temporisateur ou d’intervalle, mais le secret est que CSS Est-ce que – il est simplement intégré dans une petite fonctionnalité appelée Animations CSS.

Jetez un œil à ce gestionnaire de double-clic. Notez que CSS ne sait pas ce qu'est un clic, encore moins un double-clic:

Comment ça marche? Voici un enregistrement des éléments importants, recolorés et ralentis:

L'idée est que lorsque vous cliquez sur le bouton pour la première fois, cela déplace l'élément du double-clic en place sous le curseur, mais cela provoque également le déplacement d'un élément de masquage vers le haut pour le recouvrir.

  • Si le deuxième clic vient assez rapidement après le premier (comme sur le côté gauche de l'enregistrement), il se produit sur l'élément double-clic (bleu).
  • Sinon (comme sur le côté droit de l'enregistrement), cela se produit sur l'élément de masquage (jaune), ce qui a l'effet d'un élément en un seul clic.

(Pour une explication approfondie, jetez un œil à mon article sur le gestionnaire de double-clic pur-CSS ici.)

Il y a deux idées en jeu ici:

  1. Les animations peuvent être utilisées pour gérer les états selon un modèle défini. (J'utilise le terme "état" de manière vague.)
  2. En modifiant la position d'un élément, nous pouvons changer si un utilisateur est autorisé ou non à effectuer une action.

C’est tout ce dont nous avons besoin!

Maintenant, au lieu de faire défiler notre cible dans la vue, nous pourrions plutôt utiliser animation-timing-function: step-end pour le faire entrer et sortir, un peu comme une taupe dans un trou:

J'ai essayé plusieurs options différentes pour écarter la taupe et changer sa position absolue – ici left – semble fonctionner le mieux. Utiliser une traduction serait pratique, mais laisse malheureusement Firefox penser que le curseur est sur le mauvais élément car changer transform dans le moteur de mise en page Gecko ne déclenche pas une nouvelle mise en page. (Normalement, ce serait une bonne chose pour des raisons de performances, mais pas tant pour notre petite démo!)

Avec un peu de style, nous pouvons le faire ressembler davantage à un élément de jeu:

La «taupe» ici est essentiellement une étiquette CSS restylée qui déclenche le hack de la case à cocher. Le trou aussi. Lorsque l’animation de la taupe prend le dessus sur le trou, un clic dans la région déclenche l’entrée radio de la taupe; lorsque la taupe est à l'écart, un clic déclenche l'entrée radio du trou.

L'étape suivante consiste à placer quelques trous l'un à côté de l'autre et à faire rebondir les taupes parmi eux, chacun sur un négatif différent. animation-delay. Avec une machine d'état qui lit laquelle des taupes ont été touchées et lesquels des trous ont été effondrés, cela se transforme en un petit jeu soigné.

J'ai utilisé de courts scripts Python pour générer à la fois les sélecteurs de machine à états et les images clés de la taupe. Sinon, cela devient un peu compliqué pour le codage manuel. C'est principalement parce que CSS n'a pas non plus de concept de nombres aléatoires, ce qui ne nous laisse pas d'autre choix que de coder en dur le comportement de la taupe «aléatoire».

Voilà: un jeu complet basé sur des réactions, entièrement en HTML et CSS.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *