diff --git a/index.css b/index.css index 30ce6fb..ef0c94e 100644 --- a/index.css +++ b/index.css @@ -1 +1,35 @@ /* Стили для пятнашек опишите в этом файле */ +body, html { + height: 100%; +} + +#playground { + padding: 12px 64px; +} + +#win { + margin: 0; + font-size: 50px; + display: inline-block; + text-align: center; + width: 100%; + color: #0B614B; + visibility: hidden; +} + +.button { + background-color: #81F7BE; + color: black; + text-align: center; + display: inline-block; + margin: 2px 2px; + height: 60px; + width: 60px; + font-size: 20px; + cursor: pointer; + +} + +.button:hover { + background-color: #0B614B; +} \ No newline at end of file diff --git a/index.html b/index.html index 1cca5fe..4ab23e1 100644 --- a/index.html +++ b/index.html @@ -9,21 +9,22 @@ - + +
+

Уииииииии^^

+ +
- -
+ + + - - - + + - - - - - - - + + + + diff --git a/index.js b/index.js index 8c84dd3..2e3ea31 100644 --- a/index.js +++ b/index.js @@ -1 +1,135 @@ // Логику пятнашек нужно описать в этом файле +var n = 4; +function getEmptyCellId(cellId, cells) { + cellId = parseInt(cellId); + if (cellId - 1 >= 0 && cellId % n !== 0) { + if (parseInt(cells[cellId - 1].value) === -1){ + return cellId - 1; + } + } + if (cellId + 1 < 16 && cellId % n !== n-1) { + if (parseInt(cells[cellId + 1].value) === -1){ + return cellId + 1; + } + } + if (cellId - n >= 0) { + if (parseInt(cells[cellId - n].value) === -1){ + return cellId - n; + } + } + if (cellId + n < 16) { + + if (parseInt(cells[cellId + n].value) === -1) { + return cellId + n; + } + } + return -1 +} + +function isWin(cells) { + for (var i = 0; i < cells.length - 1; i++) { + if (parseInt(cells[i].value) !== i + 1) { + return false; + } + } + return true; +} + +function swapCells(nextCell, targetCell) { + nextCell.style.visibility = 'visible'; + nextCell.value = targetCell.value; + targetCell.style.visibility = 'hidden'; + targetCell.value = -1; +} + +function swap(event) { + var e = event || window.event; + + var targetCell = e.target || e.srcElement; + if (targetCell.tagName !== 'INPUT') { + return; + } + var playGround = document.getElementById('playground'); + var cells = playGround.getElementsByClassName('button'); + var winMessage = document.getElementById('win'); + var nextCellId = getEmptyCellId(targetCell.id, cells); + if (nextCellId !== -1) { + swapCells(cells[nextCellId], targetCell); + } + if (isWin(cells)) { + winMessage.style.visibility = 'visible'; + } else { + winMessage.style.visibility = 'hidden'; + } +} + + +function randomSelector() { + return Math.random() - 0.5; +} + +function startGame(board) { + var playGround = document.getElementById('playground'); + var winMessage = document.getElementById('win'); + winMessage.style.visibility = 'hidden'; + + var buttons = []; + for (var i = 0; i < n; i++){ + buttons[i] = []; + for (var j = 0; j < n; j++) + { + buttons[i][j] = null; + } + } + + if (board === undefined){ + board = []; + var number = []; + for (i = 1; i< n*n; i++){ + number.push(i) + } + number.sort(randomSelector); + number.unshift(-1); + var count = 0; + for (i = 0; i < n; i++) { + board[i] = []; + for(j = 0; j < n; j++) + { + board[i][j] = number[count]; + count++ + } + } + } + + + for (i = 0; i < n; i++) { + for (j = 0; j