4x4

by LuckyCat

HTML

<!-- http://works.step-to-webprogramming.info/JavaScript/Lesson3/button.html -->
<form name="myForm">

  <input type="button" value="1" onclick="game(0)">
  <!--0-->
  <input type="button" value="2" onclick="game(1)">
  <!--1-->
  <input type="button" value="3" onclick="game(2)">
  <!--2-->
  <input type="button" value="4" onclick="game(3)">
  <!--3-->
  <br>
  <input type="button" value="5" onclick="game(4)">
  <!--4-->
  <input type="button" value="6" onclick="game(5)">
  <!--5-->
  <input type="button" value="7" onclick="game(6)">
  <!--6-->
  <input type="button" value="8" onclick="game(7)">
  <!--7-->
  <br>
  <input type="button" value="9" onclick="game(8)">
  <!--8-->
  <input type="button" value="10" onclick="game(9)">
  <!--9-->
  <input type="button" value="11" onclick="game(10)">
  <!--10-->
  <input type="button" value="12" onclick="game(11)">
  <!--11-->
  <br>
  <input type="button" value="13" onclick="game(12)">
  <!--12-->
  <input type="button" value="14" onclick="game(13)">
  <!--13-->
  <input type="button" value="15" onclick="game(14)">
  <!--14-->
  <input type="button" value=" " onclick="game(15)">
  <!--15-->
</form>

<script>
  function myChange(n, m) {
    //меняются местами значения на кнопках n и m
		   var f = document.myForm.elements;
		   // alert("f[n].value: " + f[n].value + "; f[m].value: " + f[m].value);
       // f[m].value === "" <-- всегда
		   var f0 = f[n].value; // старое значение (значение, по которому мы кликнули)
		   f[n].value = f[m].value; // старое значение меняется на соседское
		   f[m].value = f0; // сосед принимает значение 

  }
  ///////////////////////////////////////////////////////////////

  function game(n) {

		// f - грубо говоря массив всех кнопок.
    var f = document.myForm.elements;
    
    if (!(n % 4 == 3) && !(f[n + 1].value != ' ')) {
      myChange(n, n + 1);
      // alert('перемещение вправо');
    }

    if (!(n % 4 == 0) && !(f[n - 1].value != ' ')) {
      myChange(n, n - 1);
      //...

CSS

article {
  width: 950px;
  margin: 0 auto;
}

header {
  margin: 0 auto;
  background: url(header.jpg) no-repeat top left;
  background-color: white;
}

form {
  width: 500px;
  margin: 0 20px;
}

input {
  width: 100px;
  height: 100px;
  margin: 3px;
  background: url(button.jpg) no-repeat top center;
  font: 34px/26px comic sans ms;
  color: #6c2700;
}

footer {
  padding: 20px;
  font-size: 12px;
  text-align: right;
}

JavaScript

// https://jsfiddle.net/LuckyCat/2gtchyc3/4/
function myChange(n, m) {
  //меняются местами значения на кнопках n и m
  var f = document.myForm.elements;
  //alert(f[0].value);
  var f0 = f[n].value;
  f[n].value = f[m].value;
  f[m].value = f0;

  // n - как left: n * width + padding
  // m - как top: m * width + padding
}
///////////////////////////////////////////////////////////////

function game(n) {
  var f = document.myForm.elements;
  if (n % 4 == 3);
  else if (f[n + 1].value != ' ');
  else myChange(n, n + 1);
  if (n % 4 == 0);
  else if (f[n - 1].value != ' ');
  else myChange(n, n - 1);
  if (n > 11);
  else if (f[n + 4].value != ' ');
  else myChange(n, n + 4);
  if (n < 4);
  else if (f[n - 4].value != ' ');
  else myChange(n, n - 4);
}