减少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);
}
}