पहेली पर जाएं

दूसरे दिन, मेरे दिमाग में मेरे बचपन के एक छोटे से पहेली खिलौने की याद आई, एक स्लाइडर पहेली जहां 15 वर्गाकार टाइलों को एक फ्रेम में 4 x 4 कोशिकाओं की व्यवस्था में एक खाली जगह छोड़कर रखा जाता है। प्रत्येक टाइल और फ्रेम के किनारों पर लकीरें और खांचे का एक सेट टाइलों को फ्रेम में रखते हुए एक दूसरे से फिसलने की अनुमति देता है। किसी भी समय खाली स्थान से सटी कोई भी टाइल उस स्थान में जा सकती है, और अन्यथा टाइलों को हिलने से रोका जाता है। एक टाइल को खाली जगह में ले जाने से एक नई खाली जगह निकल जाती है जहां से टाइल आई थी और फिर दूसरी टाइल उस नई जगह में जा सकती है। विचार यह है कि टाइलों को इस प्रकार बार-बार खिसकाकर कुछ पूर्व निर्धारित क्रम में व्यवस्थित किया जाए।

जाहिर तौर पर इसे "15 पहेली" कहा जाता है और यह 1870 के दशक से मौजूद है। वेब पर खोज करने से विभिन्न प्रोग्रामिंग भाषाओं में लिखे गए कई मनोरंजन मिलते हैं और वास्तव में यहाँ dev.to पर https://dev.to/artydev/let-us-code-a-sliding-puzzle-9n सहित कई लेख हैं। , https://dev.to/xzanderzone/making-a-slider-puzzle-in-java-script-83m, और https://dev.to/claurcia/slide-puzzle-5c55 सभी जावास्क्रिप्ट और https:/ में /dev.to/mfbmina/building-a-sliding-puzzle-with-go-3bnj गो में। इसे जावास्क्रिप्ट सीखने वालों के लिए एक अच्छी स्टार्टर चुनौती के रूप में भी प्रस्तुत किया गया है।

हालाँकि जिस बात ने मेरी रुचि को बढ़ाया वह यह विचार था कि इसे बिना किसी प्रोग्रामिंग भाषा का उपयोग किए वेब पर पुनः बनाने योग्य होना चाहिए! यानी, केवल शुद्ध HTML और CSS का उपयोग करके एक कार्यान्वयन। इसलिए मैं इसे नीचे प्रस्तुत करता हूं। मुझे जो एक समझौता करना पड़ा वह यह था कि प्रदान किए गए 10 खेलों में पूर्व-फेर-बदल वाली शुरुआती स्थिति निश्चित थी।

इसके लिए पूर्व निर्धारित क्रम में पूरी तस्वीर दिखाना है।

इस कार्यान्वयन का मूल सिद्धांत यह है कि प्रत्येक टाइल एक राज्य रिकॉर्ड रखती है कि वह फ्रेम के भीतर कहां है। HTML और CSS में स्थिति को बदलने और बनाए रखने के कई तरीके नहीं हैं, लेकिन सबसे आम है "चेकबॉक्स हैक" और यह कार्यान्वयन इसका भारी उपयोग करता है। चेकबॉक्स हैक से अपरिचित किसी भी व्यक्ति के लिए, जब एक तत्व को क्लिक या टैप किया जाता है, तो उसके संबंधित फॉर्म नियंत्रण का सक्रियण व्यवहार, यदि उसके पास एक है, सक्रिय हो जाता है। जब संबंधित नियंत्रण एक चेकबॉक्स होता है, तो चेकबॉक्स स्थिति को टॉगल किया जाता है, अनचेक को चेक किया जाता है और चेक को अनचेक किया जाता है। इसी प्रकार, जब संबंधित नियंत्रण एक रेडियो बटन होता है, तो उस रेडियो बटन की जाँच की जाती है, और उसी समूह में कोई भी अन्य रेडियो बटन जिसे जाँचा गया था, अनचेक किया जाता है। फिर एक CSS चयनकर्ता :checked छद्म-वर्ग के माध्यम से नियंत्रण की जाँच को माप सकता है और उस स्थिति के आधार पर अन्य तत्वों पर अलग-अलग CSS लागू कर सकता है।

इसलिए प्रत्येक टाइल में रेडियो बटन समूहों की एक जोड़ी होती है और प्रत्येक में चार रेडियो बटन होते हैं। इनमें से एक समूह एक्स-अक्ष में टाइल की स्थिति और दूसरा वाई-अक्ष में अपनी स्थिति बरकरार रखता है। (या यदि आप चाहें तो क्रमशः क्षैतिज स्थिति और ऊर्ध्वाधर स्थिति।) पंद्रह टाइलों में से प्रत्येक को शुरू में उनके रेडियो बटन के माध्यम से एक्स और वाई निर्देशांक का एक अलग संयोजन दिया जाता है ताकि प्रत्येक फ्रेम में एक अलग सेल पर कब्जा कर ले।
 
टाइल्स को शुरू में फ्रेम के शीर्ष, बाएं सेल में रखा जाता है और फिर सीएसएस के माध्यम से रेडियो बटन की स्थिति को मापने के लिए उन पर अनुवाद परिवर्तन लागू करके फ्रेम के भीतर ले जाया जाता है:

/* "X" refers to the X-axis cell positions, "Y" to the Y-axis cell positions. 
 * 0, 1, 2, 3 refers to the position on that axis, 
 * 0 = left and top, 3 = right and bottom respectively.
 */

.tile:has(.X0:checked~.Y0:checked) {
     transform: translate(0%, 0%);
}
.tile:has(.X0:checked~.Y1:checked) {
     transform: translate(0%, 100%);
}
.tile:has(.X0:checked~.Y2:checked) {
     transform: translate(0%, 200%);
}
.tile:has(.X0:checked~.Y3:checked) {
     transform: translate(0%, 300%);
}
.tile:has(.X1:checked~.Y0:checked) {
     transform: translate(100%, 0%);
}
/* and so on for the remainder of the sixteen combinations */

टाइल में आठ रेडियो बटन के अनुरूप आठ लेबल तत्व भी होते हैं। प्रत्येक लेबल एक दूसरे को पूरी तरह से ढकते हुए स्थित है और प्रत्येक पूरी तरह से टाइल को भरता है। लेबल पारदर्शी हैं, और प्रारंभ में उन सभी पर पॉइंटर-इवेंट: कोई नहीं सेट करके क्लिक और टैप पर प्रतिक्रिया न देने के लिए सेट किए गए हैं।

अगला कदम सीएसएस चयनकर्ताओं के लिए यह पहचानना है कि खाली सेल कहां है। यह उन्मूलन द्वारा किया जाता है, यह वह सेल है जिसके X,Y निर्देशांक पंद्रह टाइलों में से किसी के रेडियो बटन समूह जोड़े द्वारा दर्शाए नहीं जाते हैं।

उदाहरण के लिए, यदि यह मेल खाता है:

.frame:not(:has(.tile .X0:checked~.Y0:checked)) { .... }

तब खाली सेल वर्तमान में ऊपरी बाएँ कोने वाले सेल में होना चाहिए। सोलह कोशिकाओं में से प्रत्येक के लिए इसे दोहराएं और उनमें से बिल्कुल एक मेल खाएगा।

एक बार ऐसा हो जाने पर, खाली सेल के निकटवर्ती कोशिकाओं की पहचान की जा सकती है। यदि खाली सेल एक कोने में है, तो ठीक दो टाइलें हैं जो उस सेल में जा सकती हैं, अन्यथा, यदि खाली सेल फ्रेम के किसी एक किनारे के सामने है, तो तीन टाइलें हैं जो सेल में जा सकती हैं, अन्यथा खाली सेल चार मध्य कोशिकाओं में से एक होना चाहिए, और चार टाइलें हैं जो इसमें जा सकती हैं। उनमें से प्रत्येक टाइल के लिए, टाइल के आठ लेबलों में से एक, टाइल को खाली सेल में ले जाने के लिए आवश्यक सही रेडियो बटन को सक्रिय करेगा। उस लेबल को उसके पॉइंटर-इवेंट मान को वापस ऑटो पर सेट करके सक्षम किया जाता है। तो उदाहरण के तौर पर:

/* Top, left corner */
.frame:not(:has(.tile .X0:checked ~ .Y0:checked)) {
  :is(
      .tile:has(.X0:checked ~ .Y1:checked) label.Y0,
      .tile:has(.X1:checked ~ .Y0:checked) label.X0
    ) {
    pointer-events: auto;
  }
}

/* right most cell of row two */
.frame:not(:has(.tile .X1:checked ~ .Y3:checked)) {
  :is(
      .tile:has(.X1:checked ~ .Y2:checked) label.Y3,
      .tile:has(.X0:checked ~ .Y3:checked) label.X1,
      .tile:has(.X2:checked ~ .Y3:checked) label.X1
    ) {
    pointer-events: auto;
  }
}

/* second cell from left on row three */
.frame:not(:has(.tile .X2:checked ~ .Y1:checked)) {
  :is(
      .tile:has(.X2:checked ~ .Y0:checked) label.Y1,
      .tile:has(.X2:checked ~ .Y2:checked) label.Y1,
      .tile:has(.X1:checked ~ .Y1:checked) label.X2,
      .tile:has(.X3:checked ~ .Y1:checked) label.X2
    ) {
    pointer-events: auto;
  }
}

खेल का अंतिम चरण यह पहचानना है कि पहेली कब हल हुई है। यह केवल यह जांचने का मामला है कि सभी 15 टाइलों में उनके अपेक्षित एक्स और वाई अक्ष रेडियो बटन उनकी "समाधान" स्थिति पर सेट हैं।

/* Each tile is assigned a letter "a" to "o". 
 * The puzzle is solved when the tiles are in alphabetical order
 * reading left to right and top to bottom
*/
.frame:has(.a .X0:checked ~ .Y0:checked):has(.b .X1:checked ~ .Y0:checked):has(
    .c .X2:checked ~ .Y0:checked
  ):has(.d .X3:checked ~ .Y0:checked):has(.e .X0:checked ~ .Y1:checked):has(
    .f .X1:checked ~ .Y1:checked
  ):has(.g .X2:checked ~ .Y1:checked):has(.h .X3:checked ~ .Y1:checked):has(
    .i .X0:checked ~ .Y2:checked
  ):has(.j .X1:checked ~ .Y2:checked):has(.k .X2:checked ~ .Y2:checked):has(
    .l .X3:checked ~ .Y2:checked
  ):has(.m .X0:checked ~ .Y3:checked):has(.n .X1:checked ~ .Y3:checked):has(
    .o .X2:checked ~ .Y3:checked
  )
  ~ .options
  .success {
  display: block;
}

बाकी सब कॉस्मेटिक है। स्लाइडिंग ऊपर वर्णित परिवर्तन के एक सरल संक्रमण के साथ की जाती है

.tile {
  transition: 0.5s transform;
  @media (prefers-reduced-motion) {
    transition: none;
  }
}

और प्रत्येक टाइल पृष्ठभूमि-आकार और पृष्ठभूमि-स्थिति का उपयोग करके गेम की छवि का एक हिस्सा दिखाती है

.tile {
  background-size: 400%;
}
#board1 .tile {
  background-image: url("https://alohci.net/image/dev.to/slidergame/mullermarc-k7bQqdUf954-unsplash.webp");
}
.a {
  background-position: 0% 0%;
}
.b {
  background-position: 33.333% 0%;
}
.c {
  background-position: 66.667% 0%;
}
.d {
  background-position: 100% 0%;
}
.e {
  background-position: 0% 33.333%;
}
/* and so on for the remaining tiles */

और दस खेलों में से कौन सा खेलना है यह चुनने के लिए रेडियो बटन का एक सेट है।

गेम खेलने के लिए, बस उस टाइल पर क्लिक या टैप करें जिसे आप खाली सेल पर स्लाइड करना चाहते हैं।

मैंने टाइल अक्षर और रेडियो बटन दिखाने के लिए एक "बेअरबोन्स" मोड भी प्रदान किया है जो HTML और CSS कैसे काम करता है यह समझने में मदद कर सकता है।

तो यहाँ पूरा पहेली खेल है। कृपया मुझे अपनी कोई प्रतिक्रिया बताएं।