制作 JS 滑动拼图； 想加.2s变换

Question

我在 Javascript 中有一个滑动方块拼图，我想在移动方块时添加 200 毫秒的过渡。 我还想在加载时比它们已经做的更多地洗牌（根据我的 JS 代码的最后几行，应该是 100 次，但这似乎不是很有效）。 你可以在这里查看我的所有代码： https://codepen.io/Xjjacobx/pen/LYBbjRL

// First, create a 2D array representing the tiles of the puzzle
var tiles = [
    [1, 2, 3, 4, 5, 6],
    [7, 8, 9, 10, 11, 12],
    [13, 14, 15, 16, 17, 18],
    [19, 20, 21, 22, 23, 24],
    [25, 26, 27, 28, 29, 30],
    [31, 32, 33, 34, 35, null]
];

// Next, create a function to shuffle the tiles randomly
function shuffleTiles() {
    for (let i = tiles.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        [tiles[i], tiles[j]] = [tiles[j], tiles[i]];
    }
}

// Then, create a function to render the puzzle to the screen
function renderPuzzle() {
    for (let i = 0; i < tiles.length; i++) {
        for (let j = 0; j < tiles[i].length; j++) {
            let tile = tiles[i][j];
            let tileElement = document.getElementById(`tile-${i}-${j}`);
            if (tile === null)

            {
                tileElement.style.backgroundImage = "";
            } else {
                tileElement.style.backgroundImage = `url('https://upload.wikimedia.org/wikipedia/commons/9/9e/Ours_brun_parcanimalierpyrenees_1.jpg')`;
                tileElement.style.backgroundPosition = `-${(tile - 1) % 6 * 100}px -${Math.floor((tile - 1) / 6) * 100}px`;
            }
        }
    }
}

// Finally, create event handlers to move the tiles when they are clicked
document.addEventListener("click", function(event) {
    let tileElement = event.target;
    let tileCoords = tileElement.id.split("-").map(function(x) { return parseInt(x, 10); });
    let i = tileCoords[1];
    let j = tileCoords[2];
    if (tiles[i][j] === null) return;
    if (i > 0 && tiles[i - 1][j] === null) {
        tiles[i - 1][j] = tiles[i][j];
        tiles[i][j] = null;
    } else if (i < tiles.length - 1 && tiles[i + 1][j] === null) {
        tiles[i + 1][j] = tiles[i][j];
        tiles[i][j] = null;
    } else if (j > 0 && tiles[i][j - 1] === null) {
        tiles[i][j - 1] = tiles[i][j];
        tiles[i][j] = null;
    } else if (j < tiles[i].length - 1 && tiles[i][j + 1] === null) {
        tiles[i][j + 1] = tiles[i][j];
        tiles[i][j] = null;
    }
    renderPuzzle();
});

// Call the shuffle function multiple times to shuffle the tiles more
for (let i = 0; i < 100; i++) {
    shuffleTiles();
}

renderPuzzle();

我使用 ChatGPT 生成我的 JS，它对我上面提到的两个问题的解决方案不起作用。

在此先感谢：（编辑，另外，如果您对我如何改进我的代码有任何建议，请告诉我！）

Answer 1

这是你想要的吗？

// First, create a 2D array representing the tiles of the puzzle
var tiles = [
    [1, 2, 3, 4, 5, 6],
    [7, 8, 9, 10, 11, 12],
    [13, 14, 15, 16, 17, 18],
    [19, 20, 21, 22, 23, 24],
    [25, 26, 27, 28, 29, 30],
    [31, 32, 33, 34, 35, null]
];

// Then, create a function to render the puzzle to the screen
function renderPuzzle() {
    for (let i = 0; i < tiles.length; i++) {
        for (let j = 0; j < tiles[i].length; j++) {
            let tile = tiles[i][j];
            let tileElement = document.getElementById(`tile-${i}-${j}`);
            if (tile === null) {
                tileElement.style.backgroundImage = "";
            } else {
                tileElement.style.backgroundImage = `url('https://upload.wikimedia.org/wikipedia/commons/9/9e/Ours_brun_parcanimalierpyrenees_1.jpg')`;
                tileElement.style.backgroundPosition = `-${((tile - 1) % 6) * 100}px -${
                    Math.floor((tile - 1) / 6) * 100
                }px`;
            }
        }
    }
}

// Finally, create event handlers to move the tiles when they are clicked
document.addEventListener("click", function (event) {
    let tileElement = event.target;
    let tileCoords = tileElement.id.split("-").map(function (x) {
        return parseInt(x, 10);
    });
    let i = tileCoords[1];
    let j = tileCoords[2];
    if (tiles[i][j] === null) return;
    if (i > 0 && tiles[i - 1][j] === null) {
        tiles[i - 1][j] = tiles[i][j];
        tiles[i][j] = null;
    } else if (i < tiles.length - 1 && tiles[i + 1][j] === null) {
        tiles[i + 1][j] = tiles[i][j];
        tiles[i][j] = null;
    } else if (j > 0 && tiles[i][j - 1] === null) {
        tiles[i][j - 1] = tiles[i][j];
        tiles[i][j] = null;
    } else if (j < tiles[i].length - 1 && tiles[i][j + 1] === null) {
        tiles[i][j + 1] = tiles[i][j];
        tiles[i][j] = null;
    }
    renderPuzzle();
});

function getRandom(min,max){
    return Math.floor(Math.random()*max)+min;
};

// Call the shuffle function multiple times to shuffle the tiles more
for (let y = 0; y < tiles.length; y++) {
    for (let x = 0; x < tiles[y].length; x++){
        let yy = getRandom(0 ,tiles.length-1 )
        let xx = getRandom(0 ,tiles[yy].length-1)
        let temp = tiles[y][x]
        tiles[y][x]  = tiles[yy][xx]
        tiles[yy][xx] = temp
    }
}

renderPuzzle();