Pop (lebih) belon

Kuasa HTML dan CSS sentiasa menakjubkan. Ciri -ciri interaktif baru API Popover sekali lagi membuktikan hasil yang luar biasa yang dapat dicapai dengan kedua -dua bahasa sahaja.

Anda mungkin melihat tutorial lain yang menunjukkan keupayaan API Popover, tetapi jawatan ini memberi tumpuan lebih kepada "penaklukan lengkap". Kami akan menambah beberapa elemen "menyeronokkan" tambahan, seperti belon ... beberapa kesan literal "letupan".

Saya mencipta permainan menggunakan HTML dan CSS sahaja (tentu saja) dan bergantung pada API Popover. Misi anda adalah untuk mencucuk sebanyak mungkin belon dalam satu minit. Tetapi berhati -hati! Sesetengah belon (seperti yang dikatakan Guru) "merangkak" dan mencetuskan lebih banyak belon.

Saya bijak menamakannya pop (lebih) belon dan kami akan membuat langkah demi langkah bersama. Setelah selesai, ia akan kelihatan seperti (baik, betul -betul seperti ini):

memproses atribut popover

Selagi kita merancangnya dengan atribut

, mana-mana elemen boleh digunakan sebagai kotak pop timbul:

popover

Kami tidak perlu memberikan nilai untuk

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

. Secara lalai, nilai awal

adalah popover dan menggunakan apa yang disebut "penutupan ringan" dalam spesifikasi. Ini bermakna kotak pop timbul boleh ditutup dengan mengklik di mana-mana di luar kotak pop timbul. Apabila kotak pop timbul dibuka, mana -mana kotak pop timbul lain di halaman ditutup kecuali mereka bersarang bersama. popover Popboxes begitu saling bergantung. auto auto pilihan lain adalah untuk menetapkan

ke

nilai: popover manual

Ini bermakna elemen itu dihidupkan secara manual dan dimatikan - kita perlu mengklik butang tertentu untuk menghidupkan dan mematikannya. Dalam erti kata lain,

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

mencipta pop timbul yang degil yang hanya ditutup apabila anda mengklik butang yang betul dan sepenuhnya bebas daripada popup lain pada halaman.

manual Gunakan elemen

sebagai titik permulaan

Salah satu cabaran membina permainan dengan API Popover ialah kotak pop timbul sudah dibuka apabila anda tidak dapat memuatkan halaman ... jika matlamat kami adalah untuk membina permainan dengan hanya HTML dan CSS, anda tidak dapat menyelesaikan masalah ini dengan JavaScript.

elemen

diperlukan pada masa ini. Tidak seperti kotak pop timbul, elemen

boleh dibuka secara lalai: details details

Jika kita mengambil pendekatan ini, kita boleh memaparkan sekumpulan butang (belon) dan "mencucuk" semua belon dengan mematikan <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;details open=&quot;&quot;&gt;&lt;/details&gt;</pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> sehingga yang terakhir. Dalam erti kata lain, kita boleh meletakkan belon permulaan di elemen terbuka

supaya ia dipaparkan apabila halaman dimuatkan. <details></details> <details></details> inilah yang saya panggil struktur asas:

Dengan cara ini, kita boleh mengklik belon di

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

untuk menutup <p> </p> dan "Poke" semua belon butang, meninggalkan belon (yang terakhir <summary></summary> (kita akan menangani cara membuangnya kemudian). <details></details>

Anda mungkin berfikir <dialog></dialog> adalah arah yang lebih semantik untuk permainan kami, anda betul. Tetapi terdapat dua kelemahan untuk menggunakan <dialog></dialog>, yang tidak dapat kita gunakan di sini:

1. Satu -satunya cara untuk mematikan <dialog></dialog> yang dibuka apabila halaman dimuatkan adalah menggunakan JavaScript. Setakat yang saya tahu, tidak ada cara kita boleh menambah permainan untuk mematikan <dialog></dialog> yang dihidupkan apabila halaman dimuatkan.
2. <dialog></dialog> adalah modal dan menghalang mengklik pada kandungan lain apabila dibuka. Kita perlu membenarkan pemain mencucuk belon di luar <dialog></dialog> untuk mengalahkan pemasa.

jadi kami akan menggunakan elemen <details open=""></details> sebagai bekas teratas untuk permainan dan normal <div> sebagai popup itu sendiri, iaitu <code><div popover="">. Buat masa ini, kita hanya perlu memastikan bahawa semua kotak dan butang pop timbul disambungkan bersama supaya mengklik butang membuka kotak pop timbul. Anda mungkin telah mempelajari ini dari tutorial lain, tetapi kami perlu memberitahu elemen popup yang butang yang diperlukan untuk bertindak balas, dan kemudian memberitahu butang yang pop timbul untuk dibuka. Untuk melakukan ini, kami menyediakan ID unik untuk elemen pop timbul (semua ID harus) dan kemudian merujuknya pada butang menggunakan atribut <code>popovertarget:

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

ini adalah idea apabila semuanya dihubungkan bersama:

Buka dan tutup kotak pop timbul

sedikit lebih banyak kerja diperlukan dalam demonstrasi terakhir. Satu kelemahan permainan setakat ini ialah mengklik butang popup akan membuka lebih banyak popup; Ini menjadikan permainan terlalu mudah.

kita boleh memisahkan tingkah laku pembukaan dan penutup dengan menetapkan atribut popovertargetaction pada butang (tidak, penulis spesifikasi HTML tidak peduli dengan kesederhanaan). Jika kami menetapkan nilai harta kepada show atau hide, butang hanya akan melakukan satu tindakan pada pop timbul tertentu.

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

Perhatikan bahawa saya telah menambahkan butang baru dalam <div> yang ditetapkan untuk mensasarkan yang lain <code><div>, yang dihidupkan atau dimatikan dengan sengaja menetapkan harta <em> di atas. Lihat betapa mencabarnya dengan "mencucuk" elemen (dengan cara yang baik): </em> <code>popovertargetaction Balloon Style

Sekarang kita perlu menetapkan gaya yang sama untuk

dan elemen butang supaya pemain tidak dapat membezakannya. Sila ambil perhatian bahawa saya bercakap tentang

dan bukan <summary></summary>. Ini kerana <summary></summary> adalah elemen sebenar bekas yang kita klik untuk membuka dan menutup. <details></details> <summary></summary> Kebanyakan kerja adalah kerja CSS standard: set latar belakang, mengisi, margin, saiz, sempadan, dll. Tetapi ada beberapa perkara penting yang tidak semestinya intuitif dan perlu dimasukkan. <details></details>

• Pertama, tetapkan atribut <summary></summary> ke list-style-type pada elemen none untuk menghapuskan tanda segitiga yang menunjukkan sama ada <details></details> dihidupkan atau dimatikan. Tag ini sangat berguna dan sangat baik secara lalai, tetapi untuk permainan seperti ini, lebih baik untuk menghapuskan prompt untuk cabaran yang lebih baik.
• Safari tidak menyukai kaedah yang sama. Untuk mengalih keluar tag <details></details> di sini, kita perlu menetapkan awalan vendor khas pseudo-elemen, dan summary::-webkit-details-marker ditetapkan ke display: none;.
• Ia akan menjadi hebat jika kursor tetikus menunjukkan bahawa belon itu boleh diklik, jadi kami juga boleh menetapkan <summary></summary> pada elemen cursor: pointer.
• Perincian terakhir adalah untuk menetapkan atribut <summary></summary> ke user-select pada none untuk mengelakkan belon (hanya teks emoji) daripada dipilih. Ini menjadikan mereka lebih seperti objek pada halaman.
• Ya, ini 2024 sekarang, dan kami masih memerlukan atribut awalan -webkit-user-select untuk mempertimbangkan sokongan safari. Terima kasih, Apple.

letakkan semua kod ini dalam kelas <summary></summary> yang akan kami gunakan untuk butang dan .balloon unsur:

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

Satu masalah dengan

belon adalah bahawa sesetengah daripada mereka sengaja tidak melakukan apa -apa. Ini kerana kotak popup tertutup mereka tidak dibuka. Pemain mungkin berfikir bahawa mereka tidak mengklik/mengklik pada belon tertentu atau permainan dipecahkan, jadi mari tambahkan zum ketika belon berada di :active keadaan mengklik:

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

Bonus

: Kerana kursor adalah tangan yang menunjuk ke jari telunjuknya, klik pada belon adalah seperti mencucuk belon dengan jari anda. ???

Cara kami mengedarkan belon di skrin adalah satu lagi faktor penting untuk dipertimbangkan. Tanpa JavaScript, kita tidak boleh meletakkannya secara rawak, jadi ini mustahil. Saya telah mencuba banyak cara, seperti mencipta nombor "rawak" saya sendiri, yang ditakrifkan sebagai sifat tersuai yang boleh digunakan sebagai pengganda, tetapi saya tidak dapat mendapatkan kesan "rawak" secara keseluruhan tanpa bertindih belon atau membina beberapa jenis corak visual.

Saya akhirnya menggunakan kelas untuk mencari belon dalam baris dan lajur yang berbeza - tidak seperti grid CSS atau pelbagai lajur, tetapi baris dan lajur fiktif berdasarkan interpolasi fizikal. Ia kelihatan seperti grid dan tidak seperti "rawak" seperti yang saya mahu, tetapi selagi tiada belon mempunyai dua kelas yang sama, mereka tidak bertindih antara satu sama lain.

Saya memutuskan untuk menggunakan grid 8 × 8, tetapi meninggalkan "baris" dan "lajur" yang pertama supaya belon tidak mengaburkan tepi kiri dan atas penyemak imbas.

<details open=""></details>

Tahniah kepada pemain (atau tidak mengucapkan tahniah)

Kami mempunyai kebanyakan komponen permainan yang siap, tetapi lebih baik untuk mempunyai kotak pop timbul mengucapkan tahniah kepada pemain untuk berjaya mencucuk semua belon dalam masa yang ditetapkan.

semuanya kembali ke elemen <details open=""></details>. Sebaik sahaja elemen tidak dibuka, permainan harus berakhir, dan langkah terakhir adalah untuk mencucuk belon terakhir. Jadi jika kita memberikan elemen id, mis. #root di sini, sangat bagus untuk mempunyai pemilih pseudo kerana kita boleh menggunakannya untuk memilih elemen induk elemen display: none; supaya apabila

ditutup, kita boleh memilih elemen kanak-kanak elemen induk itu-elemen baru dengan

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

id-untuk memaparkan kotak pseudo-pop-up yang menunjukkan mesej ucapan kepada pemain. (Ya, saya tahu ia ironis.)

:has() #root Jika kita bermain permainan pada masa ini, kita boleh menerima mesej kemenangan tanpa mencucuk semua belon keluar. Sekali lagi, kotak pop timbul manual tidak akan ditutup kecuali butang yang betul diklik - walaupun kita menutup elemen nenek moyangnya #root. #congrats

Adakah terdapat cara untuk mengetahui di CSS jika kotak pop-up masih dibuka? Ya, masukkan

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

kelas pseudo.

<details></details>

Pseudo-Class memilih kotak pop timbul terbuka. Kita boleh menggunakan ini bersempena dengan

sebelumnya untuk mengelakkan mesej daripada muncul apabila kotak pop-up masih dibuka pada halaman. Berikut adalah cara menghubungkannya bersama -sama untuk bekerja seperti pernyataan bersyarat . :popover-open

Sekarang, tahniah hanya akan diterima apabila pemain sebenarnya menang :popover-open. :has() Sebaliknya, jika pemain tidak dapat mencucuk semua belon sebelum pemasa satu minit tamat, kita harus memaklumkan pemain akhir permainan. Oleh kerana kita tidak mempunyai pernyataan bersyarat di CSS (sekurang-kurangnya belum), kita akan menjalankan animasi satu minit supaya mesej ini memudar untuk mengakhiri permainan. and

<details open=""></details>

Tetapi kami tidak mahu mesej kegagalan terbakar apabila skrin kemenangan dipaparkan, jadi kami boleh menulis pemilih untuk mengelakkan mesej

daripada dipaparkan secara serentak dengan mesej .

kita memerlukan pemasa permainan if()

Pemain harus tahu berapa banyak masa-untuk-pop semua belon. Kita boleh membuat pemasa yang agak "mudah" dengan elemen yang mengambil lebar penuh skrin (100VW), menskalakannya secara mendatar, dan memadankannya dengan animasi di atas, yang membolehkan mesej

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

untuk memudar.

#fail #congrats Hanya satu titik kegagalan mungkin membuat permainan terlalu mudah, jadi mari cuba menambah elemen kedua

dan menggunakan id "akar" kedua,

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

. Begitu juga, kita boleh menggunakan

untuk memeriksa sama ada unsur -unsur

dan

dibuka, dan kemudian mesej #fail dipaparkan.

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

Ringkasan <details></details> #root2 Satu -satunya perkara yang tersisa adalah bermain permainan! :has

lucu, bukan? Saya pasti kita boleh membina sesuatu yang lebih kuat tanpa sekatan kaedah JavaScript yang dikenakan sendiri, dan kami tidak mengambil aksesibiliti dengan serius, tetapi menolak API ke hadnya adalah keseronokan dan pendidikan, bukan? Saya berminat: Apa idea pelik lain yang boleh anda fikirkan untuk menggunakan kotak pop timbul? Mungkin anda memikirkan permainan lain, beberapa kesan UI yang cantik, atau cara yang bijak untuk menggabungkan kotak pop timbul dengan ciri-ciri CSS yang baru muncul seperti kedudukan utama. Apa pun, sila kongsi!