diff --git a/index.css b/index.css index 30ce6fb..cc2f9a9 100644 --- a/index.css +++ b/index.css @@ -1 +1,48 @@ -/* Стили для пятнашек опишите в этом файле */ +.game-board +{ + border: solid 1px; + width: 400px; + height: 400px; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.game-cell +{ + border: solid 1px; + width: 100px; + height: 100px; + text-align: center; + font-size: 24px; + cursor: pointer; + background-color: #000; + color: #fff; + display: inline-block; + box-sizing: border-box; + line-height: 100px; +} + +.game-cell.empty +{ + background: #fff; + color: #fff; +} + +.game-victory +{ + display: none; + position: fixed; + background: rgba(0, 0, 0, .6); + z-index: 100; + width: 100%; + height: 100%; +} + +.game-victory_content +{ + color: #fff; + font-size: 40px; + text-align: center; +} \ No newline at end of file diff --git a/index.html b/index.html index 1cca5fe..bac1e22 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,13 @@ - +
+
+

Game over! You win

+ +
+
+
diff --git a/index.js b/index.js index 8c84dd3..3a710c3 100644 --- a/index.js +++ b/index.js @@ -1 +1,83 @@ -// Логику пятнашек нужно описать в этом файле +var gameBoard; +var gameBoardElement = document.getElementById('game-board'); + +gameBoardElement.addEventListener('click', function (event) { + move(event.target.id); + if (checkWin()) { + document.querySelector('.game-victory').style.display = 'block'; + } +}); + +startNewGame(); + +function startNewGame() { + document.querySelector('.game-victory').style.display = 'none'; + gameBoard = createBoard(); + printBoard(); +} + +function createBoard() { + var gameBoard = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].sort(function () { + return Math.random() - 0.5; + }); + + gameBoard.unshift(0); + + return gameBoard; +} + +function printBoard() { + while (gameBoardElement.firstChild) { + gameBoardElement.removeChild(gameBoardElement.firstChild); + } + for (var i = 0; i < 16; i++) { + var gameCell = document.createElement('div'); + gameCell.id = i; + gameCell.innerHTML = gameBoard[i]; + gameCell.className = gameBoard[i] === 0 ? 'game-cell empty' : 'game-cell'; + gameBoardElement.appendChild(gameCell); + } +} + +function move(id) { + id = parseInt(id); + if (gameBoard[id] === 0) { + return; + } + + if (gameBoard[id + 4] === 0) { + gameBoard[id + 4] = gameBoard[id]; + gameBoard[id] = 0; + printBoard(); + + return; + } + + if (gameBoard[id - 4] === 0) { + gameBoard[id - 4] = gameBoard[id]; + gameBoard[id] = 0; + printBoard(); + + return; + } + + if (gameBoard[id - 1] === 0 && Math.floor(id / 4) === Math.floor((id - 1) / 4)) { + gameBoard[id - 1] = gameBoard[id]; + gameBoard[id] = 0; + printBoard(); + + return; + } + + if (gameBoard[id + 1] === 0 && Math.floor(id / 4) === Math.floor((id + 1) / 4)) { + gameBoard[id + 1] = gameBoard[id]; + gameBoard[id] = 0; + printBoard(); + } +} + +function checkWin() { + return !gameBoard.some(function (item, index) { + return item !== 0 && (item - 1) !== index; + }); +} diff --git a/tests/index-test.js b/tests/index-test.js index b140f66..2bb11a2 100644 --- a/tests/index-test.js +++ b/tests/index-test.js @@ -1,3 +1,61 @@ describe('Tag', function() { - it('should ...'); + after(function() { + gameBoard = createBoard(); + printBoard(); + }); + + it('should initialize a game field', function () { + var gameCells = document.getElementsByClassName('game-cell'); + chai.assert.equal(gameCells.length, 16); + }); + + it('should be an empty cell', function () { + var emptyCells = document.getElementsByClassName('empty'); + chai.assert.equal(emptyCells.length, 1); + }); + + it('should move cell up', function () { + var gameBoardCopy = gameBoard.slice(); + gameBoardCopy[0] = gameBoardCopy[4]; + gameBoardCopy[4] = 0; + var cell = document.getElementById('4'); + cell.click(); + chai.assert.deepEqual(gameBoardCopy, gameBoard); + }); + + it('should move cell down', function () { + var gameBoardCopy = gameBoard.slice(); + gameBoardCopy[4] = gameBoardCopy[0]; + gameBoardCopy[0] = 0; + var cell = document.getElementById('0'); + cell.click(); + chai.assert.deepEqual(gameBoardCopy, gameBoard); + }); + + it('should move cell left', function () { + var gameBoardCopy = gameBoard.slice(); + gameBoardCopy[0] = gameBoardCopy[1]; + gameBoardCopy[1] = 0; + var cell = document.getElementById('1'); + cell.click(); + chai.assert.deepEqual(gameBoardCopy, gameBoard); + }); + + it('should move cell right', function () { + var gameBoardCopy = gameBoard.slice(); + gameBoardCopy[1] = gameBoardCopy[0]; + gameBoardCopy[0] = 0; + var cell = document.getElementById('0'); + cell.click(); + chai.assert.deepEqual(gameBoardCopy, gameBoard); + }); + + it('should take message if player win', function () { + gameBoard = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 0, 15]; + var cell = document.getElementById('15'); + cell.click(); + var modal = document.querySelector('.game-victory'); + chai.assert.equal(modal.style.display, 'block'); + modal.style.display = 'none'; + }); });