CSS Minecraft

• Klon Minecraft yang sepenuhnya dibuat hanya dengan CSS
• Tanpa menggunakan JavaScript, semua fitur diimplementasikan hanya dengan HTML dan CSS murni
• Menggunakan pseudo-class :has() di CSS untuk menangani interaksi seperti perancangan pemicu yang kompleks dan logika responsif
• Kode sumber dan demo tersedia di GitHub, CodePen, dan situs resmi
• Browser terbaru (Chromium 105+, Safari 15.4+, Firefox 121+) wajib

[reedids]

Atraksi CSS...

[anveloper]

Wah..

[ifmkl]

Wow..?

[mkyoon]

Ya ampun..

[ndrgrd]

Apakah ini dibuat dengan menata agar blok bisa dipilih di setiap kotak lalu hanya menghias tampilannya dengan CSS? Hebat juga ya.

[GN⁺]

Opini Hacker News

• Menyampaikan bahwa ini terasa seperti salah satu karya CSS paling mengesankan yang pernah dilihat, mengingatkan pada demo CSS keren lama bernama “A Single Div”, dan mengatakan demo kali ini telah memecahkan rekor itu; juga membagikan tautan A Single Div sambil berharap bisa menganalisisnya sendiri
  • Mengungkapkan kekecewaan karena banyak elemen terlihat seperti bisa berinteraksi tetapi tidak merespons saat diklik, dan bertanya-tanya apakah itu karena lingkungan mobile atau memang dari sananya begitu
• Mengagumi ide yang benar-benar cerdas sekaligus elegan, dan membagikan catatan pribadi tentang cara kerja demo tersebut: tautan analisis CSS Minecraft
• Untuk orang-orang yang penasaran dengan cara pengelolaan state, setelah melihat source code ternyata demo ini memanfaatkan radio button, dan semua blok yang bisa ditempatkan sudah dimasukkan ke dalam HTML
  • Menambahkan penjelasan bagi yang penasaran dengan state kamera: animasi berjalan saat tombol berada pada state :active dan berhenti di luar itu
  • Mengungkapkan keterkejutan sekaligus rasa suka besar karena rasanya belum pernah melihat demo CSS yang memakai pendekatan seberani ini
  • Sempat penasaran mengapa dunia dibatasi 9x9x9, lalu menemukan bahwa 46.000 baris kode menetapkan berbagai material untuk tiap blok (udara, batu, rumput, tanah, kayu gelondongan, kayu, daun, kaca), dan merasa pendekatan ini juga menarik
• Dengan bercanda mengatakan bahwa setelah mengunjungi situs ini, tiba-tiba jadi ingin memasang Minecraft lagi
• Menyampaikan bahwa ini sangat mengesankan secara teknis, lalu berbagi pengalaman pribadi bahwa setelah melewati paruh baya justru merasa seperti kembali ke masa kecil dan menikmati membuat berbagai aplikasi serta situs dengan HTML dan CSS
• Merangkum dalam bentuk pertanyaan apakah pemahamannya tentang cara demo ini dibuat sudah benar: voxel diimplementasikan sebagai , tiap sisi ditetapkan sebagai dengan kelas CSS berbeda, ada voxel untuk setiap jenis blok dan hanya satu yang aktif pada satu waktu, input-input ini disusun sebagai kisi 9x9 dengan 10 lapisan dikalikan jenis blok (sekitar 6500 buah), lalu seluruh struktur dibungkus oleh `` yang memiliki kelas CSS yang merespons kontrol kamera; juga memuji pendekatan ini sebagai sesuatu yang sangat revolusioner
• CSS-nya hanya 480 baris, sambil membagikan tautan source code CSS dan informasi bahwa HTML-nya 46.022 baris (3.07MB)
• Bereaksi bahwa ini benar-benar luar biasa, sambil berbagi pengalaman bahwa di Chrome Linux pun tidak ada masalah meski membuka ratusan tab
  • Menambahkan pendapat bahwa meskipun tab banyak, browser akan meng-unload tab dan menyimpan state ke disk, jadi selama tab itu tidak benar-benar dibuka tidak akan ada masalah performa
• Mengangkat pertanyaan kapan Minecraft berbasis web akan muncul
  • Berbagi kenangan bahwa dulu Minecraft classic bisa langsung dimainkan di minecraft.net
  • Secara jenaka menyebut masa Java Applet dulu dengan bercanda bahwa telepon berdering
  • Mengingat bahwa versi awal Minecraft (“classic”) dulu bisa dimainkan langsung di browser web, pernah benar-benar memainkannya saat kecil, lalu sempat tak bisa menemukannya lagi dan bertanya-tanya apakah itu cuma kenangan dari mimpi
• Mengungkapkan kekaguman tulus bahwa ini benar-benar hebat