Как проверить, решена ли головоломка с сеткой?

Я работаю над играми-головоломкой для класса, который представляет собой сетку изображений размером 4 × 5, которую вам нужно будет правильно изменить.

Я хочу, чтобы он знал, когда головоломка будет решена, где она будет делать какие-то предупреждения, когда вы выиграете, затем исчезнет или что-то в этом роде.

Я все еще новичок в Javascript и не знаю, с чего начать.
Я уже рассматривал этот вопрос, но не уверен, связано ли это с этим или с чего начать.

Мой 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);
    }
});