Temps de voyage CSS avec: Target

La création de jeux avec CSS, les cases à cocher et les techniques de bouton radio est notoire (ou largement connue). Mais il s'avère que d'autres éléments basés sur la saisie des utilisateurs peuvent également être habilement utilisés et utilisés pour la gamification. Les développeurs ont créé de nombreux cas de jeu CSS très cool, qui sont basés sur :hover pseudo-catégorie, et même des jeux basés sur la pseudo-catégorie :valid.

Cependant, j'ai trouvé que les Pseudo-classes :target semblent être sous-explorées dans ce domaine des compétences CSS. Après y avoir pensé, il s'agit d'une fonctionnalité CSS puissante sous-estimée: : Target nous permet de styliser n'importe quel élément en fonction du lien de saut sélectionné, ce qui signifie que le navigateur a une version simple du routage client intégré! Devenez des scientifiques fous et voyons où cela peut nous prendre.

AI invincible dans CSS

Ai-je connecté ces mots ensemble? Devrions-nous utiliser CSS frénétiquement jusqu'à ce que nous atteignions la singularité? Essayez de vaincre le jeu Tic Toe dans la feuille de style ci-dessous et décidez par vous-même.

Les feuilles de styles permettent parfois au jeu de se terminer par une égalité, vous avez donc au moins une doublure argentée.

Ne vous inquiétez pas! CSS n'est pas encore devenu Skynet. Comme tout astuce CSS, la règle de base pour déterminer si un jeu peut être mis en œuvre avec CSS est possible dans le nombre d'états de jeu . J'ai réalisé cela lorsque j'ai pu créer un solveur 4 × 4 Sudoku et j'ai constaté que la version 9 × 9 était presque impossible à mettre en œuvre. En effet, les astuces CSS dépendent finalement des sélecteurs qui répondent à l'entrée de l'utilisateur pour masquer et afficher l'état du jeu.

Si X passe en premier, Tic Toe a 5478 États juridiques qui peuvent être réalisés, et il existe un algorithme bien connu qui peut calculer le meilleur mouvement dans n'importe quel état juridique. Par conséquent, nous pouvons utiliser entièrement CSS pour implémenter les jeux Tic Toe.

D'accord, comment le faire?

Dans un sens, nous ne craquons pas du tout CSS, mais en utilisant CSS comme volonté de Dieu: cacher, afficher et animer le contenu. "Smart" réside dans la façon dont HTML est généré. C'est comme un livre "Choisissez votre propre aventure" qui contient tous les états possibles du multivers tic-toe, avec des carrés vides reliant le meilleur mouvement suivant de l'ordinateur.

Nous utilisons une variante de l'algorithme minimax implémenté dans Ruby pour le générer. Saviez-vous que Codepen prend en charge HAML (prend en charge Ruby Blocks), et pouvons-nous l'utiliser secrètement comme un terrain de jeu Ruby? Maintenant tu sais.

Chaque État généré par notre HAML ressemble à celui-ci dans HTML:

<div>
  <svg><circle></circle></svg><a href="https://www.php.cn/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

  <svg><circle></circle></svg><svg><circle></circle></svg><div></div>

  <a href="https://www.php.cn/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/7a50f770e0e910d3beffd653f7c4197e">
    <div></div>
  </a>
</div>

Avec juste une petite quantité de CSS étonnamment simple, nous pouvons utiliser le sélecteur

pour afficher uniquement l'état du jeu actuellement sélectionné. Nous ajouterons également une classe :target aux mouvements historiques de l'ordinateur - afin que nous ne déclencherons que des animations d'écriture manuscrite dans les derniers mouvements de l'ordinateur. Cela nous donne l'impression de jouer à des jeux sur un tableau, et en réalité, nous sautions entre différentes parties du document. .c

<div>
  <svg><circle></circle></svg><a href="https://www.php.cn/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

  <svg><circle></circle></svg><svg><circle></circle></svg><div></div>

  <a href="https://www.php.cn/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/7a50f770e0e910d3beffd653f7c4197e">
    <div></div>
  </a>
</div>

Lors de la sélection du lien de saut en cliquant sur le carré vide, le :target pseudo-classe affichera l'état du jeu mis à jour (.s), et le jeu de réponse pré-calculé sur l'ordinateur apparaît de manière animée (.c).

Veuillez noter la situation spéciale lorsque nous démarrons le jeu: Avant que l'utilisateur ne sélectionne un lien de saut, nous devons afficher la grille vide initiale. Le contenu du style n'est pas défini au début, donc une fois le lien de saut sélectionné, nous utilisons le sélecteur :target pour masquer l'état initial. De même, si vous créez une expérience à l'aide de :body:has(:target) #---------, vous devez rendre la vue initiale avant que l'utilisateur ne commence à interagir avec la page. :target

Résumé

Je n'entrerai pas dans la profondeur des raisons pour lesquelles nous allons implémenter cela dans CSS, plutôt que d'utiliser une approche "plus facile" de JavaScript. C'est juste une façon amusante et éducative de repousser les limites du CSS. Par exemple, nous pouvons le faire en utilisant des astuces à cocher classiques - en fait, quelqu'un l'a fait.

y a-t-il quelque chose d'intéressant à utiliser

? Je pense oui, parce que: :target

• Nous pouvons enregistrer des jeux dans CSS! Accédez à l'URL à tout moment avec le signet de statut que vous avez laissé et retournez.
• Vous pouvez utiliser les boutons "Back" et "Forward" du navigateur comme commandes de jeu. Le mouvement peut être défait en revenant ou en le mouvement de lecture en allant de l'avant. Imaginez combiner avec des astuces à cocher pour créer un jeu avec un mécanicien de voyage dans le temps dans la tradition de Braid. :target
• Partagez le statut de votre jeu. Cela a le potentiel de gagner des droits de présentation de type landus. Si vous parvenez à gagner ou à dessiner l'algorithme invincible CSS Tic Toe, vous pouvez montrer au monde vos réalisations en partageant des URL.
• Il s'agit d'un HTML complètement sémantique. Les astuces de case à cocher vous obligent à masquer les cases à cocher ou les boutons radio, donc c'est toujours une compétence et une bonne affaire douloureuse en matière d'accessibilité. Cette méthode est sans doute sans astuces, car nous utilisons simplement des liens de saut et des div et leurs styles. Cela peut même le faire - oserais-je dire - «plus facile» à offrir une expérience d'accès plus facile. Mais cela ne veut pas dire qu'il est facile d'accéder à la sortie de la boîte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!