From 9844199e70dd442f2e06dc460f30bf3794667fe7 Mon Sep 17 00:00:00 2001 From: eoL95 Date: Wed, 10 May 2017 15:55:12 +0500 Subject: [PATCH 1/3] =?UTF-8?q?=D0=A0=D0=B5=D0=B0=D0=BB=D0=B8=D0=B7=D0=BE?= =?UTF-8?q?=D0=B2=D0=B0=D0=BB=20=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D0=BE?= =?UTF-8?q?=D0=BD=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE=D1=81=D1=82=D1=8C=20=D0=BF?= =?UTF-8?q?=D1=8F=D1=82=D0=BD=D0=B0=D1=88=D0=B5=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.css | 27 +++++++++++++++++- index.html | 2 +- index.js | 81 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 107 insertions(+), 3 deletions(-) diff --git a/index.css b/index.css index 30ce6fb..42bf1df 100644 --- a/index.css +++ b/index.css @@ -1 +1,26 @@ -/* Стили для пятнашек опишите в этом файле */ +.game-board +{ + border-collapse: collapse; + border: solid 1px; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.game-cell +{ + border: solid 1px; + width: 66px; + height: 66px; + text-align: center; + font-size: 24px; + cursor: pointer; + background-color: #000; + color: #fff +} + +.game-cell.empty +{ + background: #fff; +} diff --git a/index.html b/index.html index 1cca5fe..7311eb6 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - +
diff --git a/index.js b/index.js index 8c84dd3..5261bc2 100644 --- a/index.js +++ b/index.js @@ -1 +1,80 @@ -// Логику пятнашек нужно описать в этом файле +var gameBoard = createBoard(); +var gameBoardElement = document.getElementById('game-board'); +printBoard(); +gameBoardElement.addEventListener('click', function (event) { + move(event.target.id); + if (checkWin()) { + alert('Победа'); + } +}); + + +function createBoard() { + var barleyBreak = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].sort(function () { + return Math.random() - 0.5; + }); + + barleyBreak.unshift(0); + + return barleyBreak; +} + +function printBoard() { + while (gameBoardElement.firstChild) { + gameBoardElement.removeChild(gameBoardElement.firstChild); + } + for (var i = 0; i < 4; i++) { + gameBoardElement.appendChild(document.createElement('tr')); + for (var j = 0; j < 4; j++) { + var gameBoardLine = document.querySelector('#game-board tr:last-of-type'); + var gameElement = document.createElement('td'); + gameElement.id = (i * 4 + j).toString(); + gameElement.innerHTML = gameBoard[i * 4 + j] === 0 ? '' : gameBoard[i * 4 + j]; + gameElement.className = gameBoard[i * 4 + j] === 0 ? 'game-cell empty' : 'game-cell'; + gameBoardLine.appendChild(gameElement); + } + } +} + +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; + }); +} From 9afae281416a33c06b06c709fa2cb46e52b10f11 Mon Sep 17 00:00:00 2001 From: eoL95 Date: Wed, 10 May 2017 16:53:42 +0500 Subject: [PATCH 2/3] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?= =?UTF-8?q?=20=D1=82=D0=B5=D1=81=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.css | 17 +++++++++++++ index.html | 5 ++++ index.js | 8 +++--- tests/index-test.js | 60 ++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 85 insertions(+), 5 deletions(-) diff --git a/index.css b/index.css index 42bf1df..282883c 100644 --- a/index.css +++ b/index.css @@ -24,3 +24,20 @@ { background: #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 7311eb6..d51aa5f 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,11 @@ +
+
+ Game over! You win +
+
diff --git a/index.js b/index.js index 5261bc2..d2820d8 100644 --- a/index.js +++ b/index.js @@ -4,19 +4,19 @@ printBoard(); gameBoardElement.addEventListener('click', function (event) { move(event.target.id); if (checkWin()) { - alert('Победа'); + document.querySelector('.game-victory').style.display = 'block'; } }); function createBoard() { - var barleyBreak = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].sort(function () { + var gameBoard = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].sort(function () { return Math.random() - 0.5; }); - barleyBreak.unshift(0); + gameBoard.unshift(0); - return barleyBreak; + return gameBoard; } function printBoard() { 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'; + }); }); From ba709de15e9fe7b4423308584ff6fc4037087ec3 Mon Sep 17 00:00:00 2001 From: eoL95 Date: Wed, 10 May 2017 17:38:41 +0500 Subject: [PATCH 3/3] =?UTF-8?q?=D0=A3=D0=BF=D1=80=D0=BE=D1=89=D0=B5=D0=BD?= =?UTF-8?q?=D0=B8=D0=B5=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BA=D0=B8=20=D0=BE?= =?UTF-8?q?=D1=82=D1=80=D0=B8=D1=81=D0=BE=D0=B2=D0=BA=D0=B8=20=D0=B4=D0=BE?= =?UTF-8?q?=D1=81=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.css | 13 +++++++++---- index.html | 5 +++-- index.js | 27 +++++++++++++++------------ 3 files changed, 27 insertions(+), 18 deletions(-) diff --git a/index.css b/index.css index 282883c..cc2f9a9 100644 --- a/index.css +++ b/index.css @@ -1,7 +1,8 @@ .game-board { - border-collapse: collapse; border: solid 1px; + width: 400px; + height: 400px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; @@ -11,18 +12,22 @@ .game-cell { border: solid 1px; - width: 66px; - height: 66px; + width: 100px; + height: 100px; text-align: center; font-size: 24px; cursor: pointer; background-color: #000; - color: #fff + color: #fff; + display: inline-block; + box-sizing: border-box; + line-height: 100px; } .game-cell.empty { background: #fff; + color: #fff; } .game-victory diff --git a/index.html b/index.html index d51aa5f..bac1e22 100644 --- a/index.html +++ b/index.html @@ -11,10 +11,11 @@
- Game over! You win +

Game over! You win

+
-
+
diff --git a/index.js b/index.js index d2820d8..3a710c3 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,6 @@ -var gameBoard = createBoard(); +var gameBoard; var gameBoardElement = document.getElementById('game-board'); -printBoard(); + gameBoardElement.addEventListener('click', function (event) { move(event.target.id); if (checkWin()) { @@ -8,6 +8,13 @@ gameBoardElement.addEventListener('click', function (event) { } }); +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 () { @@ -23,16 +30,12 @@ function printBoard() { while (gameBoardElement.firstChild) { gameBoardElement.removeChild(gameBoardElement.firstChild); } - for (var i = 0; i < 4; i++) { - gameBoardElement.appendChild(document.createElement('tr')); - for (var j = 0; j < 4; j++) { - var gameBoardLine = document.querySelector('#game-board tr:last-of-type'); - var gameElement = document.createElement('td'); - gameElement.id = (i * 4 + j).toString(); - gameElement.innerHTML = gameBoard[i * 4 + j] === 0 ? '' : gameBoard[i * 4 + j]; - gameElement.className = gameBoard[i * 4 + j] === 0 ? 'game-cell empty' : 'game-cell'; - gameBoardLine.appendChild(gameElement); - } + 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); } }