Balon Pop |.Tips CSS – Beragampengetahuan

Saya selalu terpesona dengan banyaknya hal yang dapat dilakukan hanya dengan menggunakan HTML dan CSS. Fitur interaktif baru dari Popover API adalah contoh lain tentang seberapa banyak yang dapat kami capai hanya dengan menggunakan dua bahasa ini.

Anda mungkin pernah melihat tutorial lain yang menampilkan kemampuan Popover API, tetapi ini lebih merupakan artikel yang tanpa henti memaksa penyerahannya. Kami akan menambahkan lebih banyak konten Musik pop musik Campurkan seperti balon…beberapa “pop” literal jika Anda mau.

Yang saya lakukan adalah membuat game (tentunya hanya menggunakan HTML dan CSS) dan mengandalkan Popover API. Tugas Anda adalah meletuskan balon sebanyak mungkin dalam satu menit. Tetapi berhati-hatilah! Beberapa balon (seperti yang dikatakan Gollum) “rumit” dan memicu lebih banyak balon.

Saya dengan cerdik menyebutnya balon pop Kami akan melakukan ini bersama-sama, selangkah demi selangkah. Ketika kita selesai, itu akan terlihat seperti ini (yah, Tepat seperti ini:

berurusan dengan popover Atribut

Elemen apa pun bisa menjadi jendela pop-up, asalkan kita menggunakannya popover Atribut:

<div popover>...</div>

Kami bahkan tidak membutuhkan perbekalan popover Ada sebuah nilai. secara default, popoverNilai awalnya adalah auto Dan gunakan apa yang disebut spesifikasi sebagai “pemecatan ringan”. Artinya, jendela pop-up dapat ditutup dengan mengklik di mana saja di luar jendela pop-up. Saat popup terbuka, popup lain di halaman tersebut akan ditutup kecuali popup tersebut bertumpuk. Inilah bagaimana pop-up otomatis bergantung satu sama lain.

Pilihan lainnya adalah mengatur popover Ke a manual nilai:

<div popover=“manual”>...</div>

…artinya elemen dibuka dan ditutup secara manual – kita sebenarnya harus mengklik tombol tertentu untuk membuka dan menutupnya. dengan kata lain, manual Buat popup pemarah yang hanya tertutup ketika Anda mengklik tombol kanan dan benar-benar independen dari popup lain di halaman tersebut.

menggunakan <details> Elemen sebagai starter

Salah satu tantangan dalam membuat game menggunakan Popover API adalah Anda tidak dapat memuat halaman yang sudah membuka popover… Jika tujuan kami adalah membuat game hanya menggunakan HTML dan CSS, tidak ada cara untuk menyelesaikannya. masalah menggunakan JavaScript.

memasuki <details> elemen. Berbeda dengan jendela pop-up, <details> Elemen dapat diaktifkan secara default:

<details open>
  <!-- rest of the game -->
</details>

Jika kita mengikuti rute ini, kita dapat menampilkan sekumpulan tombol (balon) dan “meletuskan” semuanya hingga balon terakhir dengan menutup tombol tersebut. <details>. Dengan kata lain, kita bisa meletakkan balon awal di tempat terbuka. <details> elemen sehingga muncul di halaman saat dimuat.

Ini adalah struktur dasar yang saya bicarakan:

<details open>
  <summary>🎈</summary>
  <button>🎈</button>
  <button>🎈</button>
  <button>🎈</button>
</details>

Jadi kita bisa mengklik balon tersebut <summary> penutup <details> Kemudian “pop” semua balon kancing, hanya menyisakan satu balon ( <summary> Terakhir (kami akan mencari cara untuk menghapusnya nanti).

Anda mungkin berpikir <dialog> Anda benar bahwa ini akan menjadi arah yang lebih semantik untuk permainan kami. Tapi ada dua kelemahan <dialog> Itu tidak akan membiarkan kita menggunakannya di sini:

1. Satu-satunya cara untuk menutupnya <dialog> JavaScript diaktifkan saat halaman dimuat. Sejauh yang saya tahu, tidak ada penutupan <button> Kita bisa mengikuti permainan yang akan ditutup <dialog> Ini dibuka saat memuat.
2. <dialog>s adalah modal, mencegahnya diklik saat konten lain terbuka. Kami perlu mengizinkan pemain untuk meletuskan balon di luar area permainan <dialog> Untuk mengalahkan pengatur waktu.

Jadi kami akan menggunakan <details open> elemen sebagai wadah tingkat atas permainan dan menggunakan yang biasa <div> Untuk popup itu sendiri, mis. <div popover>.

Yang perlu kita lakukan sekarang adalah memastikan semua popup dan tombol ini terhubung bersama sehingga popup terbuka saat tombol diklik. Anda mungkin sudah mengetahui hal ini dari tutorial lain, namun kita perlu memberi tahu elemen popup bahwa ada tombol yang perlu direspon, lalu memberi tahu tombol tersebut bahwa ada popup yang perlu dibuka. Untuk melakukan ini, kami memberikan elemen popup ID unik (semua ID harus seperti ini) dan kemudian masuk <button> dengan popovertarget Atribut:

<!-- Level 0 is open by default -->
<details open>
  <summary>🎈</summary>
  <button popovertarget="lvl1">🎈</button>
</details>

<!-- Level 1 -->
<div id="lvl1" popover="manual">
  <h2>Level 1 Popup</h2>
</div>

Inilah yang Anda pikirkan ketika semuanya terhubung:

Buka dan tutup pop-up

Demo terakhir masih memiliki beberapa pekerjaan yang harus dilakukan. Salah satu kelemahan permainan sejauh ini adalah kliknya <button> satu dari popup Buka lebih banyak pop-up; <button> Sekali lagi, mereka menghilang begitu saja. Ini membuat permainan menjadi terlalu mudah.

Kita dapat memisahkan perilaku pembukaan dan penutupan melalui pengaturan popovertargetaction Atribut (tidak, penulis spesifikasi HTML tidak peduli dengan singkatnya) <button>. Jika kita menetapkan nilai atribut menjadi show atau hideini <button> Hanya satu tindakan yang akan dilakukan pada popup khusus ini.

<!-- Level 0 is open by default -->
<details open>
  <summary>🎈</summary>
  <!-- Show Level 1 Popup -->
  <button popovertarget="lvl1" popovertargetaction="show">🎈</button>
  <!-- Hide Level 1 Popup -->
  <button popovertarget="lvl1" popovertargetaction="hide">🎈</button>
</details>

<!-- Level 1 -->
<div id="lvl1" popover="manual">
  <h2>Level 1 Popup</h2>
  <!-- Open/Close Level 2 Poppup -->
  <button popovertarget="lvl2">🎈</button>
</div>

<!-- etc. -->

Harap dicatat bahwa saya menambahkan yang baru <button> di dalam – <div> diatur terhadap yang lain <div> sengaja membuka atau menutup TIDAK mempersiapkan popovertargetaction properti di atasnya. Lihat betapa menantangnya (dalam cara yang baik) untuk “meletuskan” elemen:

Menata balon

Sekarang kita perlu bergaya <summary> Dan <button> Elemennya sama, jadi pemain tidak bisa membedakan mana yang mana. Perhatikan kataku <summary> Dan TIDAK <details>. itu karena <summary> adalah elemen sebenarnya yang kita klik untuk membuka dan menutup <details> wadah.

Sebagian besar dari ini merupakan pekerjaan CSS yang cukup standar: mengatur latar belakang, padding, margin, ukuran, batas, dll. Namun ada beberapa hal penting, yang belum tentu bersifat intuitif, yang perlu disertakan.

• Pertama, atur list-style-type properti ke none Pada <summary> Elemen menghilangkan tanda segitiga yang menunjukkan apakah <details> Apakah terbuka atau tertutup. Secara default, penanda ini sangat berguna dan hebat, tetapi untuk permainan seperti ini, sebaiknya hapus petunjuk tersebut untuk tantangan yang lebih baik.
• Safari tidak menyukai pendekatan yang sama. Untuk menghapus <details> Di sini kita perlu menyetel elemen semu awalan vendor khusus, summary::-webkit-details-marker tiba display: none.
• Alangkah baiknya jika kursor mouse menunjukkan bahwa balon tersebut dapat diklik sehingga kita dapat mengaturnya cursor: pointer Pada <summary> Hal yang sama berlaku untuk elemen.
• Detail terakhir adalah pengaturannya user-select properti ke none Pada <summary>Mencegah balon (hanya teks emoji) dipilih. Hal ini membuat mereka lebih menyukai objek di halaman.
• Ya, ini tahun 2024 dan kami masih membutuhkan awalan ini -webkit-user-select Properti untuk menjelaskan dukungan Safari. Terima kasih, Apple.

Masukkan semua ini ke dalam kode .balloon Kelas yang akan kita gunakan <button> Dan <summary> Elemen:

.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;
}

Salah satu masalah dengan balon adalah beberapa di antaranya dengan sengaja tidak melakukan apapun. Itu karena popup yang mereka tutup tidak terbuka. Pemain mungkin berpikir mereka tidak mengetuk/mengklik balon tertentu atau permainannya rusak, jadi mari tambahkan sedikit penskalaan saat balon dalam keadaannya :active Status klik:

.balloon:active {
  scale: 0.7;
  transition: 0.5s;
}

bonus: Karena cursor Itu adalah tangan yang menunjuk ke balon dengan jari telunjuknya. Mengklik balon itu seperti menusuk balon dengan jari Anda. 👉🎈💥

Cara kami mendistribusikan balon di layar adalah hal penting lainnya yang perlu dipertimbangkan. Tanpa JavaScript kita tidak bisa menempatkannya secara acak, jadi ini tidak akan berhasil. Saya telah mencoba banyak hal seperti menulis angka “acak” saya sendiri yang didefinisikan sebagai properti khusus yang dapat digunakan sebagai pengganda, tetapi saya tidak bisa mendapatkan hasil keseluruhan yang terasa “acak” tanpa tumpang tindih balon atau membuat semacam penyortiran modus visual.

Saya akhirnya menemukan cara menggunakan kelas untuk menempatkan balon di baris dan kolom yang berbeda – tidak seperti kisi CSS atau beberapa kolom, tetapi baris dan kolom virtual berdasarkan penyisipan fisik. Ini terlihat seperti kotak, dan kurang “acak” dari yang saya inginkan, tapi selama tidak ada balon yang memiliki dua kelas yang sama, mereka tidak akan saling tumpang tindih.

Saya memutuskan untuk menggunakan grid 8×8, namun membiarkan “baris” dan “kolom” pertama kosong sehingga balon menjauhi tepi kiri dan atas browser.

/* Rows */
.r1 { --row: 1; }
.r2 { --row: 2; }
/* all the way up to .r7 */

/* Columns */
.c1 { --col: 1; }
.c2 { --col: 2; }
/* all the way up to .c7 */

.balloon {
  /* This is how they're placed using the rows and columns */
  top: calc(12.5vh * (var(--row) + 1) - 12.5vh);
  left: calc(12.5vw * (var(--col) + 1) - 12.5vw);
}

Selamat kepada pemain (atau tidak)

Kami sudah menyiapkan sebagian besar pertandingan, tapi akan menyenangkan jika bisa meraih kemenangan menari Ketika pemain berhasil meletuskan semua balon tepat waktu, jendela pop-up akan muncul untuk memberi selamat kepada mereka.

Semuanya kembali menjadi satu <details open> elemen. Setelah elemennya ada TIDAK open, permainan harus selesai dan langkah terakhir adalah meletuskan balon terakhir. Jadi jika kita menetapkan ID ke elemen tersebut, misalnya: #rootkita dapat membuat kondisi untuk menyembunyikannya display: none Kapan :not() di sebuah open negara:

#root:not([open]) {
  display: none;
}

Itulah hebatnya apa yang kami miliki :has() Pseudo selector karena kita bisa menggunakannya untuk memilih #root Elemen induk dari elemen sehingga kapan #root Setelah ditutup, kita dapat memilih elemen anak dari elemen induk – elemen baru dengan ID #congrats — Menampilkan popup buatan dengan pesan ucapan selamat kepada pemain. (Ya, saya tahu itu ironis.)

#game:has(#root:not([open])) #congrats {
  display: flex;
}

Jika kita memainkan game tersebut saat ini, kita dapat menerima pesan kemenangan tanpa meledakkan semua balon. Demikian pula, popup manual tidak akan ditutup kecuali tombol yang benar diklik – meskipun kita menutup pendahulunya <details> elemen.

Apakah ada cara di CSS untuk mengetahui bahwa popup masih terbuka? Ya, masuk :popover-open Kelas semu.

ini :popover-open Kelas semu yang memilih jendela popup yang terbuka. Kita bisa memadukannya dengan :has() Anda dapat mencegah pesan ditampilkan jika popup masih terbuka di halaman. Merangkai hal-hal ini bersama-sama akan menjadi seperti a and Pernyataan bersyarat.

/* If #game does *not* have an open #root 
 * but has an element with an open popover 
 * (i.e. the game isn't over),
 * then select the #congrats element...
 */
#game:has(#root:not([open])):has(:popover-open) #congrats {
  /* ...and hide it */
  display: none;
}

Sekarang, pemain hanya akan diberi ucapan selamat jika mereka benar-benar, lho, menang.

Sebaliknya, kita harus memberi tahu pemain bahwa permainan telah berakhir jika pemain tidak dapat meletuskan semua balon sebelum penghitung waktu habis. karena kita tidak punya if() Pernyataan kondisional dalam CSS (setidaknya belum) Kami akan menjalankan animasi satu menit sehingga pesannya menghilang untuk mengakhiri permainan.

#fail {
  animation: fadein 0.5s forwards 60s;
  display: flex;
  opacity: 0;
  z-index: -1;
}

@keyframes fadein {
  0% {
    opacity: 0;
    z-index: -1;
  }
  100% {
    opacity: 1;
    z-index: 10;
  }
}

Namun kami tidak ingin pesan kegagalan terpicu saat layar kemenangan ditampilkan, jadi kami dapat menulis pemilih untuk mencegahnya. #fail Pesan ditampilkan secara bersamaan #congrats informasi.

#game:has(#root:not([open])) #fail {
  display: none;
}

Kami membutuhkan pengatur waktu permainan

Pemain harus mengetahui berapa lama waktu yang dibutuhkan untuk meletuskan semua balon. Kita dapat membuat pengatur waktu yang cukup “sederhana” dengan elemen yang memenuhi seluruh lebar layar (100vw), skalakan secara horizontal, lalu cocokkan dengan animasi di atas, izinkan #fail Pesannya memudar.

#timer {
  width: 100vw;
  height: 1em;
}

#bar {
  animation: 60s timebar forwards;
  background-color: #e60b0b;
  width: 100vw;
  height: 1em;
  transform-origin: right;
}

@keyframes timebar {
  0% {
    scale: 1 1;
  }
  100% {
    scale: 0 1;
  }
}

Hanya memiliki satu titik kegagalan akan membuat permainan menjadi terlalu mudah, jadi mari kita coba menambahkan titik kegagalan kedua <details> Elemen dengan ID “root” kedua, #root2. Sekali lagi, kita bisa menggunakannya :has Periksa apakah #root juga bukan #root2 Unsur-unsurnya adalah open sebelum ditampilkan #congrats informasi.

#game:has(#root:not([open])):has(#root2:not([open])) #congrats {
  display: flex;
}

bungkus

Satu-satunya hal yang harus dilakukan adalah memainkan permainannya!

Menarik bukan? Saya yakin kita bisa membangun sesuatu yang lebih kuat tanpa batasan yang kita buat sendiri dari pendekatan bebas JavaScript, yang tidak berarti kita memberikan izin aksesibilitas dengan itikad baik, tapi menyenangkan untuk mendorong API hingga batasnya. Dan Pendidikan, bukan?

Saya tertarik pada: ide aneh apa lagi yang dapat Anda pikirkan untuk menggunakan popup? Mungkin Anda sedang memikirkan game lain, beberapa efek UI yang apik, atau cara cerdas untuk menggabungkan popup dengan fitur CSS baru lainnya seperti penentuan posisi jangkar. Apa pun itu, silakan bagikan!