CSS Minecraft

• โคลน Minecraft ที่สมบูรณ์ ซึ่งสร้างขึ้นโดยใช้ CSS เท่านั้น
• สร้างทุกฟีเจอร์ด้วย HTML และ CSS ล้วนๆ โดยไม่ใช้ JavaScript
• ใช้ :has() pseudo-class ของ CSS เพื่อออกแบบทริกเกอร์ที่ซับซ้อนและลอจิกแบบตอบสนอง รวมถึงจัดการปฏิสัมพันธ์ต่างๆ
• มีซอร์สโค้ดและเดโมให้ที่ GitHub, CodePen และเว็บไซต์ทางการ
• จำเป็นต้องใช้ เบราว์เซอร์รุ่นใหม่ (Chromium 105+, Safari 15.4+, Firefox 121+)

[reedids]

การแสดงพลังด้วย CSS...

[anveloper]

ว้าว..

[ifmkl]

ว้าว..?

[mkyoon]

โอ้โห..

[ndrgrd]

คือจัดวางให้แต่ละช่องสามารถเลือกบล็อกได้ แล้วใช้ CSS ตกแต่งแค่รูปลักษณ์ภายนอกอย่างนั้นเหรอ? น่าทึ่งจริง ๆ นะ

[GN⁺]

ความคิดเห็นจาก Hacker News

• มีความเห็นว่านี่เป็นหนึ่งในผลงาน CSS ที่น่าประทับใจที่สุดเท่าที่เคยเห็น ทำให้นึกถึงเดโม CSS เจ๋ง ๆ สมัยก่อนอย่าง “A Single Div” และบอกว่าเดโมครั้งนี้ได้ทำลายสถิตินั้นไปแล้ว พร้อมคาดหวังว่าจะลองวิเคราะห์เอง และแชร์ ลิงก์ A Single Div
  • เสียดายที่หลายองค์ประกอบดูเหมือนจะโต้ตอบได้ แต่พอกดแล้วไม่ตอบสนอง จึงสงสัยว่าเป็นเพราะใช้งานบนมือถือหรือเดิมทีก็เป็นแบบนั้นอยู่แล้ว
• อุทานชมว่าเป็นไอเดียที่ทั้งแยบยลและสง่างามมาก พร้อมแชร์บันทึกส่วนตัวเกี่ยวกับหลักการทำงานของเดโม ลิงก์วิเคราะห์ CSS Minecraft
• สำหรับคนที่สงสัยเรื่องวิธีจัดการสถานะ มีคนไปดูซอร์สโค้ดแล้วพบว่าใช้ radio button และมีบล็อกทุกชิ้นที่สามารถวางได้อยู่ใน HTML
  • เพิ่มคำอธิบายสำหรับคนที่สงสัยสถานะของกล้อง โดยพบว่าแอนิเมชันจะทำงานตอนปุ่มอยู่ในสถานะ :active และจะหยุดในเวลาอื่น
  • บอกว่ารู้สึกเหมือนนี่เป็นครั้งแรกที่เห็นเดโม CSS ใช้วิธีที่กล้าขนาดนี้ และชอบมากด้วย
  • สงสัยว่าทำไมโลกถึงถูกจำกัดไว้ที่ 9x9x9 แต่ก็พบว่าโค้ด 46,000 บรรทัดเป็นตัวกำหนดวัสดุต่าง ๆ ของแต่ละบล็อก เช่น อากาศ หิน หญ้า ดิน ท่อนไม้ ไม้ ใบไม้ และกระจก และรู้สึกว่าวิธีนี้ก็น่าสนใจดี
• พอเข้าเว็บนี้แล้วก็รู้สึกอยากกลับไปติดตั้ง Minecraft ใหม่ขึ้นมาทันทีแบบขำ ๆ
• มีความเห็นว่ามันน่าประทับใจมากในเชิงเทคนิค และแชร์ประสบการณ์ส่วนตัวว่าพอเข้าสู่ช่วงกลางชีวิตกลับรู้สึกเหมือนได้ย้อนเป็นเด็กอีกครั้งจากการสนุกกับการสร้างแอปและเว็บไซต์ต่าง ๆ ด้วย HTML และ CSS
• มีคนสรุปเป็นคำถามว่าตนเข้าใจวิธีทำเดโมนี้ถูกไหม: voxel ถูกทำเป็น , แต่ละด้านถูกกำหนดเป็น พร้อม CSS class ที่ต่างกัน, แต่ละชนิดของบล็อกมี voxel ของตัวเองและเปิดใช้งานได้ครั้งละหนึ่งอัน, เหล่านี้ถูกจัดเรียงเป็นกริด 10 ชั้นขนาด 9x9 คูณด้วยชนิดของบล็อก (ประมาณ 6500 ชิ้น), และโครงสร้างทั้งหมดถูกห่อด้วย ที่มี CSS class ซึ่งตอบสนองต่อการควบคุมกล้อง พร้อมชมว่านี่เป็นแนวทางที่ล้ำมาก
• CSS มีเพียง 480 บรรทัดเท่านั้น พร้อมแชร์ ลิงก์ซอร์สโค้ด CSS และข้อมูลว่า HTML มี 46,022 บรรทัด (3.07MB)
• มีคนบอกว่ามันทึ่งมาก และแชร์ประสบการณ์ว่าแม้จะเปิดแท็บไว้หลายร้อยแท็บบน Chrome สำหรับ Linux ก็ไม่มีปัญหา
  • มีความเห็นเสริมว่าแม้แท็บจะเยอะ เบราว์เซอร์ก็จะ unload แท็บและบันทึกสถานะลงดิสก์ ทำให้ไม่มีปัญหาด้านประสิทธิภาพตราบใดที่ยังไม่ได้เปิดแท็บนั้นจริง ๆ
• มีคนสงสัยว่าเมื่อไรจะมี Minecraft แบบเล่นบนเว็บ
  • มีคนรำลึกว่าเมื่อก่อนเคยเล่น Minecraft classic ได้ตรงจาก minecraft.net
  • มีการพูดถึงยุค Java Applet แบบขำ ๆ ว่าได้ยินเสียงโทรศัพท์ดังขึ้นมาเลย
  • มีคนเล่าว่า Minecraft เวอร์ชันแรก ๆ (“classic”) เคยเล่นได้โดยตรงในเว็บเบราว์เซอร์ และตนเองก็เคยเล่นจริงตอนเด็ก ๆ ก่อนจะหาเกมนั้นไม่เจอในภายหลัง จนเริ่มสงสัยว่าเป็นความทรงจำจากความฝันหรือเปล่า
• ปิดท้ายด้วยคำอุทานแบบตรงไปตรงมาว่ามันสุดยอดจริง ๆ