Peretasan kotak centang dan tombol radio adalah trik terkenal untuk membuat game hanya menggunakan CSS. Namun ternyata elemen lain berdasarkan masukan pengguna bisa diretas dan diubah menjadi game. Ada beberapa contoh keren tentang pengembang yang berkreasi dengan game berbasis CSS.:hoverKelas palsu, dan bahkan permainan lain didasarkan pada:validKelas semu.
Namun yang saya temukan adalah itu:targetKelas semu tampaknya merupakan area yang relatif belum dijelajahi di arena peretasan CSS. Ini adalah fitur CSS canggih yang sering diremehkan jika dipikir-pikir::targetIni memungkinkan kita mendesain apa pun berdasarkan tautan lompat yang diberikanJadi, kami memiliki versi primitif perutean sisi klien yang terpasang di browser! Mari kita membuatnya lebih pintar dan melihat ke mana hal ini akan membawa kita.
AI yang tidak ada duanya dalam CSS
Apakah Anda menulis kata-kata ini bersama-sama? Apakah kita akan mencoba meretas CSS sekuat tenaga hingga mencapai titik keunikan? Cobalah bermain melalui style sheet di bawah ini dalam Tic Tac Toe dan putuskan sendiri.
Terkadang style sheet memungkinkan permainan berakhir seri, jadi setidaknya Anda memiliki sedikit harapan.
Siapa Takut! CSS belum mencapai level Skynet. Seperti peretasan CSS lainnya, aturan praktis untuk menentukan apakah mungkin untuk mengimplementasikan game menggunakan CSS adalah jumlah opsi yang memungkinkan.Situasi permainanSaya mempelajarinya ketika saya dapat membuat solusi Sudoku 4×4 tetapi ternyata versi 9×9 hampir mustahil. Ini karena peretasan CSS terbatas pada menyembunyikan dan menampilkan status permainan berdasarkan penyeleksi yang merespons masukan pengguna.
Permainan Tic Tac Toe memiliki 5.478 status hukum yang dapat dicapai jika Anda memindahkan X terlebih dahulu, dan terdapat algoritme terkenal yang dapat menghitung langkah optimal untuk status hukum mana pun. Maka masuk akal jika kita bisa meretas seluruh permainan tic-tac-toe dengan CSS.
Oke, tapi bagaimana caranya?
Di satu sisi, kami tidak meretas CSS sama sekali, melainkan menggunakan CSS sesuai dengan kehendak Tuhan Yang Maha Kuasa: untuk menyembunyikan, menyingkapkan, dan mengaktifkan sesuatu. “Kecerdasan” adalah cara HTML dihasilkan. Ini seperti buku “pilih petualangan Anda sendiri” untuk setiap kemungkinan situasi di dunia permainan tic-tac-toe dengan kotak kosong yang terkait dengan langkah optimal komputer selanjutnya.
Kami membuat ini menggunakan versi mutan dari algoritma minimax yang diimplementasikan di Ruby. Dan tahukah Anda karena CodePen mendukung HAML (yang mendukung blok Ruby), kita dapat menggunakannya secara diam-diam sebagai taman bermain Ruby? Sekarang kamu mengetahuinya.
Setiap negara bagian yang dihasilkan HAML kami terlihat seperti ini dalam HTML:
<div class="b" id="--OOX----">
<svg class="o s">
<circle></circle>
</svg>
<a class="s" href="#OXOOX----">
<div></div>
</a>
<svg class="o s">
<circle class="c"></circle>
</svg>
<svg class="o s">
<circle class="c"></circle>
</svg>
<div class="x"></div>
<a class="s" href="#O-OOXX---">
<div></div>
</a>
<a class="s" href="#O-OOX-X--">
<div></div>
</a>
<a class="s" href="#O-OOX--X-">
<div></div>
</a>
<a class="s" href="#O-OOX---X">
<div></div>
</a>
</div>Dengan menggunakan CSS sederhana yang sangat sederhana, kami hanya akan menampilkan status permainan yang saat ini dipilih :targetKami juga akan menambahkan kelas .c ke riwayat pergerakan komputer — dengan cara ini, kami hanya memutar animasi tulisan tangan untuk pergerakan komputer terbaru. Hal ini memberikan ilusi bahwa kita hanya bermain di satu papan permainan padahal kenyataannya kita berpindah antar bagian dokumen yang berbeda.
/* Game's parent container */
.b, body:has(:target) #--------- {
/* Game states */
.s {
display: none;
}
}
/* Game pieces with :target, elements with href */
:target, #--------- {
width: 300px;
height: 300px; /
left: calc(50vw - 150px);
top: calc(50vh - 150px);
background-image: url(/path/to/animated/grid.gif);
background-repeat: no-repeat;
background-size: 100% auto;
/* Display that game state and bring it to the forefront */
.s {
z-index: 1;
display: inline-block;
}
/* The player's move */
.x {
z-index: 1;
display: inline-block;
background-image: url("data:image/svg+xml [...]"); /** shortened for brevity **/
height: 100px;
width: 100px;
}
/* The browser's move */
circle {
animation-fill-mode: forwards;
animation-name: draw;
animation-duration: 1s;
/* Only animate the browser's latest turn */
&.c {
animation-play-state: paused;
animation-delay: -1s;
}
}
}Saat Anda memilih tautan lompat dengan mengklik kotak kosong,:targetKelas semu menampilkan status permainan yang diperbarui (.s), yang dirancang untuk menampilkan respons komputer yang telah dihitung sebelumnya dalam animasi (.c).
Perhatikan kasus khusus saat kita memulai permainan:Kita perlu menampilkan grid kosong awal sebelum pengguna memilih tautan transisi apa pun.Tidak ada yang perlu ditata:targetPada awalnya, jadi kami menyembunyikan keadaan awal — dengan:body:has(:target) #---------Dipilih — Setelah tautan lompat dipilih. Demikian pula, jika Anda membuat eksperimen menggunakan…:targetAnda harus membuat penawaran awal sebelum pengguna mulai berinteraksi dengan halaman Anda.
kesimpulan
Saya tidak akan berbicara tentang “mengapa” kami menerapkan ini dalam CSS daripada tentang rute yang “lebih mudah” menggunakan JavaScript. Mendorong batas-batas CSS sangatlah menyenangkan dan mendidik. Misalnya, kita dapat melakukan ini menggunakan trik kotak centang klasik – seseorang telah melakukannya.
Apakah ada sesuatu yang menarik tentang penggunaan:targetalih-alih? Saya rasa demikian karena:
- Kita bisaGame CSS gratis!Tandai URL tersebut sehingga Anda dapat kembali ke sana kapan saja dalam keadaan yang sama seperti saat Anda meninggalkannya.
- Ada kemampuan untuk menggunakan tombol maju dan mundur browser sebagai kontrol permainan.Dimungkinkan untuk membatalkan suatu tindakan dengan kembali ke masa lalu atau memulai kembali suatu tindakan dengan bergerak maju. Bayangkan kombinasinya
:targetMenggunakan peretasan kotak centang untuk membuat game perjalanan waktu bergaya Braid. - Bagikan status permainan Anda.Ada potensi untuk menyombongkan diri seperti Wordle. Jika Anda berhasil meraih kemenangan atau seri melawan algoritma CSS Tic Tac Toe yang tidak ada duanya, Anda dapat menunjukkan pencapaian Anda kepada dunia dengan membagikan URL-nya.
- Itu sepenuhnyaHTML Emosional.Peretasan kotak centang memerlukan penyembunyian kotak centang atau tombol radio, jadi ini akan selalu menjadi peretasan dan trade-off yang menyakitkan dalam hal aksesibilitas. Pendekatan ini bisa dibilang bukan peretasan karena yang kami lakukan hanyalah menggunakan tautan lompat dan bagian serta memformatnya. Hal ini mungkin – berani saya katakan – “lebih mudah” untuk memberikan pengalaman yang lebih mudah diakses. Tapi itu tidak berarti itu bisa langsung diakses.
Artikel Perjalanan Waktu Menggunakan CSS dengan :target awalnya diterbitkan di CSS-Tricks, bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.
