バルーンのポップ（オーバー）

HTMLとCSSの力は常に驚くべきものです。ポップオーバーAPIの新しいインタラクティブな機能は、両方の言語だけで達成できる驚くべき結果を再び証明します。

ポップオーバーAPIの機能を示す他のチュートリアルを見たことがあるかもしれませんが、この投稿では「完全な征服」に焦点を当てています。風船など、いくつかの追加の「楽しい」要素を追加します...文字通りの「ブラスト」効果。

HTMLとCSSのみ（もちろん）を使用してゲームを作成し、ポップオーバーAPIに依存しています。あなたの使命は、1分でできるだけ多くの風船を突くことです。しかし、注意してください！一部の風船（グルが言ったように）は「rawっている」ものであり、より多くの風船を引き起こします。

私はそれを巧妙に名前が付けましたポップ（上）風船そして、私たちはそれを段階的に一緒にします。完了すると、それは（まあ、まさにこのように）のようになります：

ポップオーバー属性の処理

属性を使用して設計する限り、任意の要素はポップアップボックスとして使用できます。 popover

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

の値を提供する必要さえありません。デフォルトでは、

の初期値はpopoverであり、仕様で「軽量シャットダウン」と呼ばれるものを使用します。これは、ポップアップボックスの外側のどこにでもクリックしてポップアップボックスを閉じることができることを意味します。ポップアップボックスが開いていると、ページ上の他のポップアップボックスは、それらがネストされていない限り閉じます。 popoverポップボックスは非常に依存しています。 auto auto別のオプションは、

〜

値を設定することです。 popover manualこれは、要素が手動でオン /オフになっていることを意味します。特定のボタンをクリックして、オンとオフにする必要があります。言い換えれば、

は、正しいボタンをクリックして、ページ上の他のポップアップから完全に独立しているときにのみ閉じる頑固なポップアップを作成します。

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

manual要素を開始点

として使用します

ポップオーバーAPIでゲームを構築する課題の1つは、ページをロードできないときにポップアップボックスが既に開いていることです...私たちの目標がHTMLとCSSのみでゲームを構築することである場合、JavaScriptでこの問題を解決することはできません。

この時点で

要素が必要です。ポップアップボックスとは異なり、デフォルトで

要素を開くことができます：

details このアプローチをとると、ボタン（風船）の束を表示し、最後のボタンをオフにすることで、すべての風船を「突く」ことができます。言い換えれば、ページがロードされたときに表示されるように、開始バルーンをOpen <code>details 要素に配置できます。

<details open=""></details>

これは私が基本構造と呼んでいるものです：

<details></details> この方法で、<details></details>のバルーンをクリックして

を閉じ、すべてのボタンバルーンを「ポーク」し、バルーンを残します（最後の

（後で削除する方法に対処します）。

<dialog></dialog>は私たちのゲームのよりセマンティックな方向だと思うかもしれません。あなたは正しいです。ただし、<dialog></dialog>を使用することには2つの欠点があります。ここでは使用できません。

ページが読み込まれているときに開いている
1. をオフにする唯一の方法は、JavaScriptを使用することです。私の知る限り、ゲームに追加してページが読み込まれているときにオンになっている<dialog></dialog>をオフにする方法はありません。 <dialog></dialog>
2. はモーダルであり、開いたときに他のコンテンツをクリックするのを防ぎます。プレーヤーがタイマーを打ち負かすために<dialog></dialog>の外側の風船を突くようにする必要があります。 <dialog></dialog>
したがって、

したがって、ゲームの上部コンテナとして

要素を使用し、通常の<details open=""></details>をポップアップ自体、つまり<div>を使用します。とりあえず、これらのポップアップボックスとボタンがすべて接続されていることを確認するだけで、ボタンをクリックするとポップアップボックスが開きます。他のチュートリアルからこれを学んだかもしれませんが、どのボタンに応答する必要があるかをポップアップ要素に伝えてから、どのポップアップを開く必要があるかを指示する必要があります。これを行うには、ポップアップ要素に一意のIDを提供し（すべてのIDが必要です）、<code><div popover="">属性を使用してボタンに参照してください：<code>popovertarget

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

これはすべてが一緒に接続されているときのアイデアです：

ポップアップボックスを開閉して閉じます

最後のデモでもう少し作業が必要です。これまでのゲームの欠点の1つは、ポップアップボタンをクリックすると同じボタンを再度開くと消えます。これにより、ゲームが簡単になります。

ボタンに

属性を設定することで、開閉動作を分離できます（いいえ、HTML仕様著者は、シンプルさを気にしません）。プロパティ値をpopovertargetactionまたはshowに設定すると、ボタンはその特定のポップアップで1つのアクションのみを実行します。 hide

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

に新しいボタンを追加したことに注意してください。これは、上記の<div>プロパティを意図的に設定することでオンまたはオフになっている別の<code><div>をターゲットにするように設定されています。 （良い意味で）要素を「突く」ことがどれほど挑戦的であるかを見てください：<em> </em>スタイルバルーン<code>popovertargetaction ここで、プレイヤーがそれらを区別できないように、

およびボタン要素に対して同じスタイルを設定する必要があります。私は

について話していることに注意してください

。これは、クリックして開閉するコンテナの実際の要素であるためです。 <summary></summary> <summary></summary>作業のほとんどは標準的なCSS作業です。背景、塗りつぶし、マージン、サイズ、ボーダーなど。しかし、必ずしも直感的ではなく、含める必要があるいくつかの重要なことがあります。 <details></details>

最初に、
• 要素上の<summary></summary>属性をlist-style-type要素に設定して、noneがオンかオフかを示す三角形マークを削除します。タグは非常に便利で、デフォルトでは非常に優れていますが、このようなゲームの場合、プロンプトを削除してより良い挑戦をすることをお勧めします。 <details></details>
Safariは同じ方法が好きではありません。ここで
• タグを削除するには、特別なベンダーのプレフィックス擬似要素を設定する必要があり、<details></details>をsummary::-webkit-details-markerに設定する必要があります。 display: none; マウスカーソルがバルーンがクリック可能であることを示している場合は素晴らしいことです。したがって、
要素に
• を設定することもできます。 <summary></summary> cursor: pointer最後の詳細は、
属性を
• on<summary></summary>に設定して、バルーン（絵文字のテキストだけ）が選択されないようにすることです。これにより、ページ上のオブジェクトのようになります。 user-select noneはい、今は2024年ですが、Safariサポートを検討するには、プレフィックス
属性がまだ必要です。ありがとう、アップル。
• -webkit-user-select このコードはすべて、ボタンと
要素に使用するクラスにすべてのコードを入れます。

バルーンの問題の1つは、それらのいくつかが意図的に<summary></summary>.balloonであることです。これは、閉じたポップアップボックスが開いていないためです。プレイヤーは、特定のバルーンをクリック/クリックしていない、またはゲームが壊れていると思うかもしれません。そのため、バルーンがクリックの状態にあるときにズームを追加しましょう：

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

ボーナス：カーソルは人差し指を指す手であるため、バルーンをクリックすることは、指で風船を突くようなものです。 ???:active

画面に風船を配布する方法は、考慮すべきもう1つの重要な要素です。 JavaScriptがなければ、ランダムに配置することはできないため、これは不可能です。私は、乗数として使用できるカスタムプロパティとして定義された独自の「ランダムな」数値を作成するなど、多くの方法を試しましたが、風船を重ねたり、ある種の視覚パターンを構築せずに、全体的な「ランダム」効果を得ることができません。

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

クラスを使用して、CSSグリッドや複数の列とは異なる列や列の風船を見つけることになりましたが、物理的補間に基づいて架空の行と列を見つけました。それは少しグリッドのように見え、私が望むほど「ランダム」ではありませんが、バルーンが同じ2つのクラスを持っていない限り、それらは互いに重なりません。 8×8グリッドを使用することにしましたが、バルーンがブラウザの左端と上縁を不明瞭にしないように、最初の「行」と「列」が空白を残しました。

プレイヤーにおめでとうございます（祝福しないでください）

ゲームコンポーネントのほとんどは準備ができていますが、指定された時間内にすべてのバルーンを正常に突っ込んだことをプレイヤーに祝福するポップアップボックスを持っている方が良いでしょう。

すべてが<details open=""></details>要素に戻ります。要素が開いていないと、ゲームは終了し、最後のステップは最後のバルーンを突くことです。したがって、要素にIDを与えると、例えば。 #rootここでは、display: none;要素の親要素を選択するために

擬似セレクターを使用することは素晴らしいことです。 （はい、私はそれが皮肉だと知っています。）

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

:has()現時点でゲームをプレイすると、すべての風船を突き出さずに勝利メッセージを受信できます。繰り返しますが、正しいボタンがクリックされない限り、マニュアルポップアップボックスは閉じません。 #root #rootポップアップボックスがまだ開いているかどうかをCSSで知る方法はありますか？はい、#congratspseudoクラスを入力します。

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

pseudo-classは、開いたポップアップボックスを選択します。これを以前の<details></details>と併せて使用して、ページでポップアップボックスがまだ開いているときにメッセージが表示されないようにすることができます。これらを一緒にリンクして

条件付きステートメントのように機能する方法を次に示します。

:popover-open

さあ、おめでとうございます。プレイヤーが実際に勝ったときにのみ

になります。 :popover-open 対照的に、1分間のタイマーが期限切れになる前にプレイヤーがすべての風船を突くことができない場合、ゲームの終了のプレイヤーに通知する必要があります。 CSSに:has()条件ステートメントはないため（少なくともまだ）、1分間のアニメーションを実行して、このメッセージがゲームを終了するようになります。 and

<details open=""></details>

しかし、勝利画面が表示されたときに故障メッセージが発射されたくないので、

メッセージと同時に表示されるのを防ぐためにセレクターを書き込むことができます。

ゲームタイマーが必要です

if()プレイヤーは、すべての風船をどれだけの時間ポップしているかを知っている必要があります。画面の全幅（100VW）を占有し、水平方向にスケーリングし、上記のアニメーションと一致する要素を備えた「シンプルな」タイマーを作成できます。

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

1つの障害ポイントのみがゲームを簡単にする可能性があるため、2番目の#fail要素を追加し、2番目の「ルート」ID #congratsを使用してみましょう。同様に、

を使用して、

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

要素と

要素のいずれも開いていないかどうかを確認し、

メッセージが表示されます。

#fail

要約

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

残っている唯一のことは、ゲームをプレイすることです！ <details></details>

おかしいですよね？自発的なJavaScriptメソッドの制限なしに何か強力なものを構築できると確信していますが、アクセシビリティを真剣に受け止めているわけではありませんが、APIを制限に押し上げることは楽しくて教育的ですよね？ 私は興味があります：ポップアップボックスを使用するために他にどんな奇妙なアイデアを考えることができますか？たぶん、別のゲーム、いくつかのかなりのUI効果、またはポップアップボックスをアンカーポジショニングなどの他の新興CSS機能と組み合わせる巧妙な方法を考えるかもしれません。それが何であれ、共有してください！