urfu-2016 · ValeriaTsvetkova · May 10, 2017 · May 10, 2017 · May 10, 2017 · May 10, 2017
diff --git a/index.css b/index.css
@@ -1 +1,22 @@
 /* Стили для пятнашек опишите в этом файле */
+#winner-note {
+    visibility: hidden;
+    font: 30px sans-serif;
+    text-align: center;
+}
+
+.cell {
+    width: 100px;
+    height: 100px;
+    background-color: #c1c1c1;
+    margin: 1px;
+}
+
+.cell:hover {
+    background-color: #9db6f2;
+    cursor: pointer;
+}
+
+#game-field {
+    padding: 10px;
+}
diff --git a/index.html b/index.html
@@ -10,7 +10,8 @@
 </head>
 <body>
     <!-- Начальное состояние для игры "Пятнашки" формируем здесь -->
-
+    <p id="winner-note">You won!</p>
+    <div id="game-field"></div>
     <!-- Тестовый отчет будет формироваться на основании этого элемента -->
     <div id="mocha"></div>
 
@@ -20,7 +21,6 @@
 
     <!-- Подключаем реализацию пятнашек -->
     <script src="./index.js"></script>
-
     <!-- Конфигурируем и запускаем тесты -->
     <script>mocha.setup('bdd')</script>
     <script src="./tests/index-test.js"></script>

diff --git a/index.js b/index.js
@@ -1 +1,75 @@
 // Логику пятнашек нужно описать в этом файле
+var cells;
+
+function initGameField() {
+    getShuffledField();
+    var field = document.getElementById('game-field');
+    for (var i = 0; i < 16; i++) {
+        var element = document.createElement('input');
+        element.setAttribute('class', 'cell');
+        element.setAttribute('type', 'button');
+        element.setAttribute('value', cells[i]);
+        element.addEventListener('click', onClick);
+        field.appendChild(element);
+        if (cells[i] === -1)
+            element.style.visibility = 'hidden';
+        if ((i + 1) % 4 === 0) {
+            field.appendChild(document.createElement('br'));
+        }
+    }
+}
+
+function isEnd(array) {
+    for (var i = 0; i < array.length - 1; i++) {
+        if (parseInt(array[i].value) !== i + 1)
+            return false;
+    }
+    return true;
+}
+
+function swapCells(current, target) {
+    target.style.visibility = 'visible';
+    target.value = current.value;
+    current.value = -1;
+    current.style.visibility = 'hidden';
+
+}
+
+function getShuffledField() {
+    cells = shuffleArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
+    cells.unshift(-1);
+}
+
+function shuffleArray(cells) {
+    for (var i = cells.length - 1; i > 0; i--) {
+        var j = Math.floor(Math.random() * (i + 1));
+        var temp = cells[i];
+        cells[i] = cells[j];
+        cells[j] = temp;
+    }
+    return cells;
+}
+
+function onClick(event) {
+    var field = document.getElementById('game-field');
+    var htmlCells = field.getElementsByClassName('cell');
+    var array = Array.prototype.slice.call(htmlCells, 0);
+    var currentID = array.indexOf(event.target);
+    if (currentID - 1 >= 0 && currentID % 4 !== 0 && array[currentID - 1].value === '-1')
+        swapCells(array[currentID], array[currentID - 1]);
+    else if (currentID + 1 <= 15 && currentID + 1 !== 0 && array[currentID + 1].value === '-1')
+        swapCells(array[currentID], array[currentID + 1]);
+    else if (currentID - 4 >= 0 && array[currentID - 4].value === '-1')
+        swapCells(array[currentID], array[currentID - 4]);
+    else if (currentID + 4 <= 15 && array[currentID + 4].value === '-1')
+        swapCells(array[currentID], array[currentID + 4]);
+    if (isEnd(array)) {
+        var note = document.getElementById('winner-note');
+        note.style.visibility = 'visible';
+        array.forEach(function (element) {
+            element.disabled = true;
+        })
+    }
+}
+
+initGameField();