为什么我的 Slider Puzzle 游戏不能正常运行？

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>

代码笔

有人有想法吗？

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>