CSS Minecraft

• Một bản clone Minecraft hoàn chỉnh được xây dựng chỉ bằng CSS
• Không dùng JavaScript, mọi tính năng đều được triển khai chỉ với HTML và CSS thuần
• Sử dụng pseudo-class :has() của CSS để thiết kế các trigger phức tạp, logic phản hồi và xử lý tương tác
• Cung cấp mã nguồn và bản demo trên GitHub, CodePen và trang chính thức
• Yêu cầu trình duyệt mới nhất (Chromium 105+, Safari 15.4+, Firefox 121+)

[reedids]

Màn biểu diễn sức mạnh của CSS...

[anveloper]

Wow..

[ifmkl]

Wow..?

[mkyoon]

Ôi trời..

[ndrgrd]

Có phải họ sắp xếp để có thể chọn block trong từng ô rồi chỉ dùng CSS để trang trí phần hiển thị bên ngoài thôi sao? Dù vậy vẫn thật đáng kinh ngạc.

[GN⁺]

Ý kiến Hacker News

• Chia sẻ rằng đây có lẽ là ví dụ ấn tượng nhất về một tác phẩm CSS mà mình từng thấy, gợi nhớ đến bản demo CSS tuyệt vời từ lâu mang tên “A Single Div”, và nói rằng lần này bản demo đã lập kỷ lục mới, đồng thời chia sẻ kỳ vọng sẽ tự phân tích nó cùng với liên kết A Single Div
  • Bày tỏ tiếc nuối vì nhiều yếu tố trông như có thể tương tác nhưng khi bấm lại không phản hồi, đồng thời thắc mắc không rõ là do môi trường di động hay vốn dĩ là như vậy
• Thốt lên rằng đây là một ý tưởng vừa cực kỳ sáng tạo vừa thanh lịch, đồng thời chia sẻ ghi chú cá nhân về nguyên lý hoạt động của bản demo qua liên kết phân tích CSS Minecraft
• Để giải đáp cho những ai tò mò về cách quản lý trạng thái, một người đã xem mã nguồn và chia sẻ rằng tác giả sử dụng các nút radio, đồng thời toàn bộ các khối có thể đặt trong HTML đều được chứa sẵn bên trong
  • Bổ sung cho những ai tò mò về trạng thái camera rằng animation chạy khi nút ở trạng thái :active, còn ngoài lúc đó thì dừng lại
  • Bày tỏ sự ngạc nhiên và rất thích thú vì có lẽ đây là lần đầu tiên thấy một bản demo CSS dùng cách tiếp cận táo bạo đến vậy
  • Từng thắc mắc vì sao thế giới lại bị giới hạn ở 9x9x9, rồi xác nhận rằng 46.000 dòng mã chỉ định các vật liệu khác nhau cho từng khối (không khí, đá, cỏ, đất, gỗ thân cây, gỗ, lá, kính), và cảm thấy cách làm này cũng rất thú vị
• Vui vẻ nói rằng ghé vào trang này xong bỗng nhiên lại muốn cài Minecraft lần nữa
• Nhận xét rằng xét về mặt kỹ thuật thì điều này cực kỳ ấn tượng, đồng thời chia sẻ trải nghiệm cá nhân rằng sau khi bước qua nửa đời người, lại thấy mình như quay về thời thơ ấu khi vui vẻ tạo đủ loại ứng dụng và trang web bằng HTML và CSS
• Tóm tắt dưới dạng câu hỏi để xác nhận liệu mình đã hiểu đúng cách bản demo được triển khai hay chưa: voxel được hiện thực bằng , mỗi mặt được gán thành một với các lớp CSS khác nhau, mỗi loại khối có một voxel và mỗi lần chỉ một cái được kích hoạt, các này được sắp thành lưới 10 tầng 9x9 nhân với số loại khối (khoảng 6.500), và toàn bộ cấu trúc được bọc trong một có các lớp CSS phản hồi với thao tác camera; đồng thời khen rằng cách tiếp cận này cực kỳ đột phá
• CSS chỉ có 480 dòng, đồng thời chia sẻ thông tin rằng HTML dài 46.022 dòng (3.07MB) cùng với liên kết mã nguồn CSS
• Phản ứng rằng điều này thật đáng kinh ngạc, đồng thời chia sẻ trải nghiệm rằng trên Chrome Linux, dù mở hàng trăm tab cũng không gặp vấn đề gì
  • Bổ sung ý kiến rằng dù số tab có nhiều đi nữa thì cũng không ảnh hưởng hiệu năng, vì trình duyệt sẽ dỡ tab khỏi bộ nhớ và lưu trạng thái xuống đĩa cho tới khi thực sự mở tab đó
• Đặt câu hỏi không biết bao giờ mới có Minecraft chạy trên web
  • Nhắc lại kỷ niệm rằng trước đây có thể chơi Minecraft classic trực tiếp trên minecraft.net
  • Hóm hỉnh nhắc đến thời Java Applet ngày xưa bằng câu đùa rằng chuông điện thoại đang reo
  • Hồi tưởng rằng các phiên bản đầu của Minecraft (“classic”) từng có thể chơi trực tiếp trong trình duyệt web, và bản thân đã thực sự chơi nó khi còn nhỏ, về sau không tìm lại được nên từng nghi ngờ đó có phải chỉ là ký ức trong mơ hay không
• Thành thật thốt lên rằng điều này thật sự quá đỉnh