为什么我的滑块益智游戏无法正常工作？

Question

我不太擅长JS，但我想制作一个滑块益智游戏，但我希望每个可滑动块都是一个单词，而不是一个图像，现在网格是25 x 25。这些单词将形成一首诗，"玩"这个小游戏的人必须能够以不同的顺序重新排列所有单词，这样他才能创作自己的诗。

我查找了一些其他的幻灯片谜题，并试图复制它们，但问题是我使用的不是图像，而是单独的单词。因此，当一个块被移动时，单词不会随之转移。

function swapTiles(cell1, cell2) {
var temp = document.getElementById(cell1).className;
document.getElementById(cell1).className = document.getElementById(cell2).className;
document.getElementById(cell2).className = temp;
}
function shuffle() {
//Use nested loops to access each cell of the 3x3 grid
for (var row = 1; row <= 5; row++) { //For each row of the 3x3 grid
for (var column = 1; column <= 5; column++) { //For each column in this row
var row2 = Math.floor(Math.random() * 5 + 1); //Pick a random row from 1 to 3
var column2 = Math.floor(Math.random() * 5 + 1); //Pick a random column from 1 to 3
swapTiles("cell" + row + column, "cell" + row2 + column2); //Swap the look & feel of both cells
}
}
}
function clickTile(row, column) {
var cell = document.getElementById("cell" + row + column);
var tile = cell.className;
if (tile != "tile25") {
//Checking if white tile on the right
if (column < 5) {
if (document.getElementById("cell" + row + (column + 1)).className == "tile25") {
swapTiles("cell" + row + column, "cell" + row + (column + 1));
return;
}
}
//Checking if white tile on the left
if (column > 1) {
if (document.getElementById("cell" + row + (column - 1)).className == "tile25") {
swapTiles("cell" + row + column, "cell" + row + (column - 1));
return;
}
}
//Checking if white tile is above
if (row > 1) {
if (document.getElementById("cell" + (row - 1) + column).className == "tile25") {
swapTiles("cell" + row + column, "cell" + (row - 1) + column);
return;
}
}
//Checking if white tile is below
if (row < 5) {
if (document.getElementById("cell" + (row + 1) + column).className == "tile25") {
swapTiles("cell" + row + column, "cell" + (row + 1) + column);
return;
}
}
}
}

* {
font-family: 'Playfair Display', serif;
-webkit-user-select: none;
/* Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE10+/Edge */
user-select: none;
/* Standard */
}
body {
background: white;
}
.tile1,
.tile2,
.tile3,
.tile4,
.tile5,
.tile6,
.tile7,
.tile8,
.tile9,
.tile10,
.tile11,
.tile12,
.tile13,
.tile14,
.tile15,
.tile16,
.tile17,
.tile18,
.tile19,
.tile20,
.tile21,
.tile22,
.tile23,
.tile24 {
display: table-cell;
width: 120px;
height: 120px;
text-align: center;
vertical-align: middle;
background-color: lightgrey;
font-size: 10pt;
cursor: pointer;
border: 2px solid white;
}
.tile25 {
background-color: white;
display: table-cell;
width: 120px;
height: 120opx;
opacity: 0.4;
text-align: center;
vertical-align: middle;
}
#table {
display: table;
}
#row1,
#row2,
#row3,
#row4,
#row5 {
display: table-row;
}

<link href="https://fonts.googleapis.com/css?family=Playfair+Display&display=swap" rel="stylesheet">
<div id="table">
<div id="row1">
<div id="cell11" class="tile1" onClick="clickTile(1,1);">BANANEN</div>
<div id="cell12" class="tile2" onClick="clickTile(1,2);">PRUIMEN</div>
<div id="cell13" class="tile3" onClick="clickTile(1,3);">ADVOCADOS</div>
<div id="cell14" class="tile4" onClick="clickTile(1,4);">PAPRIKAS</div>
<div id="cell15" class="tile5" onClick="clickTile(1,5);">RADIJZEN</div>
</div>
<div id="row2">
<div id="cell21" class="tile6" onClick="clickTile(2,1);">BLAUWE BESSEN</div>
<div id="cell22" class="tile7" onClick="clickTile(2,2);">ABRIKOZEN</div>
<div id="cell23" class="tile8" onClick="clickTile(2,3);">VIJGEN</div>
<div id="cell24" class="tile9" onClick="clickTile(2,4);">WITTE DRUIVEN</div>
<div id="cell25" class="tile10" onClick="clickTile(2,5);">MANGOS</div>
</div>
<div id="row3">
<div id="cell31" class="tile11" onClick="clickTile(3,1);">KIWIS</div>
<div id="cell32" class="tile12" onClick="clickTile(3,2);">APPELS</div>
<div id="cell33" class="tile13" onClick="clickTile(3,3);">PEREN</div>
<div id="cell34" class="tile14" onClick="clickTile(3,4);">MANDARIJNEN</div>
<div id="cell35" class="tile15" onClick="clickTile(3,5);">RODE DRUIVEN</div>
</div>
<div id="row4">
<div id="cell41" class="tile16" onClick="clickTile(4,1);">ACEROLAS</div>
<div id="cell42" class="tile17" onClick="clickTile(4,2);">BRAMEN</div>
<div id="cell43" class="tile18" onClick="clickTile(4,3);">COURGETTES</div>
<div id="cell44" class="tile19" onClick="clickTile(4,4);">FRAMBOZEN</div>
<div id="cell45" class="tile20" onClick="clickTile(4,5);">KOKOSNOTEN</div>
</div>
<div id="row5">
<div id="cell51" class="tile21" onClick="clickTile(5,1);">KERSEN</div>
<div id="cell52" class="tile22" onClick="clickTile(5,2);">PAPAJAS</div>
<div id="cell53" class="tile23" onClick="clickTile(5,3);">MELOENEN</div>
<div id="cell54" class="tile24" onClick="clickTile(5,4);">DADELS</div>
<div id="cell55" class="tile25" onClick="clickTile(5,5);"></div>
</div>
</div>
<button onClick="shuffle();">New Game</button>

CodePen

有人有主意吗？

Answer 1

它只是缺少要交换的textContent。只是在下面的代码中添加了它。

function swapTiles(cell1, cell2) {
	var elem1 = document.getElementById(cell1),
elem2 = document.getElementById(cell2);

var tempClass = elem1.className;
var tempText = elem1.textContent;

elem1.className = elem2.className;
elem1.textContent = elem2.textContent;
elem2.className = tempClass;
elem2.textContent = tempText;
}
function shuffle() {
//Use nested loops to access each cell of the 3x3 grid
for (var row = 1; row <= 5; row++) { //For each row of the 3x3 grid
for (var column = 1; column <= 5; column++) { //For each column in this row
var row2 = Math.floor(Math.random() * 5 + 1); //Pick a random row from 1 to 3
var column2 = Math.floor(Math.random() * 5 + 1); //Pick a random column from 1 to 3
swapTiles("cell" + row + column, "cell" + row2 + column2); //Swap the look & feel of both cells
}
}
}
function clickTile(row, column) {
var cell = document.getElementById("cell" + row + column);
var tile = cell.className;
if (tile != "tile25") {
//Checking if white tile on the right
if (column < 5) {
if (document.getElementById("cell" + row + (column + 1)).className == "tile25") {
swapTiles("cell" + row + column, "cell" + row + (column + 1));
return;
}
}
//Checking if white tile on the left
if (column > 1) {
if (document.getElementById("cell" + row + (column - 1)).className == "tile25") {
swapTiles("cell" + row + column, "cell" + row + (column - 1));
return;
}
}
//Checking if white tile is above
if (row > 1) {
if (document.getElementById("cell" + (row - 1) + column).className == "tile25") {
swapTiles("cell" + row + column, "cell" + (row - 1) + column);
return;
}
}
//Checking if white tile is below
if (row < 5) {
if (document.getElementById("cell" + (row + 1) + column).className == "tile25") {
swapTiles("cell" + row + column, "cell" + (row + 1) + column);
return;
}
}
}
}

* {
font-family: 'Playfair Display', serif;
-webkit-user-select: none;
/* Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE10+/Edge */
user-select: none;
/* Standard */
}
body {
background: white;
}
.tile1,
.tile2,
.tile3,
.tile4,
.tile5,
.tile6,
.tile7,
.tile8,
.tile9,
.tile10,
.tile11,
.tile12,
.tile13,
.tile14,
.tile15,
.tile16,
.tile17,
.tile18,
.tile19,
.tile20,
.tile21,
.tile22,
.tile23,
.tile24 {
display: table-cell;
width: 120px;
height: 120px;
text-align: center;
vertical-align: middle;
background-color: lightgrey;
font-size: 10pt;
cursor: pointer;
border: 2px solid white;
}
.tile25 {
background-color: white;
display: table-cell;
width: 120px;
height: 120opx;
opacity: 0.4;
text-align: center;
vertical-align: middle;
}
#table {
display: table;
}
#row1,
#row2,
#row3,
#row4,
#row5 {
display: table-row;
}

<div>
<div id="table">
<div id="row1">
<div id="cell11" class="tile1" onClick="clickTile(1,1);">BANANEN</div>
<div id="cell12" class="tile2" onClick="clickTile(1,2);">PRUIMEN</div>
<div id="cell13" class="tile3" onClick="clickTile(1,3);">ADVOCADOS</div>
<div id="cell14" class="tile4" onClick="clickTile(1,4);">PAPRIKAS</div>
<div id="cell15" class="tile5" onClick="clickTile(1,5);">RADIJZEN</div>
</div>
<div id="row2">
<div id="cell21" class="tile6" onClick="clickTile(2,1);">BLAUWE BESSEN</div>
<div id="cell22" class="tile7" onClick="clickTile(2,2);">ABRIKOZEN</div>
<div id="cell23" class="tile8" onClick="clickTile(2,3);">VIJGEN</div>
<div id="cell24" class="tile9" onClick="clickTile(2,4);">WITTE DRUIVEN</div>
<div id="cell25" class="tile10" onClick="clickTile(2,5);">MANGOS</div>
</div>
<div id="row3">
<div id="cell31" class="tile11" onClick="clickTile(3,1);">KIWIS</div>
<div id="cell32" class="tile12" onClick="clickTile(3,2);">APPELS</div>
<div id="cell33" class="tile13" onClick="clickTile(3,3);">PEREN</div>
<div id="cell34" class="tile14" onClick="clickTile(3,4);">MANDARIJNEN</div>
<div id="cell35" class="tile15" onClick="clickTile(3,5);">RODE DRUIVEN</div>
</div>
<div id="row4">
<div id="cell41" class="tile16" onClick="clickTile(4,1);">ACEROLAS</div>
<div id="cell42" class="tile17" onClick="clickTile(4,2);">BRAMEN</div>
<div id="cell43" class="tile18" onClick="clickTile(4,3);">COURGETTES</div>
<div id="cell44" class="tile19" onClick="clickTile(4,4);">FRAMBOZEN</div>
<div id="cell45" class="tile20" onClick="clickTile(4,5);">KOKOSNOTEN</div>
</div>
<div id="row5">
<div id="cell51" class="tile21" onClick="clickTile(5,1);">KERSEN</div>
<div id="cell52" class="tile22" onClick="clickTile(5,2);">PAPAJAS</div>
<div id="cell53" class="tile23" onClick="clickTile(5,3);">MELOENEN</div>
<div id="cell54" class="tile24" onClick="clickTile(5,4);">DADELS</div>
<div id="cell55" class="tile25" onClick="clickTile(5,5);"></div>
</div>
</div>
<button onClick="shuffle();">New Game</button>
</div>