From 30bd9f4fa90747485453d3ccacd07837fa07b3a5 Mon Sep 17 00:00:00 2001 From: smileman0001 <72558229+smileman0001@users.noreply.github.com> Date: Thu, 30 Sep 2021 21:15:14 +0500 Subject: [PATCH 1/2] Update index.js --- index.js | 164 +++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 148 insertions(+), 16 deletions(-) diff --git a/index.js b/index.js index 7553909..898f56f 100644 --- a/index.js +++ b/index.js @@ -2,19 +2,39 @@ const CROSS = 'X'; const ZERO = 'O'; const EMPTY = ' '; +let field; +let maxTurns; +let turn; +let winCombination; +let isGameOver; +let winner; + +const winTypes = { + horizontal: 'horiz', + vertical: 'vert', + diagonalLeft: 'diagL', + diagonalRight: 'diagR' +} + const container = document.getElementById('fieldWrapper'); startGame(); addResetListener(); -function startGame () { - renderGrid(3); +function startGame() { + field = []; + turn = 0; + winCombination = []; + isGameOver = false; + winner = ""; + renderGrid(prompt("Задайте размер поля:", 3)); } -function renderGrid (dimension) { +function renderGrid(dimension) { container.innerHTML = ''; - + maxTurns = dimension ** 2; for (let i = 0; i < dimension; i++) { + field[i] = []; const row = document.createElement('tr'); for (let j = 0; j < dimension; j++) { const cell = document.createElement('td'); @@ -26,41 +46,153 @@ function renderGrid (dimension) { } } -function cellClickHandler (row, col) { - // Пиши код тут +function cellClickHandler(row, col) { + if (isGameOver) return; console.log(`Clicked on cell: ${row}, ${col}`); + if (field[row][col] !== undefined) + return; + field[row][col] = CROSS; + processClick(field[row][col], row, col); + if (!isGameOver) botClick(); +} + +function botClick() { + if (isGameOver) return; + let freeCellCount = field.length ** 2 - turn; + let randomFreeCell = Math.floor(Math.random() * freeCellCount); + let counter = 0; + let row, col; + + cellSearch: for (let y = 0; y < field.length; y++) + for (let x = 0; x < field.length; x++) { + if (field[y][x] === undefined) { + if (counter === randomFreeCell) { + [row, col] = [y, x]; + break cellSearch; + } + counter++; + } + } + + console.log(`Bot clicked on cell: ${row}, ${col}`); + field[row][col] = ZERO; + processClick(field[row][col], row, col); +} + +function processClick(symbol, row, col) { + renderSymbolInCell(symbol, row, col); + checkWin(symbol, row, col); + turn++; + if (turn === maxTurns && !winner) isGameOver = true; + else if (!winner) return; + //console.log(isGameOver); + colorWinningLine(); + announceWinner(); +} + +function checkWin(symbol, row, col) { + if ((col === 0 || field[row][col - 1] === symbol) && + (col === field.length - 1 || field[row][col + 1] === symbol)) + winCombination = getWinningCombo(winTypes.horizontal, symbol, row, col); + + if ((row === 0 || field[row - 1][col] === symbol) && + (row === field.length - 1 || field[row + 1][col] === symbol)) + winCombination = getWinningCombo(winTypes.vertical, symbol, row, col); + if (row === col && + (row === 0 || field[row - 1][col - 1] === symbol) && + (row === field.length - 1 || field[row + 1][col + 1] === symbol)) + winCombination = getWinningCombo(winTypes.diagonalLeft, symbol, row, col); - /* Пользоваться методом для размещения символа в клетке так: - renderSymbolInCell(ZERO, row, col); - */ + if (field.length - 1 - row === col && + (row === 0 || field[row - 1][col + 1] === symbol) && + (col === 0 || field[row + 1][col - 1] === symbol)) + winCombination = getWinningCombo(winTypes.diagonalRight, symbol, row, col); + + if (winCombination.length === field.length) { + isGameOver = true; + winner = symbol; + } + //console.log(winCombination); +} + +function getWinningCombo(winType, symbol, row, col) { + let combination = [] + for (let i = 0; i < field.length; i++) { + switch (winType) { + case winTypes.vertical: + if (field[i][col] === symbol) + combination.push([i, col]); + break; + case winTypes.horizontal: + if (field[row][i] === symbol) + combination.push([row, i]); + break; + case winTypes.diagonalLeft: + if (field[i][i] === symbol) + combination.push([i, i]); + break; + case winTypes.diagonalRight: + if (field[field.length - 1 - i][i] === symbol) + combination.push([field.length - 1 - i, i]) + break; + } + } + if (combination.length === field.length) + return combination; + return []; +} + +function announceWinner() { + if (!isGameOver) return; + switch (winner) { + case CROSS: + alert('Победили крестики!'); + break; + case ZERO: + alert('Победили нолики!'); + break; + default: + alert('Победила дружба!'); + break; + } +} + +function colorWinningLine() { + for (let i = 0; i < winCombination.length; i++) { + let row = winCombination[i][0]; + let col = winCombination[i][1]; + const targetCell = findCell(row, col); + targetCell.style.backgroundColor = "red"; + } } -function renderSymbolInCell (symbol, row, col, color = '#333') { +function renderSymbolInCell(symbol, row, col, color = '#333') { const targetCell = findCell(row, col); targetCell.textContent = symbol; targetCell.style.color = color; } -function findCell (row, col) { +function findCell(row, col) { const targetRow = container.querySelectorAll('tr')[row]; return targetRow.querySelectorAll('td')[col]; } -function addResetListener () { +function addResetListener() { const resetButton = document.getElementById('reset'); resetButton.addEventListener('click', resetClickHandler); } -function resetClickHandler () { +function resetClickHandler() { + startGame(); console.log('reset!'); } /* Test Function */ /* Победа первого игрока */ -function testWin () { +function testWin() { clickOnCell(0, 2); clickOnCell(0, 0); clickOnCell(2, 0); @@ -71,7 +203,7 @@ function testWin () { } /* Ничья */ -function testDraw () { +function testDraw() { clickOnCell(2, 0); clickOnCell(1, 0); clickOnCell(1, 1); @@ -84,6 +216,6 @@ function testDraw () { clickOnCell(2, 2); } -function clickOnCell (row, col) { +function clickOnCell(row, col) { findCell(row, col).click(); } From 33191c72e968723b7bb71d31f773d5aa4ebdf6ea Mon Sep 17 00:00:00 2001 From: smileman0001 <72558229+smileman0001@users.noreply.github.com> Date: Thu, 30 Sep 2021 21:20:09 +0500 Subject: [PATCH 2/2] Update index.js --- index.js | 249 ++++++++++++++++++++++++------------------------------- 1 file changed, 107 insertions(+), 142 deletions(-) diff --git a/index.js b/index.js index 898f56f..e458c2e 100644 --- a/index.js +++ b/index.js @@ -2,18 +2,19 @@ const CROSS = 'X'; const ZERO = 'O'; const EMPTY = ' '; -let field; -let maxTurns; -let turn; -let winCombination; let isGameOver; +let maxCounOfTurns; +let lastSymbol = ""; +let counOfTurns; let winner; +let dim = 3; +let winCombination; const winTypes = { - horizontal: 'horiz', - vertical: 'vert', - diagonalLeft: 'diagL', - diagonalRight: 'diagR' + horizontal: 'horizontal', + vertical: 'vertical', + diagonalLeft: 'diagonalLeft', + diagonalRight: 'diagonalRight' } const container = document.getElementById('fieldWrapper'); @@ -21,20 +22,20 @@ const container = document.getElementById('fieldWrapper'); startGame(); addResetListener(); -function startGame() { - field = []; - turn = 0; +function startGame () { + //dim = prompt("Задайте размер поля:", 3); + lastSymbol = ""; winCombination = []; + counOfTurns = 0; + maxCounOfTurns = dim**2; isGameOver = false; - winner = ""; - renderGrid(prompt("Задайте размер поля:", 3)); + renderGrid(dim); } -function renderGrid(dimension) { +function renderGrid (dimension) { container.innerHTML = ''; - maxTurns = dimension ** 2; + dim = dimension; for (let i = 0; i < dimension; i++) { - field[i] = []; const row = document.createElement('tr'); for (let j = 0; j < dimension; j++) { const cell = document.createElement('td'); @@ -46,116 +47,40 @@ function renderGrid(dimension) { } } -function cellClickHandler(row, col) { - if (isGameOver) return; - console.log(`Clicked on cell: ${row}, ${col}`); - if (field[row][col] !== undefined) - return; - field[row][col] = CROSS; - processClick(field[row][col], row, col); - if (!isGameOver) botClick(); -} +function cellClickHandler (row, col) { -function botClick() { - if (isGameOver) return; - let freeCellCount = field.length ** 2 - turn; - let randomFreeCell = Math.floor(Math.random() * freeCellCount); - let counter = 0; - let row, col; - - cellSearch: for (let y = 0; y < field.length; y++) - for (let x = 0; x < field.length; x++) { - if (field[y][x] === undefined) { - if (counter === randomFreeCell) { - [row, col] = [y, x]; - break cellSearch; - } - counter++; - } - } + if (isGameOver || findCell(row, col).textContent !== EMPTY) return; - console.log(`Bot clicked on cell: ${row}, ${col}`); - field[row][col] = ZERO; - processClick(field[row][col], row, col); -} + //console.log(`Clicked on cell: ${row}, ${col}`); + //console.log(`maxCounOfTurns = ${maxCounOfTurns}`); + //console.log(`dim = ${dim}`); + //console.log(`winner = ${winner}`); + //console.log(`isGameOver = ${isGameOver}`); + //console.log(`winCombination = ${winCombination}`); -function processClick(symbol, row, col) { - renderSymbolInCell(symbol, row, col); - checkWin(symbol, row, col); - turn++; - if (turn === maxTurns && !winner) isGameOver = true; - else if (!winner) return; - //console.log(isGameOver); - colorWinningLine(); - announceWinner(); -} + let symbol = ""; -function checkWin(symbol, row, col) { - if ((col === 0 || field[row][col - 1] === symbol) && - (col === field.length - 1 || field[row][col + 1] === symbol)) - winCombination = getWinningCombo(winTypes.horizontal, symbol, row, col); + if(lastSymbol != ZERO) + symbol = ZERO; + else + symbol = CROSS; - if ((row === 0 || field[row - 1][col] === symbol) && - (row === field.length - 1 || field[row + 1][col] === symbol)) - winCombination = getWinningCombo(winTypes.vertical, symbol, row, col); + lastSymbol = symbol; - if (row === col && - (row === 0 || field[row - 1][col - 1] === symbol) && - (row === field.length - 1 || field[row + 1][col + 1] === symbol)) - winCombination = getWinningCombo(winTypes.diagonalLeft, symbol, row, col); + if(findCell(row, col).textContent === EMPTY) + renderSymbolInCell(symbol, row, col); - if (field.length - 1 - row === col && - (row === 0 || field[row - 1][col + 1] === symbol) && - (col === 0 || field[row + 1][col - 1] === symbol)) - winCombination = getWinningCombo(winTypes.diagonalRight, symbol, row, col); + checkWinner(symbol, row, col); + + counOfTurns++; - if (winCombination.length === field.length) { + if (counOfTurns === maxCounOfTurns && !winner) isGameOver = true; - winner = symbol; - } - //console.log(winCombination); -} -function getWinningCombo(winType, symbol, row, col) { - let combination = [] - for (let i = 0; i < field.length; i++) { - switch (winType) { - case winTypes.vertical: - if (field[i][col] === symbol) - combination.push([i, col]); - break; - case winTypes.horizontal: - if (field[row][i] === symbol) - combination.push([row, i]); - break; - case winTypes.diagonalLeft: - if (field[i][i] === symbol) - combination.push([i, i]); - break; - case winTypes.diagonalRight: - if (field[field.length - 1 - i][i] === symbol) - combination.push([field.length - 1 - i, i]) - break; - } - } - if (combination.length === field.length) - return combination; - return []; -} + else if (!winner) return; -function announceWinner() { - if (!isGameOver) return; - switch (winner) { - case CROSS: - alert('Победили крестики!'); - break; - case ZERO: - alert('Победили нолики!'); - break; - default: - alert('Победила дружба!'); - break; - } + colorWinningLine(); + winnerAlert(); } function colorWinningLine() { @@ -167,55 +92,95 @@ function colorWinningLine() { } } -function renderSymbolInCell(symbol, row, col, color = '#333') { +function renderSymbolInCell (symbol, row, col, color = '#333') { const targetCell = findCell(row, col); targetCell.textContent = symbol; targetCell.style.color = color; } -function findCell(row, col) { +function findCell (row, col) { const targetRow = container.querySelectorAll('tr')[row]; return targetRow.querySelectorAll('td')[col]; } -function addResetListener() { +function addResetListener () { const resetButton = document.getElementById('reset'); resetButton.addEventListener('click', resetClickHandler); } -function resetClickHandler() { +function resetClickHandler () { startGame(); console.log('reset!'); } +function checkWinner(symbol, row, col) { + if ((col === 0 || findCell(row, col - 1).textContent === symbol) && + (col === dim - 1 || findCell(row, col + 1).textContent === symbol)) + winCombination = getWinningCombo(winTypes.horizontal, symbol, row, col); + + if ((row === 0 || findCell(row - 1, col).textContent === symbol) && + (row === dim - 1 || findCell(row + 1, col).textContent === symbol)) + winCombination = getWinningCombo(winTypes.vertical, symbol, row, col); + + if (row === col && + (row === 0 || findCell(row - 1, col - 1).textContent === symbol) && + (row === dim - 1 || findCell(row + 1, col + 1).textContent === symbol)) + winCombination = getWinningCombo(winTypes.diagonalLeft, symbol, row, col); + + if (dim - 1 - row === col && + (row === 0 || findCell(row - 1, col + 1).textContent === symbol) && + (col === 0 || findCell(row + 1, col - 1).textContent === symbol)) + winCombination = getWinningCombo(winTypes.diagonalRight, symbol, row, col); -/* Test Function */ -/* Победа первого игрока */ -function testWin() { - clickOnCell(0, 2); - clickOnCell(0, 0); - clickOnCell(2, 0); - clickOnCell(1, 1); - clickOnCell(2, 2); - clickOnCell(1, 2); - clickOnCell(2, 1); + if (winCombination.length === dim) { + isGameOver = true; + winner = symbol; + } +} + +function winnerAlert() { + if (!isGameOver) return; + switch (winner) { + case CROSS: + alert('Победили крестики!'); + break; + case ZERO: + alert('Победили нолики!'); + break; + default: + alert('Победила дружба!'); + break; + } } -/* Ничья */ -function testDraw() { - clickOnCell(2, 0); - clickOnCell(1, 0); - clickOnCell(1, 1); - clickOnCell(0, 0); - clickOnCell(1, 2); - clickOnCell(1, 2); - clickOnCell(0, 2); - clickOnCell(0, 1); - clickOnCell(2, 1); - clickOnCell(2, 2); +function getWinningCombo(winType, symbol, row, col) { + let combination = [] + for (let i = 0; i < dim; i++) { + switch (winType) { + case winTypes.vertical: + if (findCell(i, col).textContent === symbol) + combination.push([i, col]); + break; + case winTypes.horizontal: + if (findCell(row, i).textContent === symbol) + combination.push([row, i]); + break; + case winTypes.diagonalLeft: + if (findCell(i, i).textContent === symbol) + combination.push([i, i]); + break; + case winTypes.diagonalRight: + if (findCell(dim - 1 - i, i).textContent === symbol) + combination.push([dim - 1 - i, i]) + break; + } + } + if (combination.length === dim) + return combination; + return []; } -function clickOnCell(row, col) { +function clickOnCell (row, col) { findCell(row, col).click(); }