Мозайка JavaScript

"use strict"; 
 
// массив элементов IMG. Используется для получения координат картинок 
var imgs = [] 
imgs.push(document.getElementById("r1")); 
imgs.push(document.getElementById("r2")); 
imgs.push(document.getElementById("r3")); 
imgs.push(document.getElementById("r4")); 
 
// массив, хранящий координаты взаимного расположения элементов мозаики  
var expectedPositions = [ 
  [0, 0], 
  [0, 160], 
  [90, 0], 
  [90, 160] 
]; 
 
// "соседние" элементы для каждого элемента мозаики 
var neighbors = { 
  0: [1, 2], 
  1: [0, 3], 
  2: [0, 3], 
  3: [1, 2] 
} 
 
// событие, возникающее при клике мышью. Начало перемещения изображения 
document.onmousedown = function(e) { 
  if (!e.target.classList.contains('draggable')) { 
    return false; 
  } 
  // в начале перемещения сохраняем координаты курсора отностительно перемещаемой картинки и саму картинку (внутри события event) 
  var event = e; 
  var offsetX = e.offsetX; 
  var offsetY = e.offsetY; 
 
  // функция, перемещающая картинку при событии перемещения (onmousemove) 
  function moveAt(e) { 
    event.target.style.left = e.pageX - offsetX + 'px'; 
    event.target.style.top = e.pageY - offsetY + 'px'; 
  } 
 
  // функция, определяющая, как делеко находится перемещаемая картинка от другой картинки 
  // используется при проверке на собранность мозаики и для "прилипания" картинок друг к другу 
  function getCoordDifferenceFromExpected(imgIdx1, imgIdx2) { 
    var img1 = {} 
    var img2 = {} 
    var realDiff = {} 
    var expectedDiff = {} 
 
    img1.X = parseInt(imgs[imgIdx1].style.left); 
    img1.Y = parseInt(imgs[imgIdx1].style.top); 
 
    img2.X = parseInt(imgs[imgIdx2].style.left); 
    img2.Y = parseInt(imgs[imgIdx2].style.top); 
 
    realDiff.X = img1.X - img2.X; 
    realDiff.Y = img1.Y - img2.Y; 
 
    expectedDiff.X = expectedPositions[imgIdx1][0] - expectedPositions[imgIdx2][0] 
    expectedDiff.Y = expectedPositions[imgIdx1][1] - expectedPositions[imgIdx2][1] 
 
    var result = { 
      "diff": Math.abs((expectedDiff.X - realDiff.X)) + Math.abs((expectedDiff.Y - realDiff.Y)), 
      "expectedDiff": expectedDiff, 
      "img1": img1, 
      "img2": img2 
    } 
 
    return result; 
  } 
 
  // перемещает картинку по заданным координатам  
  function moveAtCoordinates(x, y) { 
    event.target.style.left = x + 'px'; 
    event.target.style.top = y + 'px'; 
  } 
 
  // функция, реализующая "прилипание" картинок в случае, когда картинка перемещена достаточно близко к нужному положению 
  // для этого сравниваются позиция перемещаемой картинки и позиции двух "соседних" картинок 
  // вызывается при отпускании кнопки мыши после перетаскивания 
  function correctPosition() { 
    var id = event.target.id; 
    var alpha = 25; 
    var imgIndex = parseInt(id.replace("r", "")) - 1; 
    var posDiff; 
 
    for (var i = 0; i < neighbors[imgIndex].length; i++) { 
      posDiff = getCoordDifferenceFromExpected(imgIndex, neighbors[imgIndex][i]) 
      if (Math.abs(posDiff.diff) < alpha) { 
        moveAtCoordinates(posDiff.img2.X + posDiff.expectedDiff.X, posDiff.img2.Y + posDiff.expectedDiff.Y); 
        break; 
      } 
    } 
  } 
 
  // функция, проверяющая мозаику на собранность 
  // вызывается при отпускании кнопки мыши после перетаскивания 
  function checkMosaic() { 
    var posDiff; 
    var mosaicAssembled = true; 
 
 
    for (var i = 0; i < neighbors[0].length; i++) { 
      posDiff = getCoordDifferenceFromExpected(0, neighbors[0][i]) 
      if (Math.abs(posDiff.diff) != 0) { 
        mosaicAssembled = false; 
        break; 
      } 
    } 
    for (var i = 0; i < neighbors[3].length; i++) { 
      posDiff = getCoordDifferenceFromExpected(3, neighbors[3][i]) 
      if (Math.abs(posDiff.diff) != 0) { 
        mosaicAssembled = false; 
        break; 
      } 
    } 
 
    if (mosaicAssembled) { 
      setTimeout(alert, 300, "Вы собрали мозаику!"); 
    } 
  } 
 
  // помещение перемещаемой картинки "наверх", чтобы она не перекрывалась другими картинками; начало движения 
  e.target.style.zIndex = 1000; 
  moveAt(e); 
 
  // события перемещения 
  document.onmousemove = function(e) { 
    moveAt(e); 
  } 
 
  // событие отпускания клавиши мыши (завершение перетаскивания картинки) 
  document.onmouseup = function(e) { 
    document.onmousemove = null; 
    correctPosition(); 
    checkMosaic(); 
    document.onmouseup = null; 
  } 
} 
 
// замена стандатной функции браузера при перетаскивании картинки 
document.ondragstart = function() { 
  return false; 
};

body { 
  background-color: #CCE6FF; 
}

<h1 style="text-align: center">Собери мозаику!</h1> 
<p>Перемещая картики мышкой нужно собрать рисунок</p> 
<img src="images/r1.gif" id="r1" class="draggable" style="position: absolute; top: 120px; left: 25px;"> 
<img src="images/r2.gif" id="r2" class="draggable" style="position: absolute; top: 120px; left: 130px;"> 
<img src="images/r4.gif" id="r4" class="draggable" style="position: absolute; top: 300px; left: 25px;"> 
<img src="images/r3.gif" id="r3" class="draggable" style="position: absolute; top: 300px; left: 130px;">