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.

<div>
  <svg><circle></circle></svg><a href="//m.sbmmt.com/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

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

  <a href="//m.sbmmt.com/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="//m.sbmmt.com/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="//m.sbmmt.com/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="//m.sbmmt.com/link/7a50f770e0e910d3beffd653f7c4197e">
    <div></div>
  </a>
</div>

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="//m.sbmmt.com/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

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

  <a href="//m.sbmmt.com/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="//m.sbmmt.com/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="//m.sbmmt.com/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="//m.sbmmt.com/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

? 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!