Pop (sur) les ballons

La puissance de HTML et CSS est toujours incroyable. Les nouvelles fonctionnalités interactives de l'API Popover prouvent à nouveau les résultats étonnants qui peuvent être obtenus avec les deux langues seules.

Vous avez peut-être vu d'autres tutoriels montrant les capacités de l'API Popover, mais ce post se concentre davantage sur "Complete Conquest". Nous ajouterons des éléments "amusants" supplémentaires, tels que des ballons ... des effets littéraux "explosion".

J'ai créé un jeu en utilisant HTML et CSS uniquement (bien sûr) et je me pose de l'API Popover. Votre mission est de piquer autant de ballons que possible en une minute. Mais soyez prudent! Certains ballons (comme Guru l'a dit) "rampent" et déclenchent plus de ballons.

Je l'ai habilement nommé pop (sur) les ballons et nous le ferons pas à pas ensemble. Une fois terminé, il ressemblera à (enfin, exactement comme ça):

Traitement d'attribut popover

Tant que nous le concevons avec l'attribut

, tout élément peut être utilisé comme boîte contextuelle: popover

<div popover="">...</div>

Nous n'avons même pas besoin de fournir des valeurs pour

. Par défaut, la valeur initiale de popover est popover et utilise ce qu'on appelle "l'arrêt léger" dans la spécification. Cela signifie que la boîte contextuelle peut être fermée en cliquant n'importe où à l'extérieur de la boîte contextuelle. Lorsque la boîte contextuelle est ouverte, toute autre boîte contextuelle sur la page se ferme à moins qu'elles ne soient imbriquées ensemble. auto Les Popbox sont si interdépendantes. auto

Une autre option consiste à définir

sur popover valeur: manual

<div popover="manual">...</div>

Cela signifie que l'élément est activé et désactivé manuellement - nous devons cliquer sur un bouton spécifique pour l'activer et l'éteindre. En d'autres termes,

crée une popup obstiné qui ne se ferme que lorsque vous cliquez sur le bouton correct et est complètement indépendant des autres fenêtres sur la page. manual

Utilisez l'élément

comme point de départ

L'un des défis de la construction d'un jeu avec l'API Popover est que la boîte à fenêtre contextuelle est déjà ouverte lorsque vous ne pouvez pas charger la page ... Si notre objectif est de construire le jeu avec seulement HTML et CSS, vous ne pouvez pas résoudre ce problème avec JavaScript.

L'élément

est nécessaire pour le moment. Contrairement aux boîtes pop-up, l'élément details peut être ouvert par défaut: details

<details open=""></details>

Si nous adoptons cette approche, nous pouvons afficher un tas de boutons (ballons) et "poke" tous les ballons en éteignant <p> </p> jusqu'au dernier. En d'autres termes, nous pouvons placer les ballons de départ dans l'élément <code><details></details> afin qu'ils soient affichés lorsque la page est chargée. <code><details></details> C'est ce que j'appelle la structure de base:

<details open=""><summary>?</summary>???</details>

De cette façon, nous pouvons cliquer sur le ballon en

pour fermer <code><summary></summary> et "poke" tous les ballons de bouton, en laissant un ballon (le dernier <code><details></details> (nous allons aborder la façon de le supprimer plus tard). <code><summary></summary>

Vous pourriez penser que <dialog></dialog> est une direction plus sémantique pour notre jeu, vous avez raison. Mais il y a deux inconvénients à utiliser <dialog></dialog>, que nous ne pouvons pas utiliser ici:

1. La seule façon d'éteindre le <dialog></dialog> qui est ouvert lorsque la page est le chargement est d'utiliser JavaScript. Pour autant que je sache, il n'y a aucun moyen d'ajouter au jeu pour désactiver le <dialog></dialog> qui est activé lorsque la page se charge.
2. <dialog></dialog> est modal et empêche de cliquer sur d'autres contenus lors de l'ouverture. Nous devons permettre aux joueurs de piquer des ballons à l'extérieur de <dialog></dialog> pour vaincre la minuterie.

donc nous utiliserons l'élément <details open=""></details> comme conteneur supérieur pour le jeu et le normal <div> comme popup lui-même, c'est-à-dire <code><div popover="">. Pour l'instant, nous devons simplement nous assurer que toutes ces boîtes et boutons contextuels sont connectés afin que cliquer sur le bouton ouvre la boîte contextuelle. Vous avez peut-être appris cela à partir d'autres tutoriels, mais nous devons dire à l'élément popup à quel bouton il doit répondre, puis dire au bouton quel appartenance il doit s'ouvrir. Pour ce faire, nous fournissons un ID unique pour l'élément pop-up (tous les ID devraient l'être), puis le référez sur le bouton à l'aide de l'attribut <code>popovertarget:

<div popover="">...</div>

C'est l'idée où tout est connecté ensemble:

Boîte pop-up ouverte et fermée

Un peu plus de travail est nécessaire dans la dernière démonstration. Un inconvénient du jeu jusqu'à présent est que cliquer sur le bouton popup ouvrira plus de popups; Cela rend le jeu trop simple.

Nous pouvons séparer le comportement d'ouverture et de clôture en définissant l'attribut popovertargetaction sur le bouton (non, les auteurs de spécifications HTML ne se soucient pas de la simplicité). Si nous définissons la valeur de propriété sur show ou hide, le bouton effectuera une seule action sur cette fenêtre contextuelle particulière.

<div popover="manual">...</div>

Notez que j'ai ajouté un nouveau bouton dans <div> qui est défini pour cibler un autre <code><div>, qui est activé ou désactivé en définissant intentionnellement la propriété <em> ci-dessus. Voyez à quel point il est difficile de "percer" l'élément (dans le bon sens): </em> <code>popovertargetaction Ballon de style

Maintenant, nous devons définir le même style pour

et les éléments de bouton afin que les joueurs ne puissent pas les distinguer. Veuillez noter que je parle de

et non <code><summary></summary>. En effet, <code><summary></summary> est l'élément réel du conteneur que nous cliquez pour ouvrir et fermer. <code><details></details> <summary></summary> La plupart du travail est le travail CSS standard: Définissez l'arrière-plan, le remplissage, la marge, la taille, la bordure, etc. Mais il y a des choses importantes qui ne sont pas nécessairement intuitives et doivent être incluses. <code><details></details>

• Tout d'abord, définissez l'attribut <code><summary></summary> à list-style-type sur l'élément none pour supprimer la marque de triangle indiquant si <code><details></details> est activé ou désactivé. La balise est très utile et est très bonne par défaut, mais pour des jeux comme celui-ci, il vaut mieux supprimer l'invite pour un meilleur défi.
• Safari n'aime pas la même méthode. Pour supprimer la balise <code><details></details> ici, nous devons définir un pseudo-élément préfixe de fournisseur spécial, et summary::-webkit-details-marker est défini sur display: none;.
• Ce serait formidable si le curseur de la souris indique que le ballon est cliquable, nous pouvons également définir <code><summary></summary> sur l'élément cursor: pointer.
• Le dernier détail consiste à définir l'attribut <code><summary></summary> à user-select sur none pour empêcher la sélection du ballon (juste le texte emoji). Cela les rend plus comme des objets sur la page.
• Oui, c'est 2024 maintenant, et nous avons toujours besoin de l'attribut préfixe -webkit-user-select pour considérer le support Safari. Merci, Apple.

Mettez tout ce code dans la classe <code><summary></summary> que nous utiliserons pour les boutons et .balloon éléments:

<div popover="">...</div>

Un problème avec les ballons

est que certains d'entre eux sont intentionnellement ne font rien. En effet, leurs boîtes contextuelles fermées ne sont pas ouvertes. Les joueurs peuvent penser qu'ils n'ont pas cliqué / cliqué sur un ballon spécifique ou que le jeu est cassé, alors ajoutons un zoom lorsque le ballon est dans l'état :active de clic:

<div popover="manual">...</div>

bonus: parce que le curseur est une main pointant vers son index, cliquer sur un ballon, c'est un peu comme piquer un ballon avec votre doigt. ???

La façon dont nous distribuons des ballons à l'écran est un autre facteur important à considérer. Sans JavaScript, nous ne pouvons pas les placer au hasard, donc c'est impossible. J'ai essayé beaucoup de façons, comme la création de mes propres nombres "aléatoires", définis comme des propriétés personnalisées qui peuvent être utilisées comme multiplicateurs, mais je ne peux pas obtenir l'effet "aléatoire" global sans chevaucher les ballons ni créer une sorte de motif visuel.

J'ai fini par utiliser une classe pour localiser des ballons dans différentes lignes et colonnes - pas comme les grilles CSS ou plusieurs colonnes, mais des lignes et des colonnes fictives basées sur une interpolation physique. Cela ressemble un peu à une grille et n'est pas aussi "aléatoire" que je le veux, mais tant qu'aucun ballon n'a les deux mêmes classes, ils ne se chevauchent pas.

J'ai décidé d'utiliser une grille 8 × 8, mais j'ai laissé le premier blanc "Row" et "colonne" afin que le ballon n'obsonne pas les bords gauche et supérieur du navigateur.

<details open=""></details>

Félicitations au joueur (ou à ne pas féliciter)

Nous avons la plupart des composants de jeu prêts, mais il vaut mieux avoir une boîte pop-up gagnante félicitant le joueur d'avoir réussi tous les ballons dans le temps spécifié.

Tout remonte à l'élément <details open=""></details>. Une fois que l'élément n'est pas ouvert, le jeu devrait se terminer et la dernière étape consiste à piquer le dernier ballon. Donc, si nous donnons à l'élément un ID, par exemple , nous pouvons créer une condition qui le cache en utilisant #root quand il n'est pas ouvert: display: none;

<div popover="">...</div>

Ici, il est formidable d'avoir un

pseudo-sélectionneur car nous pouvons l'utiliser pour sélectionner l'élément parent de l'élément :has() de sorte que lorsque #root est fermé, nous pouvons sélectionner l'élément enfant de cet élément parent - un nouvel élément avec #root ID - pour afficher une boîte pseudo-pop-up qui montre le message de félicitations. (Oui, je sais que c'est ironique.) #congrats

<div popover="manual">...</div>

Si nous jouons le jeu en ce moment, nous pouvons recevoir le message de la victoire sans pousser tous les ballons. Encore une fois, la boîte contextuelle manuelle ne se fermera pas à moins que le bouton correct ne soit cliqué - même si nous fermons son élément ancêtre

. <code><details></details>

Y a-t-il un moyen de savoir dans CSS si la boîte pop-up est toujours ouverte? Oui, entrez

pseudo-classe. :popover-open

pseudo-classe sélectionne une boîte pop-up ouverte. Nous pouvons l'utiliser conjointement avec le précédent :popover-open pour empêcher les messages d'apparaître lorsque la boîte contextuelle est toujours ouverte sur la page. Voici comment les lier ensemble pour travailler comme une déclaration conditionnelle :has(). and

<details open=""></details>

Maintenant, les félicitations ne seront reçues que lorsque le joueur gagnera réellement

. En revanche, si le joueur ne peut pas piquer tous les ballons avant l'expiration du minuteur d'une minute, nous devons informer le joueur de la fin du jeu. Comme nous n'avons pas de déclaration conditionnelle

dans CSS (du moins pas encore), nous exécuterons une animation d'une minute afin que ce message disparaisse pour mettre fin au jeu.

if()

Mais nous ne voulons pas que le message d'échec se déclenche lorsque l'écran de victoire s'affiche, afin que nous puissions écrire un sélecteur pour empêcher le message

<details open=""><summary>?</summary>???</details>

d'être affiché simultanément avec le message

. #fail #congrats

Nous avons besoin d'une minuterie de jeu

<details open=""><summary>?</summary>?</details><div popover="manual">
  <h2>Level 1 Popup</h2>
</div>

Les joueurs devraient savoir combien de temps poppant tous les ballons. Nous pouvons créer une minuterie plutôt "simple" avec un élément qui prend toute la largeur de l'écran (100VW), l'échelle horizontalement et la correspond à l'animation ci-dessus, qui permet au message

de s'estomper.

#fail

Un seul point de défaillance peut rendre le jeu trop simple, essayons donc d'ajouter un deuxième élément

<details open=""><summary>?</summary>??</details><div popover="manual">
  <h2>Level 1 Popup</h2>?
</div>

et d'utiliser le deuxième ID "root",

. De même, nous pouvons utiliser <code><details></details> pour vérifier si les éléments ni l'un ni l'autre #root2 et :has sont ouverts, puis le message #root s'affiche. #root2 #congrats

Résumé

.balloon {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: block;
  font-size: 4em;
  height: 1em;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  -webkit-user-select: none; /* Safari fallback */
  user-select: none;
  width: 1em;
}

La seule chose qui reste est de jouer au jeu!

drôle, non? Je suis sûr que nous pouvons construire quelque chose de plus fort sans les restrictions de méthode JavaScript auto-imposées, et nous ne prenons pas l'accessibilité au sérieux, mais pousser l'API à la limite est à la fois amusant et éducatif, non? Je suis intéressé: quelles autres idées étranges pouvez-vous penser pour utiliser des boîtes contextuelles? Peut-être que vous pensez à un autre jeu, à quelques jolis effets d'interface utilisateur ou à une façon intelligente de combiner des boîtes pop-up avec d'autres fonctionnalités CSS émergentes comme le positionnement d'ancrage. Quoi qu'il en soit, partagez!