javascript - 滑动拼图(网页游戏)-过渡

我正在使用HTML，CSS和JavaScript / jQuery做一个滑动难题（类似于this）。

一切正常，但是我想在每次滑动时添加一个滑动过渡。

该代码根据以下逻辑工作：


创建12、16或48个<div>（取决于难度）。
将background-image分配给所有图像，并进行相应裁剪以模拟原始图像的“片段”。
它们都具有image和piece<number>的类，其中<number>是图块的编号。最后一个图块（piece12，piece16或piece48）也具有voidBlock类，该类删除了background-image。这是空砖，它允许紧邻其的砖移动到其位置。所有其他图块都有一个附加类imgBlock。
单击voidBlock旁边的图块之一时，它将与voidBlock交换类。例如，如果我们单击piece6，恰好在voidBlock旁边（假设难度设置为easy，因此voidBlock为piece12），则会发生这种情况：


原始的voidBlock将其piece12类更改为piece6。
原始的voidBlock将其voidBlock类更改为imgBlock。
原始的piece6将其piece6类更改为piece12。
原始的piece6将其imgBlock类更改为voidBlock。


之后，调用draw()函数；它根据其background-position编号设置每个图块的piece。


您可能已经猜到了，<div>都没有实际移动。当它们的background-position的background-image在整个类中更改时，它们保持静止。

尽管我确实有一些编程经验（即使用Python和Java），但是Web开发对我来说还是很新的。我尝试了各种过渡方法，但是我能想到的最好的办法是每次移动图块时都移动背景图像（这很奇怪且不直观）。

因此，我的问题是：有没有办法让瓷砖每次移动时动画或过渡？



码

（注释掉的行与问题无关）

CSS：

main.css文件的一部分：

.image {
   background-image: url(/Users/user/puzzle-test/img/image001.jpg);
   width: 200px;
   height: 200px;
   display: inline-block;
   vertical-align: top;
   margin: 10px 10px 10px 10px;
}

.voidBlock {
    background-image: none;
}

.imgBlock {
    background-image: url(/Users/user/puzzle-test/img/image001.jpg);
}

JavaScript / jQuery：

<div>单击处理程序：

var clickHandler = function() {
    var voidPosX = $(".voidBlock").css("left");
    var voidPosY = $(".voidBlock").css("top");
    voidPosX = parseInt(voidPosX.substring(0, voidPosX.length-2));
    voidPosY = parseInt(voidPosY.substring(0, voidPosY.length-2));

    var posX = $(this).css("left");
    var posY = $(this).css("top");
    posX = parseInt(posX.substring(0, posX.length-2));
    posY = parseInt(posY.substring(0, posY.length-2));

    if((voidPosX == posX - finalWidth) && (voidPosY == posY)){
        posX -= finalWidth;
        voidPosX += finalWidth;
        move($(this));
    }else if((voidPosX == posX + finalWidth) && (voidPosY == posY)){
        posX += finalWidth;
        voidPosX -= finalWidth;
        move($(this));
    }else if((voidPosY == posY - finalHeight) && (voidPosX == posX)){
        posY -= finalHeight;
        voidPosY += finalHeight;
        move($(this));
    }else if((voidPosY == posY + finalHeight) && (voidPosX == posX)){
        posY += finalHeight;
        voidPosY -= finalHeight;
        move($(this));
    }
}

move函数（在单击处理程序中使用）（h和v是拼图的水平和垂直尺寸）：

function move(element) {
    //moveCounter++;

    var temp = element.attr("class").split(" ");
    for(var i = 0; i < temp.length; i++){
        if(temp[i].substring(0, 5) == "piece"){
            var pieceNum = temp[i].substring(5);
        }
    }

    element.addClass("tempBlock1");
    $(".voidBlock").addClass("tempBlock2");

    element.filter(".tempBlock1").addClass("piece"+(h*v));
    element.filter(".tempBlock1").removeClass("piece"+pieceNum);
    element.filter(".tempBlock1").addClass("voidBlock");
    element.filter(".tempBlock1").removeClass("imgBlock");


    $(".voidBlock").filter(".tempBlock2").addClass("piece"+pieceNum);
    $(".voidBlock").filter(".tempBlock2").removeClass("piece"+(h*v));
    $(".voidBlock").filter(".tempBlock2").addClass("imgBlock");
    $(".voidBlock").filter(".tempBlock2").removeClass("voidBlock");

    $(".tempBlock1").removeClass("tempBlock1");
    $(".tempBlock2").removeClass("tempBlock2");

    draw();
}

draw函数（数字800和600代表图像的尺寸）：

function draw() {
    //var imgSelect = $("input[type='radio'][name='bgImage']:checked").val();

    var j = 1;
    for(var pY = 0; pY > -600; pY -= finalHeight){
        for(var pX = 0; pX > -800; pX -= finalWidth){
            $(".piece"+j).css("background-position", pX+"px "+pY+"px");

            //$(".piece"+j).css("background-image", "url(/Users/user/puzzle-test/img/"+imgSelect+".jpg)");
            //$(".piece"+j).find(".helpNum").text(j);

            j++;
        }
    }

    //$(".move").text("Moves: " + moveCounter);

    $(".voidBlock").css("background-image", "none");

    //$(".grid").find("img").attr("src", "img/"+imgSelect+".jpg");
    //$(".image:not(.voidBlock)").css("cursor", "pointer");
    //$(".voidBlock").css("cursor", "default");
}

最后，<div>是由shuffle函数创建的，就像这样（pieces是拼图块的随机排列的数组，主要用于告诉每个图块在哪里放置）：

// DRAW
for(var i = 0; i < pieces.length; i++){

    // HTML
    var el = "<div class=\"image piece"+(pieces[i])+"\"><p class=\"helpNum\"></p></div>";
    $(".grid").append(el);

    $(".piece"+(h*v)).addClass("voidBlock");
}

// CSS div positioning
var j = 0;
for(var pY = 0; pY > -600; pY -= finalHeight){
    for(var pX = 0; pX > -800; pX -= finalWidth){
        $(".piece"+pieces[j]).css({left: pX, top: pY});
        j++;
    }
}

最佳答案

由于@BillyNate的回答，我终于解决了它，该回答是将position的<div>属性设置为绝对值，然后通过更改top和left属性来移动它们。

关于javascript - 滑动拼图(网页游戏)-过渡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38140209/