urfu-2016 · eoL95 · May 10, 2017 · May 10, 2017 · May 10, 2017 · VasiliiKuznecov
diff --git 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;
+}
diff --git a/index.html b/index.html
@@ -9,7 +9,13 @@
     <link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
 </head>
 <body>
-    <!-- Начальное состояние для игры "Пятнашки" формируем здесь -->
+    <div class="game-victory">
+        <div class="game-victory_content">
+            <h2>Game over! You win</h2>
+            <button onclick="startNewGame()">Новая игра</button>
+        </div>
+    </div>
+    <div id="game-board" class="game-board"></div>
 
     <!-- Тестовый отчет будет формироваться на основании этого элемента -->
     <div id="mocha"></div>

diff --git 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
@@ -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';
+    });
 });