मैंने एक पहेली गेम बनाया है जहाँ लक्ष्य सभी सफेद टाइलों से छुटकारा पाना है। आप इसे प्रश्न के अंत में आज़मा सकते हैं।
हर बार, बोर्ड यादृच्छिक रूप से 5 * 5 ग्रिड पर यादृच्छिक स्थानों पर सफेद टाइलों के साथ उत्पन्न होता है। आप उस ग्रिड पर किसी भी टाइल को क्लिक कर सकते हैं और यह उसके रंग और उसके किनारों पर इसे छूने वाले सभी टाइलों को टॉगल करेगा। मेरी दुविधा यह है कि मुझे नहीं पता कि क्या यह एक असंभव बोर्ड उत्पन्न करेगा। इस तरह से चीजों की जांच करने का सबसे अच्छा तरीका क्या है?
function newgame() {
moves = 0;
document.getElementById("moves").innerHTML = "Moves: "+moves;
for (var i = 0; i < 25; i++) {
if (Math.random() >= 0.5) {
$(document.getElementsByClassName('block')[i]).toggleClass("b1 b2")
}
}
}
newgame();
function toggle(a,b) {
moves += 1;
document.getElementById("moves").innerHTML = "Moves: "+moves;
$(document.getElementsByClassName('block')[a+(b*5)]).toggleClass("b1 b2");
if (a<4) {$(document.getElementsByClassName('block')[(a+1)+(b*5)]).toggleClass("b1 b2")}
if (a>0) {$(document.getElementsByClassName('block')[(a-1)+(b*5)]).toggleClass("b1 b2")}
if (b<4) {$(document.getElementsByClassName('block')[a+((b+1)*5)]).toggleClass("b1 b2")}
if (b>0) {$(document.getElementsByClassName('block')[a+((b-1)*5)]).toggleClass("b1 b2")}
}body {
background-color: #000000;
}
.game {
float: left;
background-color: #000000;
width: 300px;
height: 300px;
overflow: hidden;
overflow-x: hidden;
user-select: none;
display: inline-block;
}
.container {
border-color: #ffffff;
border-width: 5px;
border-style: solid;
border-radius: 5px;
width: 600px;
height: 300px;
text-align: center;
}
.side {
float: left;
background-color: #000000;
width: 300px;
height: 300px;
overflow: hidden;
overflow-x: hidden;
user-select: none;
display: inline-block;
}
.block {
transition: background-color 0.2s;
float: left;
}
.b1:hover {
background-color: #444444;
cursor: pointer;
}
.b2:hover {
background-color: #bbbbbb;
cursor: pointer;
}
.row {
width: 300px;
overflow: auto;
overflow-x: hidden;
}
.b1 {
display: inline-block;
height: 50px;
width: 50px;
background-color: #000000;
border-color: #000000;
border-width: 5px;
border-style: solid;
}
.b2 {
display: inline-block;
height: 50px;
width: 50px;
background-color: #ffffff;
border-color: #000000;
border-width: 5px;
border-style: solid;
}
.title {
width: 200px;
height: 50px;
color: #ffffff;
font-size: 55px;
font-weight: bold;
font-family: Arial;
display: table-cell;
vertical-align: middle;
}
.button {
cursor: pointer;
width: 200px;
height: 50px;
background-color: #000000;
border-color: #ffffff;
border-style: solid;
border-width: 5px;
color: #ffffff;
font-size: 25px;
font-weight: bold;
font-family: Arial;
display: table-cell;
vertical-align: middle;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}
.button:hover {
background-color: #ffffff;
color: #000000;
}
.sidetable {
padding: 30px 0px;
height: 200px;
}
#moves {
width: 200px;
height: 50px;
color: #aaaaaa;
font-size: 30px;
font-weight: bold;
font-family: Arial;
display: table-cell;
vertical-align: middle;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<div class="container">
<div class="game"><div class="row"><div onclick="toggle(0,0);" class="block b1"></div><div onclick="toggle(1,0);" class="block b1"></div><div onclick="toggle(2,0);" class="block b1"></div><div onclick="toggle(3,0);" class="block b1"></div><div onclick="toggle(4,0);" class="block b1"></div></div><div class="row"><div onclick="toggle(0,1);" class="block b1"></div><div onclick="toggle(1,1);" class="block b1"></div><div onclick="toggle(2,1);" class="block b1"></div><div onclick="toggle(3,1);" class="block b1"></div><div onclick="toggle(4,1);" class="block b1"></div></div><div class="row"><div onclick="toggle(0,2);" class="block b1"></div><div onclick="toggle(1,2);" class="block b1"></div><div onclick="toggle(2,2);" class="block b1"></div><div onclick="toggle(3,2);" class="block b1"></div><div onclick="toggle(4,2);" class="block b1"></div></div><div class="row"><div onclick="toggle(0,3);" class="block b1"></div><div onclick="toggle(1,3);" class="block b1"></div><div onclick="toggle(2,3);" class="block b1"></div><div onclick="toggle(3,3);" class="block b1"></div><div onclick="toggle(4,3);" class="block b1"></div></div><div class="row"><div onclick="toggle(0,4);" class="block b1"></div><div onclick="toggle(1,4);" class="block b1"></div><div onclick="toggle(2,4);" class="block b1"></div><div onclick="toggle(3,4);" class="block b1"></div><div onclick="toggle(4,4);" class="block b1"></div></div></div>
<div class="side">
<center class="sidetable">
<div class="title">Tiles</div>
<br>
<div class="button" onclick="newgame()">New Game</div>
<br><br>
<div id="moves">Moves: 0</div>
</center>
</div>
</div>
</center>
9
यदि आप इस तरह के पहेली खेल में रुचि रखते हैं, तो साइमन टाथम के पोर्टेबल पहेली संग्रह पर एक नज़र डालें । इस प्रकार के अलावा (जिसे वहां फ्लिप कहा जाता है), आप कई जापानी और अन्य पहेलियों के वेरिएंट पा सकते हैं। सब कुछ बीएसडी लाइसेंस के तहत है और शायद एक दिलचस्प पढ़ा है।
—
डब्बू
कैसे रिवर्स इंजीनियरिंग के बारे में यह? एक खाली बोर्ड से शुरू करें, फिर स्वचालित करें, यादृच्छिक वर्गों पर 20 क्लिक करें। इस तरह आप जानते हैं कि अंत में एक समाधान होना चाहिए।
—
AJFaraday
मैं खेलना जारी रखना चाहता हूं, लेकिन आपके सवाल के कारण, मैं वास्तव में जीत पाऊंगा या नहीं, इसकी अनिश्चितता मुझ पर खा रही है! मज़ा खेल :)
—
MrDuk
@MrDuk codepen.io/qwertyquerty/pen/WMGwVW यहां तैयार प्रोजेक्ट है! यह एक तय है, और पॉलिश है। मैंने एक इलेक्ट्रॉन ऐप भी बनाया है।
—
क्वर्टी
@Qwerty जब मैंने आपके पेन को पूर्ण पृष्ठ दृश्य में देखने का प्रयास किया, तो मुझे संदेश मिला "इस पेन के मालिक को पूर्ण पृष्ठ दृश्य को सक्षम करने के लिए अपने ईमेल पते को सत्यापित करने की आवश्यकता है।" कृपया CodePen पर अपना ईमेल पता सत्यापित करें ताकि मैं पूरी विंडो में आपके खेल का आनंद ले सकूँ! :)
—
Stephenwade