5x5 Puzzle

by reyday

HTML

<body onload="shuffle();">
  <!-- Sliding Puzzle by 101Computing - www.101computing.net/sliding-puzzle/-->
  <center>
    <div id="table" style="display: table">
      <div id="row1" style="display: table-row">
        <div id="cell11" class="tile1" onClick="clickTile(1,1);"></div>
        <div id="cell12" class="tile2" onClick="clickTile(1,2);"></div>
        <div id="cell13" class="tile3" onClick="clickTile(1,3);"></div>
        <div id="cell14" class="tile4" onClick="clickTile(1,4);"></div>
        <div id="cell15" class="tile5" onClick="clickTile(1,5);"></div>
      </div>
      <div id="row2" style="display: table-row">
        <div id="cell21" class="tile6" onClick="clickTile(2,1);"></div>
        <div id="cell22" class="tile7" onClick="clickTile(2,2);"></div>
        <div id="cell23" class="tile8" onClick="clickTile(2,3);"></div>
        <div id="cell24" class="tile9" onClick="clickTile(2,4);"></div>
        <div id="cell25" class="tile10" onClick="clickTile(2,5);"></div>
      </div>
      <div id="row3" style="display: table-row">
        <div id="cell31" class="tile11" onClick="clickTile(3,1);"></div>
        <div id="cell32" class="tile12" onClick="clickTile(3,2);"></div>
        <div id="cell33" class="tile13" onClick="clickTile(3,3);"></div>
        <div id="cell34" class="tile14" onClick="clickTile(3,4);"></div>
        <div id="cell35" class="tile15" onClick="clickTile(3,5);"></div>
      </div>
      <div id="row4" style="display: table-row">
        <div id="cell41" class="tile16" onClick="clickTile(4,1);"></div>
        <div id="cell42" class="tile17" onClick="clickTile(4,2);"></div>
        <div id="cell43" class="tile18" onClick="clickTile(4,3);"></div>
        <div id="cell44" class="tile19" onClick="clickTile(4,4);"></div>
        <div id="cell45" class="tile20" onClick="clickTile(4,5);"></div>
      </div>
      <div id="row5" style="display: table-row">
        <div id="cell51" class="tile21" onClick="clickTile(5,1);"></div>
        <div...

CSS

:root {
  --imgwidth: 920px;
}

body {
  background: #aaaaaa;
}

.tile1,
.tile2,
.tile3,
.tile4,
.tile5,
.tile6,
.tile7,
.tile8,
.tile9,
.tile10,
.tile11,
.tile12,
.tile13,
.tile14,
.tile15,
.tile16,
.tile17,
.tile18,
.tile19,
.tile20,
.tile21,
.tile22,
.tile23,
.tile24,
.tile25 {
  display: table-cell;
  width: calc(var(--imgwidth) / 5);
  height: calc(var(--imgwidth) / 5);
  border: 1px solid white;
  background: url("http://reyday.wikidot.com/local--files/bkhub/bkqr");
  background-size: var(--imgwidth);
  cursor: pointer;
}

.tile1 {
  background-position: 0 0;
}
.tile2 {
  background-position: calc(var(--imgwidth) / -5) 0;
}
.tile3 {
  background-position: calc(var(--imgwidth) * 2 / -5) 0;
}
.tile4 {
  background-position: calc(var(--imgwidth) * 3 / -5) 0;
}
.tile5 {
  background-position: calc(var(--imgwidth) * 4 / -5) 0;
}
.tile6 {
  background-position: 0 calc(var(--imgwidth) / -5);
}
.tile7 {
  background-position: calc(var(--imgwidth) / -5) calc(var(--imgwidth) / -5);
}
.tile8 {
  background-position: calc(var(--imgwidth) * 2 / -5) calc(var(--imgwidth) / -5);
}
.tile9 {
  background-position: calc(var(--imgwidth) * 3 / -5) calc(var(--imgwidth) / -5);
}
.tile10 {
  background-position: calc(var(--imgwidth) * 4 / -5) calc(var(--imgwidth) / -5);
}
.tile11 {
  background-position: 0 calc(var(--imgwidth) * 2 / -5);
}
.tile12 {
  background-position: calc(var(--imgwidth) / -5) calc(var(--imgwidth) * 2 / -5);
}
.tile13 {
  background-position: calc(var(--imgwidth) * 2 / -5)
    calc(var(--imgwidth) * 2 / -5);
}
.tile14 {
  background-position: calc(var(--imgwidth) * 3 / -5)
    calc(var(--imgwidth) * 2 / -5);
}
.tile15 {
  background-position: calc(var(--imgwidth) * 4 / -5)
    calc(var(--imgwidth) * 2 / -5);
}
.tile16 {
  background-position: 0 calc(var(--imgwidth) * 3 / -5);
}
.tile17 {
  background-position: calc(var(--imgwidth) / -5) calc(var(--imgwidth) * 3 / -5);
}
.tile18 {
  background-position: calc(var(--imgwidth) * 2 / -5)
    calc(var(--imgwidth) *...

JavaScript

let canMove = true

function swapTiles(cell1, cell2) {
  if (!canMove) {
    return
  }
  var temp = document.getElementById(cell1).className
  document.getElementById(cell1).className =
    document.getElementById(cell2).className
  document.getElementById(cell2).className = temp
  if (
    document.getElementById("cell11").className == "tile1" &&
    document.getElementById("cell12").className == "tile2" &&
    document.getElementById("cell13").className == "tile3" &&
    document.getElementById("cell14").className == "tile4" &&
    document.getElementById("cell15").className == "tile5" &&
    document.getElementById("cell21").className == "tile6" &&
    document.getElementById("cell22").className == "tile7" &&
    document.getElementById("cell23").className == "tile8" &&
    document.getElementById("cell24").className == "tile9" &&
    document.getElementById("cell25").className == "tile10" &&
    document.getElementById("cell31").className == "tile11" &&
    document.getElementById("cell32").className == "tile12" &&
    document.getElementById("cell33").className == "tile13" &&
    document.getElementById("cell34").className == "tile14" &&
    document.getElementById("cell35").className == "tile15" &&
    document.getElementById("cell41").className == "tile16" &&
    document.getElementById("cell42").className == "tile17" &&
    document.getElementById("cell43").className == "tile18" &&
    document.getElementById("cell44").className == "tile19" &&
    document.getElementById("cell45").className == "tile20" &&
    document.getElementById("cell51").className == "tile21" &&
    document.getElementById("cell52").className == "tile22" &&
    document.getElementById("cell53").className == "tile23" &&
    document.getElementById("cell54").className == "tile24" &&
    document.getElementById("cell55").className == "tile25"
  ) {
    document.getElementById("cell11").setAttribute("name", "done")
    document.getElementById("cell12").setAttribute("name", "done")
   ...