JSFiddle - React, Tailwind, and code Playground

by Patrick Hund

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Fifteen Puzzle</title>

    <!-- instructor-provided JavaScript files; do not modify -->
    <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>


    <!-- your files that you will write -->
    <link href="fifteen.css" type="text/css" rel="stylesheet">
    <script src="fifteen.js" type="text/javascript"></script>
  </head>

  <body>
    <h1>Fifteen Puzzle</h1>

    <p>
      The goal of the fifteen puzzle is to un-jumble its fifteen squares by repeatedly making moves that slide squares into the empty space. How quickly can you solve it?
    </p>

    <div id="puzzlearea">
      <!-- the following are the actual fifteen puzzle pieces -->
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
      <div>13</div>
      <div>14</div>
      <div>15</div>
    </div>

    <p id="controls">
      <button id="shufflebutton">Shuffle</button>
    </p>

    <p>
      American puzzle author and mathematician Sam Loyd is often falsely credited with creating the puzzle; indeed, Loyd claimed from 1891 until his death in 1911 that he invented it. The puzzle was actually created around 1874 by Noyes Palmer Chapman, a postmaster
      in Canastota, New York.
    </p>

    <div id="w3c">
      <a href="http://validator.w3.org/check/referer">
				<img src="http://www.cs.washington.edu/education/courses/cse190m/12sp/homework/4/w3c-html.png" alt="Valid HTML" >
			</a>
      <a href="http://jigsaw.w3.org/css-validator/check/referer">
				<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS" >
			</a>
      <a href="https://webster.cs.washington.edu/jslint/?referer">
				<img src="https://webster.cs.washington.edu/w3c-js.png" alt="Valid JS" /></a>
    </div>
  </body>

</html>

CSS

body {
  font-size: 14pt;
  text-align: center;
  font-weight: bold;
}

#puzzlearea {
  position: relative;
  width: 400px;
  height: 400px;
  text-align: left;
  margin: auto;
  border: 3px solid gray;
  box-shadow: 0px 5px 8px black;
}

#puzzlearea>div {
  height: 90px;
  width: 90px;
  border: 5px solid black;
  display: inline-block;
  float: left;
  font-size: 40pt;
  text-align: center;
  line-height: 100px;
  background-image: url(background.jpg);
  position: absolute;
}

#puzzlearea>.move:hover {
  border-color: red;
  color: red;
}

JavaScript

//window.onload = inizializzaTavola;

var rigaLib = 3;
var colLib = 3;
inizializzaTavola();

function inizializzaTavola() {
console.log('inizializza');
  var div = document.getElementById('puzzlearea');
  var cells = div.getElementsByTagName('div');
  for (var i = 0; i < cells.length; i++) {
    cells[i].style.top = 100 * (Math.floor(i / 4)) + "px";
    cells[i].style.left = 100 * (i % 4) + "px";
    cells[i].style.backgroundPosition = "-" + 100 * (i % 4) + "px -" + 100 * (Math.floor(i / 4)) + "px";
  }
  evidenzia();
  abilitaClick();
  document.getElementById("shufflebutton").observe("click", shuffle);
}

function evidenzia() {
  console.log('evidenzia');
  var div = document.getElementById('puzzlearea');
  var cells = div.getElementsByTagName('div');
  for (var i = 0; i < cells.length; i++) {
    if (spostabile(cells[i])) {
      cells[i].className = "move";
    } else {
      cells[i].className = "";
    }
  }
}

function spostabile(el) {
  var top = (el.offsetTop) / 100;
  var left = (el.offsetLeft) / 100;
  if ((top == colLib && (left == rigaLib + 1 || left == rigaLib - 1)) ||
    (left == rigaLib && (top == colLib + 1 || top == colLib - 1))) {
    return true;
  }
  return false;
}

function abilitaClick() {
  var cells = document.getElementById("puzzlearea").getElementsByTagName("div");
  for (var i = 0; i < cells.length; i++) {
    cells[i].onclick = move;
  }
}

function move(el) {
  if (spostabile(el)) {
    var top = (el.offsetTop) / 100;
    var left = (el.offsetLeft) / 100;
    el.style.top = 100 * (colLib) + "px";
    el.style.left = 100 * (rigaLib) + "px";
    colLib = top;
    rigaLib = left;
    evidenzia();
  }
}

function shuffle() {
  var s = document.getElementById("puzzlearea").getElementsByTagName("div");
  for (var j = 0; j < 30; j++) {
    var a = [];
    for (var i = 0; i < s.length; i++) {
      if (spostabile(s[i]))
        a.push(s[i]);
    }
    var t = parseInt((Math.random() * a.length));
    move(a[t]);
  }
}