减少 javascript 代码（堆栈溢出 2022）

Question

我在做这个拼图，有时当我给一个新游戏的时候，碎片出错了，我为它添加了一个功能，但据我所知，它不起作用，我的脑袋再也受不了了.而且我还想稍微简化一下代码，这就是我之前问的原因。

var recuento = 0;
var movimientos = 0;

var CheckArray = new Array(9);

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() {
  for (var row = 1; row <= 3; row++) {
    for (var column = 1; column <= 3; column++) {
      var row2 = Math.floor(Math.random() * 3 + 1);
      var column2 = Math.floor(Math.random() * 3 + 1);

      swapTiles("cell" + row + column, "cell" + row2 + column2);
    }
  }
  Check();
}

function Check() {
  CheckArray[0] = document.getElementById("cell11").getAttribute('class');
  CheckArray[1] = document.getElementById("cell12").getAttribute('class');
  CheckArray[2] = document.getElementById("cell13").getAttribute('class');
  CheckArray[3] = document.getElementById("cell21").getAttribute('class');
  CheckArray[4] = document.getElementById("cell22").getAttribute('class');
  CheckArray[5] = document.getElementById("cell23").getAttribute('class');
  CheckArray[6] = document.getElementById("cell31").getAttribute('class');
  CheckArray[7] = document.getElementById("cell32").getAttribute('class');
  for (var x = 0; x < 8; x++) {
    CheckArray[x] = CheckArray[x].replaceAll('title', '');
  }
  for (let i = 0; i < CheckArray.length; i++) {
    for (let j = 0; j < n - 1 - i; j++) {
      if (CheckArray[j] > CheckArray[j + 1]) {
        let aux = CheckArray[j];
        CheckArray[j] = CheckArray[j + 1];
        CheckArray[j + 1] = aux;
        movimientos++;
      }
    }
  }
  if (movimientos % 2 == 0) {} else {
    alert("No es pot resoldre");
  }
}

function Comprobar() {
  var a = document.getElementById("cell11").getAttribute('class');
  var b = document.getElementById("cell12").getAttribute('class');
  var c = document.getElementById("cell13").getAttribute('class');
  var d = document.getElementById("cell21").getAttribute('class');
  var e = document.getElementById("cell22").getAttribute('class');
  var f = document.getElementById("cell23").getAttribute('class');
  var g = document.getElementById("cell31").getAttribute('class');
  var h = document.getElementById("cell32").getAttribute('class');
  var i = document.getElementById("cell33").getAttribute('class');

  resultado = a + b + c + d + e + f + g + h + i;
  document.getElementById("test").innerHTML = resultado;

  if ((resultado === "tile1tile2tile3tile4tile5tile6tile7tile8tile9") == true) {
    alert("Has guanyat, felicitats!");
  } else {}
}

function clickTile(row, column) {
  var cell = document.getElementById("cell" + row + column);
  var tile = cell.className;
  if (tile != "tile9") {
    if (column < 3) {
      if (document.getElementById("cell" + row + (column + 1)).className == "tile9") {
        swapTiles("cell" + row + column, "cell" + row + (column + 1));
        recuento++;
        document.getElementById("control").innerHTML = recuento;
        Comprobar();
        return;
      }
    }
    if (column > 1) {
      if (document.getElementById("cell" + row + (column - 1)).className == "tile9") {
        swapTiles("cell" + row + column, "cell" + row + (column - 1));
        recuento++;
        document.getElementById("control").innerHTML = recuento;
        Comprobar();
        return;
      }
    }
    if (row > 1) {
      if (document.getElementById("cell" + (row - 1) + column).className == "tile9") {
        swapTiles("cell" + row + column, "cell" + (row - 1) + column);
        recuento++;
        document.getElementById("control").innerHTML = recuento;
        Comprobar();
        return;
      }
    }
    if (row < 3) {
      if (document.getElementById("cell" + (row + 1) + column).className == "tile9") {
        swapTiles("cell" + row + column, "cell" + (row + 1) + column);
        recuento++;
        document.getElementById("control").innerHTML = recuento;
        Comprobar();
        return;
      }
    }
  }

}

body {
  background: #6ca0e4c4;
}

.tile1,
.tile2,
.tile3,
.tile4,
.tile5,
.tile6,
.tile7,
.tile8,
.tile9 {
  display: table-cell;
  width: 180px;
  height: 180px;
  text-align: center;
  vertical-align: middle;
  background-image: url("attacusAtlas.png");
  font-size: 10pt;
  cursor: pointer;
  border: 2px solid white;
}

.tile1 {
  background-position: left top;
}

.tile2 {
  background-position: center top;
}

.tile3 {
  background-position: right top;
}

.tile4 {
  background-position: left center;
}

.tile5 {
  background-position: center center;
}

.tile6 {
  background-position: right center;
}

.tile7 {
  background-position: left bottom;
}

.tile8 {
  background-position: center bottom;
}

.tile9 {
  background: white;
  cursor: default;
}

<h1 class="green">Sliding Puzzle.</h1>
<p> Hola, aquest és un <b>puzzle 3x3</b> .</p>
<h2 id="movimientos"></h2>
<h2 id="control"></h2>
<h2 id="test"></h2>

<center>
  <button onClick="shuffle();">New Game</button><br><br>
  <div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Seleccionar dificultat</button>
    <div id="myDropdown" class="dropdown-content">
      <a href="3x3.html">Fácil</a>
      <a href="4x4.html">Normal</a>
    </div>
  </div>
  <h2 id="movimientos"></h2>
  <h2 id="control"></h2>
  <h2 id="test"></h2>
  <br><br>

  <div id="table" style="display: table;">
    <div id="row1" style="display: table-row;">
      <div id="cell11" class="tile1" onClick="clickTile(1,1);">1</div>
      <div id="cell12" class="tile2" onClick="clickTile(1,2);">2</div>
      <div id="cell13" class="tile3" onClick="clickTile(1,3);">3</div>


    </div>
    <div id="row2" style="display: table-row;">
      <div id="cell21" class="tile4" onClick="clickTile(2,1);">4</div>
      <div id="cell22" class="tile5" onClick="clickTile(2,2);">5</div>
      <div id="cell23" class="tile6" onClick="clickTile(2,3);">6</div>


    </div>
    <div id="row3" style="display: table-row;">
      <div id="cell31" class="tile7" onClick="clickTile(3,1);">7</div>
      <div id="cell32" class="tile8" onClick="clickTile(3,2);">8</div>
      <div id="cell33" class="tile9" onClick="clickTile(3,3);">9</div>
    </div>
  </div>
</center>

Answer 1

像这样的东西应该有用。因为我不知道你想对结果做什么，所以我只是把它们放在一个数组中 (cell_classes).

let cell_classes = [];

for(i = 1; i <= 4; i++){
  for(j = 1; j <= 4; j++){
    const tmp = document.getElementById("cell" + i + "" + j).getAttribute('class');

    cell_classes.push(tmp);
  }
}

减少 javascript 代码（堆栈溢出 2022）

reduce javascript code (stack overflow 2022)

html

javascript

css

puzzle