Tôi đã tạo ra một trò chơi giải đố trong đó mục tiêu là loại bỏ tất cả các viên gạch trắng. Bạn có thể thử nó ở cuối câu hỏi.
Mỗi lần, bảng được tạo ngẫu nhiên với các ô màu trắng ở những vị trí ngẫu nhiên trên lưới 5 * 5. Bạn có thể nhấp vào bất kỳ ô nào trên lưới đó và nó sẽ chuyển màu của nó và tất cả các ô chạm vào nó trên các mặt của nó. Vấn đề nan giải của tôi là thực tế là tôi không biết liệu nó có tạo ra một bảng không thể. Cách tốt nhất để kiểm tra những thứ như thế này là gì?
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
Nếu bạn thích loại trò chơi giải đố này, hãy xem Bộ sưu tập Câu đố di động của Simon Tatham . Ngoài loại này (được gọi là Flip there), bạn có thể tìm thấy các biến thể của nhiều câu đố của Nhật Bản và khác. Mọi thứ đều theo giấy phép BSD và có lẽ là một bài đọc thú vị.
—
Dubu
Làm thế nào về kỹ thuật đảo ngược nó? Bắt đầu với một bảng trống, sau đó tự động hóa, cho biết 20 lần nhấp vào các ô vuông ngẫu nhiên. Bằng cách đó bạn biết phải có một giải pháp cuối cùng.
—
AJFaraday
Tôi muốn tiếp tục chơi, nhưng do câu hỏi của bạn, sự không chắc chắn về việc tôi có thực sự chiến thắng hay không đang ăn thịt tôi! Trò chơi thú vị :)
—
MrDuk
@MrDuk codepen.io/qwertyquerty/pen/WMGwVW đây là dự án đã hoàn thành! Cái này là cố định, và đánh bóng lên. Tôi cũng đã tạo ra một ứng dụng điện tử.
—
Qwerty
@Qwerty khi tôi cố gắng xem Bút của bạn trong chế độ xem toàn trang, tôi nhận được thông báo "Chủ sở hữu của Bút này cần xác minh địa chỉ email của họ để bật Chế độ xem toàn trang". Vui lòng xác minh địa chỉ email của bạn trên CodePen để tôi có thể thưởng thức trò chơi của bạn trong cửa sổ đầy đủ! :)
—
stephenwade