problem in the detection of the end of the game in sliding puzzle and story of movementss

I want to clarify that I have a doubt about a puzzle that I am doing, the fact is that I want to make a function to detect the end of the game but I have no idea how to do it. I would also like it to count every time I move a puzzle, to put it in a

, for example, but I have no idea how to do all this. Please help

    <center>
    <button onClick="shuffle();">New Game</button><br><br>
    <div class="dropdown">
     <button onclick="myFunction()" class="dropbtn">Seleccionar 
      dificultat</button>
       <div id="myDropdown" class="dropdown-content">
         <a href="3x3.html">Fácil</a>
         <a href="4x4.html">Normal</a>
         <a href="5x5.html">Difícil</a>
       </div>
     </div><br><br>
    <div id="table" style="display: table;">
    <div id="row1" style="display: table-row;">
       <div id="cell11" class="tile1" onClick="clickTile(1,1);">1</div>
       <div id="cell12" class="tile2" onClick="clickTile(1,2);">2</div>
       <div id="cell13" class="tile3" onClick="clickTile(1,3);">3</div>
    </div>
    <div id="row2" style="display: table-row;">
       <div id="cell21" class="tile4" onClick="clickTile(2,1);">4</div>
       <div id="cell22" class="tile5" onClick="clickTile(2,2);">5</div>
       <div id="cell23" class="tile6" onClick="clickTile(2,3);">6</div>
    </div>
    <div id="row3" style="display: table-row;">
       <div id="cell31" class="tile7" onClick="clickTile(3,1);">7</div>
       <div id="cell32" class="tile8" onClick="clickTile(3,2);">8</div>
       <div id="cell33" class="tile9" onClick="clickTile(3,3);">9</div>
    </div>
    </div>
    </center>


    function swapTiles(cell1, cell2) {
    var elem1 = document.getElementById(cell1),
    elem2 = document.getElementById(cell2);

    var tempClass = elem1.className;
    var tempText = elem1.textContent;

    elem1.className = elem2.className;
    elem1.textContent = elem2.textContent;

    elem2.className = tempClass;
    elem2.textContent = tempText;
    }


    function shuffle() {
    //Use nested loops to access each cell of the 3x3 grid
    for (var row=1;row<=3;row++) { //For each row of the 3x3 grid
    for (var column=1;column<=3;column++) { //For each column in this row

    var row2=Math.floor(Math.random()*3 + 1); //Pick a random row from 1 to 3
    var column2=Math.floor(Math.random()*3 + 1); //Pick a random column from 1 to 3

    swapTiles("cell"+row+column,"cell"+row2+column2); //Swap the look & feel of both 
    cells
    } 
    } 
    }


    function clickTile(row,column) {
    var cell = document.getElementById("cell"+row+column);
    var tile = cell.className;
    if (tile!="tile9") { 
      //Checking if white tile on the right
    if (column<3) {
     if ( document.getElementById("cell"+row+(column+1)).className=="tile9") {
     swapTiles("cell"+row+column,"cell"+row+(column+1));
     return;
   }
   }
   //Checking if white tile on the left
   if (column>1) {
     if ( document.getElementById("cell"+row+(column-1)).className=="tile9") {
      swapTiles("cell"+row+column,"cell"+row+(column-1));
      return;
    }
   }
   //Checking if white tile is above
   if (row>1) {
   if ( document.getElementById("cell"+(row-1)+column).className=="tile9") {
     swapTiles("cell"+row+column,"cell"+(row-1)+column);
     return;
   }
   }
   //Checking if white tile is below
   if (row<3) {
    if ( document.getElementById("cell"+(row+1)+column).className=="tile9") {
      swapTiles("cell"+row+column,"cell"+(row+1)+column);
      return;
   }
   } 
   }

}


   CSS

   BODY { 
   background: #6ca0e4c4;
   }

   .tile1, .tile2, .tile3, .tile4, .tile5, .tile6, .tile7, 
   .tile8, .tile9 {
   display: table-cell;
   width: 240px;
   height: 240px;
   border: 1px solid white;
   background: url("attacusAtlas.png"); 
   cursor: pointer;
   }

   .tile1 {background-position: left top;}
   .tile2 {background-position: center top;}
   .tile3 {background-position: right top;}
   .tile4 {background-position: left center;}
   .tile5 {background-position: center center;}
   .tile6 {background-position: right center;}
   .tile7 {background-position: left bottom;}
   .tile8 {background-position: center bottom;}
   .tile9 {background: white; cursor: default;}