滑动拼图（网页游戏）- 过渡

Question

我正在使用 HTML、CSS 和 JavaScript/jQuery.

制作滑动拼图（类似于 this）

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

代码基于以下逻辑工作：

创建了 12、16 或 48 个 <div>（取决于难度级别）。
A background-image 分配给所有这些，并相应地裁剪以模拟原始图像的 "piece"。
它们都有 class image，还有 piece<number>，其中 <number> 是牌号。最后一个图块（piece12、piece16 或 piece48）也有一个 class 的 voidBlock，它删除了 background-image。这是允许紧挨着它的人移动到它的位置的空瓷砖。所有其他图块都有额外的 class、imgBlock.
单击 voidBlock 旁边的其中一个图块时，它会与 voidBlock 交换 classes。例如，如果我们要单击 piece6，它恰好在 voidBlock 旁边（假设难度设置为简单，因此 voidBlock 为 piece12），这会发生：
1. 原来的voidBlock将其piece12class改为piece6。
2. 原来的voidBlock将其voidBlockclass改为imgBlock。
3. 原来的piece6将其piece6class改为piece12。
4. 原来的piece6改imgBlockclass为voidBlock.
之后调用了一个draw()函数；它根据其 piece 编号设置每个图块的 background-position。

正如您现在可能已经猜到的那样，<div> 中的 none 实际上在移动。他们保持静止，因为 background-image 的 background-position 通过 classes 发生变化。

虽然我确实有一些编程经验（即 Python 和 Java），但总体而言，Web 开发对我来说还是很陌生。我尝试了各种过渡方法，但我能想到的最好的办法是每次移动一个图块时让背景图像移动（这很奇怪而且不直观）。

因此，我的问题是：有什么方法可以让 animation/transition 的方块在每次移动时滑动？

代码

(被注释掉的行与问题无关)

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>s 是由 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++;
    }
}

Answer 1

感谢@BillyNate 的回答，我终于解决了这个问题，即将 <div> 的 position 属性设置为绝对值，然后通过更改 top 和 left 属性。

滑动拼图（网页游戏）- 过渡

Sliding puzzle (web game) - transitions

html

javascript

css

jquery

transitions

代码