Masa perjalanan CSS dengan: sasaran

Membuat permainan dengan CSS, kotak semak dan teknik butang radio terkenal (atau diketahui secara meluas). Tetapi ternyata unsur -unsur lain berdasarkan input pengguna juga boleh digunakan dengan bijak dan digunakan untuk gamification. Pemaju telah mencipta banyak kes permainan CSS yang sangat sejuk, yang berdasarkan

pseudo-kategori, dan juga permainan berdasarkan :hover pseudo-kategori. :valid Walau bagaimanapun, saya dapati bahawa kelas pseudo

nampaknya tidak dapat diterangkan dalam bidang kemahiran CSS ini. Selepas memikirkannya, ini adalah ciri CSS yang berkuasa:

: Target :target membolehkan kita untuk gaya mana-mana elemen berdasarkan pautan lompat yang dipilih, yang bermaksud bahawa penyemak imbas mempunyai versi mudah routing klien terbina dalam! Mari menjadi saintis gila dan lihat di mana ia boleh membawa kita. Invincible AI dalam CSS

Adakah saya menyambungkan kata -kata ini bersama -sama? Sekiranya kita menggunakan CSS dengan penuh semangat sehingga kita mencapai keistimewaan? Cuba untuk mengalahkan permainan Tic Toe dalam lembaran gaya di bawah dan tentukan sendiri.

Stylesheets kadang -kadang membenarkan permainan berakhir dengan tali leher, jadi anda mempunyai sekurang -kurangnya lapisan perak.

Jangan risau! CSS belum menjadi Skynet lagi. Seperti mana -mana helah CSS, peraturan ibu jari untuk menentukan sama ada permainan boleh dilaksanakan dengan CSS adalah mungkin dalam bilangan permainan negeri

. Saya menyedari ini apabila saya dapat membuat pemecah 4 × 4 Sudoku dan mendapati bahawa versi 9 × 9 hampir mustahil untuk dilaksanakan. Ini kerana trik CSS akhirnya bergantung kepada pemilih yang bertindak balas terhadap input pengguna untuk menyembunyikan dan memaparkan keadaan permainan.

Jika X pergi pertama, Tic Toe mempunyai 5478 negara undang-undang yang boleh dicapai, dan terdapat algoritma terkenal yang dapat mengira pergerakan terbaik dalam mana-mana keadaan undang-undang. Oleh itu, kita boleh menggunakan CSS sepenuhnya untuk melaksanakan permainan Tic ToE.

Baiklah, bagaimana untuk melakukannya?

Dalam erti kata, kita tidak memecahkan CSS sama sekali, tetapi menggunakan CSS sebagai kehendak Tuhan: menyembunyikan, menunjukkan dan menghidupkan kandungan. "Smart" terletak pada cara HTML dijana. Ia seperti buku "Pilih Pengembaraan Anda Sendiri" yang mengandungi semua keadaan yang mungkin di Tic-Toe Multiverse, dengan dataran kosong yang menghubungkan ke langkah seterusnya komputer yang terbaik.

Kami menggunakan varian algoritma minimax yang dilaksanakan di Ruby untuk menghasilkannya. Adakah anda tahu bahawa Codepen menyokong Haml (menyokong blok Ruby), dan bolehkah kita menggunakannya secara rahsia sebagai taman permainan Ruby? Sekarang anda tahu.

Setiap negeri yang dihasilkan oleh Haml kami kelihatan seperti ini dalam html:

Dengan hanya sedikit CSS yang mengejutkan, kita boleh menggunakan pemilih

untuk memaparkan hanya status permainan yang dipilih sekarang. Kami juga akan menambah kelas

<div>
  <svg><circle></circle></svg><a href="https://www.php.cn/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

  <svg><circle></circle></svg><svg><circle></circle></svg><div></div>

  <a href="https://www.php.cn/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/7a50f770e0e910d3beffd653f7c4197e">
    <div></div>
  </a>
</div>

ke gerakan sejarah komputer - supaya kami hanya akan mencetuskan animasi tulisan tangan dalam gerakan terkini komputer. Ini membuatkan kami berasa seperti kami bermain permainan di papan, dan pada hakikatnya, kami melompat di antara bahagian -bahagian dokumen yang berlainan.

<div>
  <svg><circle></circle></svg><a href="https://www.php.cn/link/320bc51fecc423dd893a420b42b9719a">
    <div></div>
  </a>

  <svg><circle></circle></svg><svg><circle></circle></svg><div></div>

  <a href="https://www.php.cn/link/7259202cea475e0e98aa076037cc3f15">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/f514659f5c754f0cec51ea59a5e826ae">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/a23eabd0e013e2ef19cc27099204ea18">
    <div></div>
  </a>

  <a href="https://www.php.cn/link/7a50f770e0e910d3beffd653f7c4197e">
    <div></div>
  </a>
</div>

Apabila memilih pautan lompat dengan mengklik pada persegi kosong, kelas pseudo :target akan memaparkan status permainan yang dikemas kini (.s), dan respons pra-kalkulasi yang ditetapkan ke komputer muncul secara animasi (.c).

Sila ambil perhatian keadaan khas apabila kita memulakan permainan: Sebelum pengguna memilih sebarang pautan lompat, kita perlu memaparkan grid kosong awal. Kandungan gaya tidak ditetapkan pada mulanya, jadi apabila pautan lompat dipilih, kami menggunakan pemilih :target untuk menyembunyikan keadaan awal. Begitu juga, jika anda membuat eksperimen menggunakan :body:has(:target) #---------, anda perlu memberikan pandangan awal sebelum pengguna mula berinteraksi dengan halaman. :target

Ringkasan

Saya tidak akan masuk ke dalam kedalaman mengapa kita akan melaksanakannya di CSS, dan bukannya menggunakan pendekatan "mudah" JavaScript. Ini hanya cara yang menyeronokkan dan pendidikan untuk menolak sempadan CSS. Sebagai contoh, kita boleh melakukan ini menggunakan helah kotak semak klasik -sebenarnya, seseorang telah melakukannya.

Adakah terdapat sesuatu yang menarik untuk digunakan

? Saya rasa ya, kerana: :target

• kita boleh menyimpan permainan dalam CSS! Akses URL pada bila -bila masa dengan penanda buku status yang anda tinggalkan dan kembali.
• Anda boleh menggunakan butang "Back" dan "Forward" pelayar sebagai kawalan permainan. Pergerakan boleh dibatalkan dengan kembali, atau pergerakan main balik dengan maju. Bayangkan menggabungkan dengan helah kotak semak untuk membuat permainan dengan mekanik perjalanan masa dalam tradisi Braid. :target
• Kongsi status permainan anda. Ini berpotensi untuk mendapatkan hak pertunjukan seperti kata-kata. Jika anda berjaya memenangi atau melukis algoritma CSS Tic ToE yang tidak dapat dikalahkan, anda boleh menunjukkan kepada dunia pencapaian anda dengan berkongsi URL.
• Ia benar -benar semantik HTML. Trik kotak semak memerlukan anda menyembunyikan kotak semak atau butang radio, jadi ia sentiasa menjadi kemahiran dan tawaran yang menyakitkan ketika datang ke aksesibilitas. Kaedah ini boleh dikatakan tanpa helah, kerana kita hanya menggunakan pautan lompat dan div dan gaya mereka. Ini mungkin membuatnya - berani saya katakan - "lebih mudah" untuk memberikan pengalaman akses yang lebih mudah. Tetapi itu bukan untuk mengatakan ia mudah diakses keluar dari kotak.

Atas ialah kandungan terperinci Masa perjalanan CSS dengan: sasaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!