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

Question

I have a sliding tile puzzle in Javascript and want to add a 200 ms transition when a tile is moved. I also want to shuffle the tiles upon loading more than they already do (supposed to be 100 times, according to the last lines of my JS code, but this doesn't seem to be very effective). You can look at all my code here: 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();

I used ChatGPT to generate my JS and its solutions to the two problems I mentioned above don't work.

Thanks in advance: (EDIT, also, if you have any recommendations of how I can improve my code, please let me know!)

Answer 1

Is this what you want?

// 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();