diff --git a/index.js b/index.js index 7553909..832ecb1 100644 --- a/index.js +++ b/index.js @@ -1,14 +1,22 @@ const CROSS = 'X'; const ZERO = 'O'; const EMPTY = ' '; - const container = document.getElementById('fieldWrapper'); +let field; +let dimension; +let movesLeft; +let isGameOver; + startGame(); addResetListener(); function startGame () { - renderGrid(3); + dimension = prompt("Укажите размер поля"); + movesLeft = dimension**2; + field = []; + isGameOver = false; + renderGrid(dimension); } function renderGrid (dimension) { @@ -16,9 +24,11 @@ function renderGrid (dimension) { for (let i = 0; i < dimension; i++) { const row = document.createElement('tr'); + field.push([]); for (let j = 0; j < dimension; j++) { const cell = document.createElement('td'); cell.textContent = EMPTY; + field[i][j] = EMPTY; cell.addEventListener('click', () => cellClickHandler(i, j)); row.appendChild(cell); } @@ -27,13 +37,115 @@ function renderGrid (dimension) { } function cellClickHandler (row, col) { - // Пиши код тут + if (isGameOver){ + return; + } + if (findCell(row, col).textContent === EMPTY){ + if (movesLeft % 2 == 0){ + makeMove(CROSS, row, col); + } + else{ + makeMove(ZERO, row, col); + } + } console.log(`Clicked on cell: ${row}, ${col}`); +} + +function makeMove(symbol, row, col){ + renderSymbolInCell(symbol, row, col); + field[row][col] = symbol; + movesLeft--; + if (checkWinner(symbol, row, col)){ + switch (symbol){ + case CROSS: + alert('Победили крестики!'); + break; + case ZERO: + alert('Победили нолики!'); + break; + } + isGameOver = true; + } + if (movesLeft === 0 && !isGameOver) + alert('Победила дружба!'); +} + + +function checkWinner (symbol, row, col) { + let winFound = true; + let winLine; + for (let i = 0; i < dimension; i++) { + if (field[row][i] !== symbol) { + winFound = false; + break; + } + winFound = true; + } + winLine = "vertical"; + + if (!winFound) { + for (let i = 0; i < dimension; i++) { + if (field[i][col] !== symbol) { + winFound = false; + break; + } + winFound = true; + } + winLine = "horizontal"; + } + + if (!winFound) { + for (let i = 0; i < dimension; i++) { + if (field[i][i] !== symbol) { + winFound = false; + break; + } + winFound = true; + } + winLine = "diagonal"; + } + if (!winFound) { + for (let i = 0; i < dimension; i++) { + if (field[i][dimension - (1 + i)] !== symbol) { + winFound = false; + break; + } + winFound = true; + } + winLine = "anti-diagonal"; + } + + if (winFound) + colorWinningLine(winLine, row, col); + return winFound; +} + +function colorWinningLine(winLine, row, col){ + for (let i = 0; i < dimension; i++) { + switch (winLine) { + case "vertical": + changeColor(findCell(row, i)); + break; + + case "horizontal": + changeColor(findCell(i, col)); + break; + + case "diagonal": + changeColor(findCell(i, i)); + break; + + case "anti-diagonal": + changeColor(findCell(i, dimension - (i + 1))); + break; + } + } +} - /* Пользоваться методом для размещения символа в клетке так: - renderSymbolInCell(ZERO, row, col); - */ +function changeColor(cell){ + cell.style.backgroundColor = '#b43030'; + cell.style.color = 'white'; } function renderSymbolInCell (symbol, row, col, color = '#333') { @@ -55,6 +167,7 @@ function addResetListener () { function resetClickHandler () { console.log('reset!'); + startGame(); }