আমি এক ধরণের ধাঁধা গেম তৈরি করেছি যেখানে লক্ষ্যটি হ'ল সমস্ত সাদা টাইলস থেকে মুক্তি পাওয়া। আপনি প্রশ্নের শেষে চেষ্টা করতে পারেন।
প্রতিবার, বোর্ডটি এলোমেলোভাবে 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 টি ক্লিক বলুন। আপনি জানেন যে শেষে অবশ্যই একটি সমাধান থাকতে হবে।
—
এজেফারাডে
আমি খেলা চালিয়ে যেতে চাই, তবে আপনার প্রশ্নের কারণে, আমি আসলে জিতব কি না তার অনিশ্চয়তা আমাকে খাচ্ছে! মজাদার খেলা :)
—
মিস্টার ডুক
@ এমআরডুক কোডেপেন.ইও / কোয়ার্টিইকিয়ার্টি / স্পেন / ডাব্লু এমএমডাব্লুডাব্লু এখানে সমাপ্ত প্রকল্প! এই এক স্থির, এবং পালিশ করা হয়। আমি একটি বৈদ্যুতিন অ্যাপও তৈরি করেছি made
—
কিওয়ার্টি
@ কিওয়ার্টি যখন আমি আপনার পৃষ্ঠাকে পূর্ণ পৃষ্ঠা দর্শনতে দেখার চেষ্টা করেছি তখন আমি এই বার্তাটি পেয়েছি "এই পৃষ্ঠার মালিককে পূর্ণ পৃষ্ঠা দর্শন সক্ষম করার জন্য তাদের ইমেল ঠিকানাটি যাচাই করা দরকার।" কোডপেনে আপনার ইমেল ঠিকানাটি যাচাই করুন যাতে আমি আপনার উইন্ডোটি পুরো উইন্ডোটিতে উপভোগ করতে পারি! :)
—
স্টিফেনওয়াড