为什么我的Slider Puzzle游戏无法正常工作？

Question

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

我查找了其他幻灯片拼图并尝试复制它们，但问题是我不是在处理图像，而是用单独的单词。因此，当移动块时，单词不会随之转移。

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>