CSS Minecraft

 (benjaminaster.com)
26 पॉइंट द्वारा GN⁺ 2025-05-27 | 7 टिप्पणियां | WhatsApp पर शेयर करें
  • सिर्फ CSS का उपयोग करके बनाया गया पूरा Minecraft clone
  • JavaScript के बिना, केवल pure HTML और CSS से सभी फीचर लागू
  • CSS के :has() pseudo-class का उपयोग करके जटिल trigger और responsive logic डिज़ाइन सहित interaction को संभाला गया
  • GitHub, CodePen, आधिकारिक साइट पर source code और demo उपलब्ध
  • नवीनतम browser (Chromium 105+, Safari 15.4+, Firefox 121+) अनिवार्य

संबंधित पढ़ाई

7 टिप्पणियां

 
reedids 2025-07-03

CSS का ताकतवर शो...
 
anveloper 2025-06-04

वाह..
 
ifmkl 2025-05-28

वाह..?
 
mkyoon 2025-05-28

हॉली मॉली..
 
2025-05-28
[यह टिप्पणी छिपाई गई है.]
 
ndrgrd 2025-05-27

क्या इसमें हर खाने में ब्लॉक चुनने की सुविधा रखकर सिर्फ CSS से उसका बाहरी रूप सजाया गया है? वाकई कमाल है।
 
GN⁺ 2025-05-27
Hacker News की राय
  • यह अब तक देखी गई CSS कृतियों में सबसे प्रभावशाली उदाहरणों में से एक लगा; पुराने शानदार CSS डेमो “A Single Div” की याद आई, और लगा कि इस डेमो ने उसका रिकॉर्ड भी तोड़ दिया है। खुद इसे विश्लेषित करने की उत्सुकता के साथ A Single Div लिंक साझा किया गया
    • ऐसा लगता है कि कई चीज़ें इंटरैक्ट कर सकती हैं, लेकिन क्लिक करने पर कुछ नहीं होता, इस बात पर हल्की निराशा जताई गई; यह मोबाइल वातावरण की वजह से है या मूल रूप से ऐसा ही है, इस पर जिज्ञासा व्यक्त की गई
  • इसे बेहद चतुर और सुरुचिपूर्ण विचार बताते हुए प्रशंसा की गई, और डेमो कैसे काम करता है इस पर निजी नोट्स के रूप में CSS Minecraft विश्लेषण लिंक साझा किया गया
  • state management कैसे किया गया है यह जानना चाहने वालों के लिए source code देखने पर पता चला कि radio buttons का उपयोग किया गया है, और HTML में रखे जा सकने वाले सभी blocks उसमें शामिल हैं
    • camera state को लेकर जिज्ञासा रखने वालों के लिए यह भी जोड़ा गया कि button के :active state में animation चलती है और बाकी समय रुकी रहती है
    • CSS डेमो में इतना साहसिक तरीका पहले कभी नहीं देखा, ऐसा आश्चर्य और साथ ही काफ़ी पसंद आने की बात कही गई
    • दुनिया 9x9x9 तक सीमित क्यों है, यह सोच रहे थे, लेकिन फिर पता चला कि 46,000 lines का code हर block के लिए अलग-अलग materials (air, stone, grass, dirt, log, wood, leaves, glass) तय करता है; यह तरीका भी दिलचस्प लगा
  • इस साइट पर आते ही अचानक Minecraft फिर से install करने का मन होने की बात मज़ाकिया अंदाज़ में कही गई
  • तकनीकी रूप से इसे बेहद प्रभावशाली बताया गया, और यह निजी अनुभव साझा किया गया कि ज़िंदगी के मध्य दौर के बाद अब फिर से बचपन जैसा आनंद HTML और CSS से तरह-तरह के apps और sites बनाने में मिलने लगा है
  • डेमो की implementation को समझने की कोशिश करते हुए पूछा गया कि क्या समझ सही है: voxel को से बनाया गया है, हर face को अलग CSS class वाले से, हर block type के लिए voxel है और एक समय में सिर्फ़ एक ही active होता है, ये 9x9 की 10-स्तरीय grid गुणा block types (लगभग 6500) के रूप में व्यवस्थित हैं, और पूरी संरचना एक ऐसे में लिपटी है जिसके CSS classes camera control पर प्रतिक्रिया देते हैं; साथ ही इस approach को बेहद groundbreaking बताया गया
  • CSS सिर्फ़ 480 lines की है, CSS source code लिंक के साथ यह जानकारी भी दी गई कि HTML 46,022 lines (3.07MB) का है
  • इसे सचमुच अद्भुत बताया गया, साथ ही यह अनुभव साझा किया गया कि Linux Chrome में सैकड़ों tabs खुली होने पर भी कोई समस्या नहीं होती
    • यह भी जोड़ा गया कि tabs ज़्यादा होने पर browser उन्हें unload कर देता है और state को disk पर सहेज देता है, इसलिए जब तक tab वास्तव में खोली न जाए, performance पर असर नहीं पड़ता
  • वेब-आधारित Minecraft कब आएगा, इस पर जिज्ञासा जताई गई
    • यह पुरानी याद भी साझा की गई कि पहले minecraft.net पर Minecraft classic सीधे खेला जा सकता था
    • पुराने Java Applet दिनों का चुटीले अंदाज़ में ज़िक्र करते हुए फोन की घंटी बजने वाला मज़ाक किया गया
    • Minecraft के शुरुआती version (“classic”) को web browser में सीधे खेल सकने और बचपन में सचमुच उसे खेलने का अनुभव याद किया गया; बाद में वह game फिर नहीं मिला तो एक समय लगा कि शायद वह कोई सपना था
  • बस, वाकई कमाल है जैसी सीधी और सच्ची प्रशंसा व्यक्त की गई