Question

我正在为一个类的益智游戏工作，这是一个4x5网格的图像，你必须正确地重新排列。

我希望它知道拼图什么时候解决，当你赢了然后淡出或者什么的时候它会做某种警报。

我还是Javascript的初学者，并不确定从哪里开始我之前看过this question，但我不确定它是否与此相关或从哪里开始。

我的HTML：

<div class="packery draggable">
    <div class="item w4 h4"><img src="pimg/bits/pf/4.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/8.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/1.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/9.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/3.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/17.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/12.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/16.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/10.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/2.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/14.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/5.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/20.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/7.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/15.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/18.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/13.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/19.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/11.png"></div>
    <div class="item w4 h4"><img src="pimg/bits/pf/6.png"></div>
</div>

我的剧本：

docReady(function () {
    var container = document.querySelector('.packery');
    var pckry = new Packery(container, {
        columnWidth: 67,
        rowHeight: 67,
    });

    var itemElems = pckry.getItemElements();

    // for each item element
    for (var i = 0, len = itemElems.length; i < len; i++) {
        var elem = itemElems[i];
        // make element draggable with Draggabilly
        var draggie = new Draggabilly(elem);
        // bind Draggabilly events to Packery
        pckry.bindDraggabillyEvents(draggie);
    }
});

Answer 1

您正在使用的库似乎只是更改了拖动元素的left和top CSS属性，因此您必须使用它们来确定任何内容。检查它是否已解决的一种非常简单的方法是将正确的left和top偏移硬编码到每个图块，例如使用数据属性：

<div class="item w4 h4" data-left="-20" data-top="0"><img src="pimg/bits/pf/1.png"></div>

（假设磁贴是10x10）然后循环遍历每个元素（就像你做的那样使它们可拖动）并检查它中的数字是否为left CSS属性（可通过.style.left访问）与其data-left属性（可通过.dataset.left访问）相同，与top类似。将拖动捕捉到网格将极大地帮助您，您的库允许：new Draggabilly(elem, {grid: [10, 10]});

如何检查网格拼图是否已解决？

1 个答案: