Pop (über) die Luftballons

Die Kraft von HTML und CSS ist immer erstaunlich. Die neuen interaktiven Merkmale der Popover -API beweisen erneut die erstaunlichen Ergebnisse, die allein mit beiden Sprachen erzielt werden können.

Sie haben vielleicht andere Tutorials gesehen, die die Funktionen der Popover -API zeigen, aber dieser Beitrag konzentriert sich mehr auf "vollständige Eroberung". Wir werden einige zusätzliche "lustige" Elemente wie Luftballons ... einige wörtliche "Spreng" -Effekte hinzufügen.

Ich habe ein Spiel nur mit HTML und CSS (natürlich) mit HTML und CSS erstellt und mich auf die Popover -API verlassen. Ihre Mission ist es, in einer Minute so viele Luftballons wie möglich zu stechen. Aber sei vorsichtig! Einige Luftballons (wie Guru sagte) "kriechen" und auslösen mehr Luftballons.

Ich nannte es geschickt pop (über) die Luftballons und wir werden es Schritt für Schritt zusammen machen. Sobald es fertig ist, wird es so aussehen (na ja, genau so):

Popover -Attribut

verarbeiten

Solange wir es mit dem Attribut

entwerfen, kann jedes Element als Popup-Box verwendet werden: popover

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

Wir müssen nicht einmal Werte für

bereitstellen. Standardmäßig ist der Anfangswert von popover popover und verwendet das, was als "leichtes Abschaltdown" in der Spezifikation bezeichnet wird. Dies bedeutet, dass die Popup-Box geschlossen werden kann, indem Sie überall außerhalb der Popup-Box klicken. Wenn die Popup -Box geöffnet ist, schließt ein anderes Popup -Box auf der Seite, sofern sie nicht miteinander verschachtelt sind. auto Poppboxen sind so voneinander abhängig. auto

Eine andere Option besteht darin,

auf popover Wert zu setzen: manual

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

Dies bedeutet, dass das Element manuell ein- und ausgeschaltet ist - wir müssen auf eine bestimmte Schaltfläche klicken, um es ein- und auszuschalten. Mit anderen Worten,

erstellt ein hartnäckiges Popup, das nur schließt, wenn Sie auf die richtige Schaltfläche klicken und völlig unabhängig von den anderen Popups auf der Seite ist. manual

Verwenden Sie das Element

als Ausgangspunkt

Eine der Herausforderungen beim Erstellen eines Spiels mit der Popover -API besteht darin, dass die Popup -Box bereits geöffnet ist, wenn Sie die Seite nicht laden können. Wenn unser Ziel es ist, das Spiel nur mit HTML und CSS zu erstellen, können Sie dieses Problem nicht mit JavaScript lösen.

Das

Element wird zu diesem Zeitpunkt benötigt. Im Gegensatz zu Popup-Boxen kann das details -Element standardmäßig geöffnet werden: details

<details open=""></details>

Wenn wir diesen Ansatz verfolgen, können wir eine Reihe von Tasten (Luftballons) und "Poke" alle Luftballons anzeigen, indem wir <p> </p> bis zum letzten ausschalten. Mit anderen Worten, wir können die Startballons in das Element Open <code><details></details> platzieren, damit sie angezeigt werden, wenn die Seite geladen wird. <code><details></details> Das nenne ich die Grundstruktur:

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

Auf diese Weise können wir auf den Ballon in

klicken, um <code><summary></summary> und "Poke" alle Tastenballons zu schließen und einen Ballon zu hinterlassen (der letzte <code><details></details> (wir werden später ansprechen, wie sie später entfernen können). <code><summary></summary>

Sie denken vielleicht, <dialog></dialog> ist eine semantischere Richtung für unser Spiel, Sie haben Recht. Es gibt jedoch zwei Nachteile bei der Verwendung von <dialog></dialog>, die wir hier nicht verwenden können:

1. Der einzige Weg, um die <dialog></dialog>, die beim Laden der Seite geöffnet ist, auszuschalten, besteht darin, JavaScript zu verwenden. Soweit ich weiß, können wir das Spiel auf keinen Fall hinzufügen, um die <dialog></dialog> zu schalten, die beim Laden der Seite eingeschaltet wird.
2. <dialog></dialog> ist modal und verhindert, dass sie beim Öffnen auf andere Inhalte klicken. Wir müssen den Spielern erlauben, Luftballons außerhalb von <dialog></dialog> zu stechen, um den Timer zu besiegen.

verwenden wir das <details open=""></details> Element als oberen Container für das Spiel und das normale <div> als Popup selbst, d. H. <code><div popover="">. Im Moment müssen wir nur sicherstellen, dass all diese Popup-Boxen und -tasten miteinander verbunden sind, sodass das Klicken auf die Schaltfläche das Popup-Feld öffnet. Möglicherweise haben Sie dies aus anderen Tutorials gelernt, aber wir müssen das Popup -Element mitteilen, auf welchen Taste es reagieren muss, und dann den Button mit mitteilen, welchen Popup es öffnen muss. Zu diesem Zweck stellen wir eine eindeutige ID für das Popup-Element (alle IDs) bereit und verweisen sie dann mit dem Attribut <code>popovertarget auf der Schaltfläche: :

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

Dies ist die Idee, wenn alles miteinander verbunden ist:

Öffnen und schließen Sie Popup-Box

In der letzten Demonstration wird ein bisschen mehr Arbeit benötigt. Ein Nachteil des Spiels ist bisher, dass das Klicken auf die Popup -Schaltfläche mehr Popups öffnet. Das macht das Spiel zu einfach.

Wir können das Öffnungs- und Schließverhalten trennen, indem wir das Attribut popovertargetaction auf der Schaltfläche festlegen (Nein, HTML -Spezifikationsautoren interessieren sich nicht für die Einfachheit). Wenn wir den Eigenschaftswert auf show oder hide festlegen, führt die Schaltfläche nur eine Aktion auf diesem bestimmten Popup aus.

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

Beachten Sie, dass ich eine neue Taste in <div> hinzugefügt habe, die auf eine andere <code><div> abzielt, die durch absichtlich ein oder ausgeschaltete Eigenschaft oben eingeschaltet ist. Sehen Sie, wie herausfordernd es ist, das Element (auf eine gute Weise) zu "stöbern": <em> </em> Stil Ballon <code>popovertargetaction Jetzt müssen wir den gleichen Stil für

und Button -Elemente festlegen, damit die Spieler sie nicht unterscheiden können. Bitte beachten Sie, dass ich über

und nicht

spreche. Dies liegt daran, dass <code><summary></summary> das tatsächliche Element des Containers ist, das wir klicken, um zu öffnen und zu schließen. <code><summary></summary> <details></details> Die meisten Arbeiten sind Standard -CSS -Arbeiten: Hintergrund, Füllung, Rand, Größe, Rand usw. festlegen. Es gibt jedoch einige wichtige Dinge, die nicht unbedingt intuitiv sind und einbezogen werden müssen. <code><summary></summary>

• Setzen Sie zuerst das <code><summary></summary> -Merkmal auf list-style-type auf dem none Element, um die Dreiecksmarke zu entfernen, die angibt, ob <code><details></details> ein- oder ausgeschaltet ist. Das Tag ist sehr nützlich und standardmäßig sehr gut, aber für solche Spiele ist es besser, die Aufforderung für eine bessere Herausforderung zu entfernen.
• Safari mag nicht die gleiche Methode. Um das <code><details></details> -Tag hier zu entfernen, müssen wir ein spezielles Pseudo-Element für Anbieter einstellen, und summary::-webkit-details-marker wird auf display: none; gesetzt.
• Es wäre großartig, wenn der Maus -Cursor angibt, dass der Ballon klickbar ist, sodass wir auch <code><summary></summary> auf dem cursor: pointer -Element einstellen können.
• Das letzte Detail besteht darin, das Attribut <code><summary></summary> auf user-select auf none festzulegen, um zu verhindern, dass der Ballon (nur Emoji -Text) ausgewählt wird. Dies macht sie eher wie Objekte auf der Seite.
• Ja, es ist jetzt 2024, und wir benötigen immer noch das Präfix -Attribut -webkit-user-select, um die Safari -Unterstützung zu berücksichtigen. Danke, Apple.

Geben Sie den gesamten Code in die <code><summary></summary> -Klasse ein, die wir für Schaltflächen und .balloon Elemente verwenden:

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

Ein Problem mit

Luftballons ist, dass einige von ihnen absichtlich nichts tun. Dies liegt daran, dass ihre geschlossenen Popup -Boxen nicht geöffnet sind. Die Spieler denken vielleicht, dass sie nicht auf einen bestimmten Ballon geklickt/geklickt haben oder das Spiel gebrochen ist. Fügen wir also einen Zoom hinzu, wenn sich der Ballon im -Anklick befindet: :active

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

Bonus: Da der Cursor eine Hand ist, die auf seinen Zeigefinger zeigt, ist es ein bisschen wie ein Ballon, mit Ihrem Finger einen Ballon zu stöbern. ???

Die Art und Weise, wie wir Luftballons auf dem Bildschirm verteilen, ist ein weiterer wichtiger Faktor. Ohne JavaScript können wir sie nicht zufällig platzieren, das ist also unmöglich. Ich habe viele Möglichkeiten ausprobiert, z. B. meine eigenen "zufälligen" Zahlen zu erstellen, die als benutzerdefinierte Eigenschaften definiert werden, die als Multiplikatoren verwendet werden können, aber ich kann den allgemeinen "zufälligen" Effekt nicht erhalten, ohne die Luftballons zu überlappen oder eine Art visuelles Muster zu erstellen.

Ich habe eine Klasse verwendet, um Luftballons in verschiedenen Zeilen und Spalten zu lokalisieren - nicht wie CSS -Gitter oder mehrere Spalten, sondern fiktive Zeilen und Spalten basierend auf physischer Interpolation. Es sieht ein bisschen wie ein Netz aus und ist nicht so "zufällig", wie ich es möchte, aber solange keine Luftballons die gleichen zwei Klassen haben, überlappen sie sich nicht.

Ich habe beschlossen, ein 8 × 8 -Raster zu verwenden, aber die erste "Reihe" und "Spalte" leer gelassen, damit der Ballon die linken und oberen Ränder des Browsers nicht verdeckt.

<details open=""></details>

Herzlichen Glückwunsch an den Spieler (oder nicht gratulieren)

Wir haben die meisten Spielkomponenten bereit, aber es ist besser, wenn ein Sieg Pop-up-Box dem Spieler beglückwünscht wird, um alle Luftballons innerhalb der angegebenen Zeit erfolgreich zu streichen.

Alles geht zurück zum <details open=""></details> Element. Sobald das Element nicht geöffnet ist, sollte das Spiel enden, und der letzte Schritt besteht darin, den letzten Ballon zu stechen. Wenn wir dem Element eine ID geben, z. #root Hier ist es großartig, einen display: none; pseudo-selektor zu haben, da wir es verwenden können, um das übergeordnete Element des

-Elements auszuwählen, sodass wir das untergeordnete Element dieses übergeordneten Elements aus auswählen können-ein neues Element mit

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

ID-um ein Pseudo-Pop-up-Box anzuzeigen, das die gratulierende Nachricht zum Player-Nachrichten zum Spieler zeigt. (Ja, ich weiß, dass es ironisch ist.)

:has() #root Wenn wir das Spiel zu diesem Zeitpunkt spielen, können wir die Siegesnachricht erhalten, ohne alle Luftballons herauszuholen. Auch hier schließt das manuelle Popup -Feld nicht, es sei denn, die richtige Schaltfläche wird geklickt - auch wenn wir sein Vorfahr #root Element schließen. #congrats

Gibt es eine Möglichkeit, in CSS zu wissen, ob die Popup-Box noch geöffnet ist? Ja, geben Sie

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

Pseudo-Klasse ein.

<details></details>

Pseudo-Klasse wählt ein geöffnetes Popup-Box aus. Wir können dies in Verbindung mit dem vorherigen

verwenden, um zu verhindern, dass Nachrichten angezeigt werden, wenn das Popup-Box noch auf der Seite geöffnet ist. Hier erfahren Sie, wie Sie diese miteinander verknüpfen, um wie eine :popover-open bedingte Aussage zu arbeiten.

:popover-open Herzlichen Glückwunsch werden nur eingegangen, wenn der Spieler tatsächlich :has() gewinnt. and

Im Gegensatz dazu sollten wir den Spieler über das Ende des Spiels informieren, wenn der Spieler nicht alle Luftballons stechen kann, bevor der Timer ein Minute abläuft. Da wir in CSS (zumindest noch nicht noch nicht) eine bedingte Aussage in CSS haben, werden wir eine einminütige Animation durchführen, damit diese Nachricht das Spiel beendet.

<details open=""></details>

, aber wir möchten nicht, dass die Fehlermeldung beim Anzeigen des Siegesbildschirms feuern kann, damit wir einen Selektor schreiben können, um zu verhindern, dass die -Rotschaft gleichzeitig mit der

-Rotschaft angezeigt wird.

if()

Wir brauchen einen Spieltimer

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

Spieler sollten wissen, wie viel zeitlich alle Luftballons auftreten. Wir können einen eher "einfachen" Timer mit einem Element erstellen, das die vollständige Breite des Bildschirms (100 VW) aufnimmt, horizontal skaliert und mit der obigen Animation übereinstimmt, mit der die #fail -Meldung verblassen kann. #congrats

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

Nur ein Fehlerpunkt kann das Spiel zu einfach machen. Versuchen wir also, ein zweites

Element und die zweite "Root" -ID

hinzuzufügen. In ähnlicher Weise können wir

verwenden, um zu prüfen, ob weder #fail und

Elemente geöffnet sind, und dann wird die

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

-Meldung angezeigt.

<details></details> #root2 Zusammenfassung :has #root Das einzige, was noch übrig ist, ist das Spiel zu spielen! #root2

lustig, oder? Ich bin sicher, wir können etwas Stärkeres ohne selbst auferlegte JavaScript-Methodenbeschränkungen aufbauen, und wir nehmen die Barrierefreiheit nicht ernst, aber die API zu begrenzen, ist sowohl Spaß als auch lehrreich, oder? Ich bin interessiert: Welche anderen seltsamen Ideen können Sie sich vorstellen, um Popup -Boxen zu verwenden? Vielleicht denken Sie an ein anderes Spiel, einige hübsche UI-Effekte oder eine kluge Möglichkeit, Pop-up-Boxen mit anderen aufstrebenden CSS-Funktionen wie Ankerpositionierung zu kombinieren. Was auch immer es ist, bitte teilen Sie es!