рдЯрд╛рдЗрдкрд╕реНрдХреНрд░рд┐рдкреНрдЯ, рд░рд┐рдПрдХреНрдЯ рдФрд░ рдореЛрдЪрд╛ рдХреЗ рд╕рд╛рде рдПрдХ рдЯрд┐рдХ-рдЯреИрдХ-рдЯреЛ рдЦреЗрд▓ рдмрдирд╛рдирд╛

рд╣рдо рдЖрдкрдХреЛ рдЬреЛрд╢ Kuttler рджреНрд╡рд╛рд░рд╛ рдПрдХ рд▓реЗрдЦ рдХрд╛ рдЕрдиреБрд╡рд╛рдж рдкреЗрд╢ рдХрд░рддреЗ рд╣реИрдВ, рдЬреЛ blog.bitsrc.io рдкрд░ рдкреНрд░рдХрд╛рд╢рд┐рдд рд╣реИред рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдФрд░ рдЯрд╛рдЗрдкрд╕реНрдХреНрд░рд┐рдкреНрдЯ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдЯрд┐рдХ-рдЯреИрдХ-рдЯреЛ рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдмрдирд╛рдирд╛ рд╕реАрдЦреЗрдВред



рдПрдХ рд╕рд╛рдзрд╛рд░рдг рдЯрд┐рдХ-рдЯреАрдПрд╕реА рдкреИрд░ рдХреА рдЕрдВрдЧреБрд▓реА рдЦреЗрд▓ рдПрдХ рдореЙрдбреНрдпреВрд▓рд░ рдЖрдзрд╛рд░ рдкрд░ рдмрдирд╛рдпрд╛ рдЧрдпрд╛ рд╣реИ рдФрд░ рдмрд┐рдЯ рд╡реЗрдмрд╕рд╛рдЗрдЯ рдкрд░ рдЕрдкрд▓реЛрдб рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ ред рдЖрдк рдореЗрд░реЗ рдЧреЗрдо рдХреЗ рдШрдЯрдХреЛрдВ рдХреЛ рдмрджрд▓ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рдЗрд╕реЗ рдПрдирдкреАрдПрдо, рдпрд╛рд░реНрди рдпрд╛ рдмрд┐рдЯ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдмрд┐рдЯ рдкреНрд▓реЗрдЧреНрд░рд╛рдЙрдВрдб рдкрд░ рдСрдирд▓рд╛рдЗрди рдкрд░реАрдХреНрд╖рдг рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдРрд╕рд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рдореЗрд░реЗ рдШрдЯрдХ рд╕рдВрдЧреНрд░рд╣ рдкрд░ рдЬрд╛рдПрдВ ред

рдореЙрдбреНрдпреВрд▓рд░ рдлреИрд╢рди рдореЗрдВ рдЯрд┐рдХ-рдЯреИрдХ-рдЯреЛ рдЦреЗрд▓ рдмрдирд╛рддреЗ рд╕рдордп, рдпрд╣ рдПрдХ рдХрд╛рд░рдг рдЦреЛрдЬрдирд╛ рдореБрд╢реНрдХрд┐рд▓ рд╣реИ рдХрд┐ рдпреВрдЖрдИ рдШрдЯрдХреЛрдВ рдХреЛ рдХрднреА рднреА рдлрд┐рд░ рд╕реЗ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред рдЗрд╕рд▓рд┐рдП, рдореИрдВрдиреЗ рдореБрдЦреНрдп рд░реВрдк рд╕реЗ рдЦреЗрд▓ рдЙрдкрдпреЛрдЧрд┐рддрд╛рдУрдВ рдкрд░ рдзреНрдпрд╛рди рдХреЗрдВрджреНрд░рд┐рдд рдХрд┐рдпрд╛ред

рдкреНрд░реЛрдЧреНрд░рд╛рдорд┐рдВрдЧ рдХреЗ рд▓рд┐рдП, рдореИрдВрдиреЗ рдЯрд╛рдЗрдкрд╕реНрдХреНрд░рд┐рдкреНрдЯ рдХреЛ рдЪреБрдирд╛ - рдореИрдВрдиреЗ рдмрд┐рдЯ рд╡реЗрдмрд╕рд╛рдЗрдЯ рдкрд░ рдЯрд╛рдЗрдкрд╕реНрдХреНрд░рд┐рдкреНрдЯ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдХреЛрдб рд╕рдВрдХрд▓рд┐рдд рдХрд┐рдпрд╛ред рдлрд┐рд░ рдЙрдиреНрд╣реЛрдВрдиреЗ рдкрд░реАрдХреНрд╖рдг рдХреЗ рд▓рд┐рдП рдореЛрдЪрд╛ рдврд╛рдВрдЪреЗ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ред

рдореЗрд░реА рдкрд░рд┐рдпреЛрдЬрдирд╛ рдХреЗ рдШрдЯрдХреЛрдВ рдХреЛ рд╕реНрдерд╛рдкрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рдкрд╣рд▓реЗ рдбреЛрдореЗрди рд░рдЬрд┐рд╕реНрдЯреНрд░реА рдХреЗ рд░реВрдк рдореЗрдВ bit.dev рдХреЛ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░ рдХрд░реЗрдВ (рдЕрдкрдиреЗ рдбрд┐рд╡рд╛рдЗрд╕ рдкрд░ рдХреЙрдкреА рдФрд░ рдкреЗрд╕реНрдЯ рдХрд░реЗрдВ)ред рдпрд╣ рдХреЗрд╡рд▓ рдПрдХ рдмрд╛рд░ рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП! рдпрджрд┐ рдЖрдк рдмрд┐рдЯ рд╡реЗрдмрд╕рд╛рдЗрдЯ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЬрд╛рд░реА рд░рдЦрддреЗ рд╣реИрдВ, рддреЛ рдЖрдкрдХреЛ рдЗрд╕реЗ рдкреБрди: рдХреЙрдиреНрдлрд╝рд┐рдЧрд░ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реЛрдЧреАред

npm config set '@bit:registry' https://node.bit.dev 

рдлрд┐рд░ рдпрд╛рд░реНрди рдпрд╛ рдПрдирдкреАрдПрдо рдкреИрдХреЗрдЬ рдкреНрд░рдмрдВрдзрдХреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдШрдЯрдХ рд╕реНрдерд╛рдкрд┐рдд рдХрд░реЗрдВ:

 npm i @bit/joshk.tic-tac-toe-game.game yarn add @bit/joshk.tic-tac-toe-game.game 

рдЦреЗрд▓ рдШрдЯрдХ


рдЦреЗрд▓ рдШрдЯрдХ рдореЗрд░реЗ рдЖрд╡реЗрджрди рдХрд╛ рдореБрдЦреНрдп рдШрдЯрдХ рд╣реИ - рдпрд╣ рдПрдХ рдмреЛрд░реНрдб рдШрдЯрдХ рдФрд░ рджреЛ рдкреНрд░рдзрд╛рди рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдШрдЯрдХреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдмрдирд╛рдпрд╛ рдЧрдпрд╛ рдерд╛ред

рдореИрдВрдиреЗ рд╕реЗрдЯрдЕрдк рд╕реНрдХреНрд░реАрди рдХреЗ рд▓рд┐рдП рдмрдЯрди рдФрд░ рдЗрдирдкреБрдЯ-рдЯреЗрдХреНрд╕реНрдЯ рдШрдЯрдХреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рд╣реИ - рдЖрдк рдпрд╣рд╛рдВ рдЙрдирдХреЗ рдХреЛрдб рдХреЛ рджреЗрдЦ рдФрд░ рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВ ред



рдЕрдкрдиреА рдкрд░рд┐рдпреЛрдЬрдирд╛ рдореЗрдВ PrimeReact рдШрдЯрдХ рд╕реНрдерд╛рдкрд┐рдд рдХрд░реЗрдВ:

 yarn add @bit/primefaces.primereact.inputtext yarn add @bit/primefaces.primereact.button 

рдкреИрд░рд╛рдореАрдЯрд░ рд╕реЗрдЯ рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рдЖрдк "рдкреНрд▓реЗ" рдФрд░ ... рдкреНрд▓реЗ рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ!

рдмреЛрд░реНрдб рдШрдЯрдХ


рдмреЛрд░реНрдб рдШрдЯрдХ рдкреНрд░реЙрдкреНрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдПрдХ рдЧрддрд┐рд╢реАрд▓ рддрд╛рд▓рд┐рдХрд╛ рдмрдирд╛рддрд╛ рд╣реИ, рдЦрд┐рд▓рд╛рдбрд╝рд┐рдпреЛрдВ рдХреЗ рд▓рд┐рдП рдХрддрд╛рд░ рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рддрд╛ рд╣реИ рдФрд░ рд╡рд┐рдЬреЗрддрд╛ рдХреЛ рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рддрд╛ рд╣реИред рдЖрдк рдпрд╣рд╛рдВ рдкрд░ рдХреЛрдб рдХреЛ рджреЗрдЦ рдФрд░ рдкрд░рдЦ рд╕рдХрддреЗ рд╣реИрдВ ред



рд╡рд░реНрдЧ рдШрдЯрдХ


рд╕реНрдХреНрд╡рд╛рдпрд░ рдШрдЯрдХ рдПрдХ рд╕рд╛рдорд╛рдиреНрдп рд╕реЗрд▓ рд╣реИ рдЬреЛ рдПрдХ рд╡реИрдХрд▓реНрдкрд┐рдХ рд░рдВрдЧ рдХреЗ рд╕рд╛рде рдПрдХ рдореВрд▓реНрдп рдкреНрд░рд╛рдкреНрдд рдХрд░рддрд╛ рд╣реИ рдФрд░ рдЬрдм рдореВрд▓реНрдп рдмрджрд▓рддрд╛ рд╣реИ рддреЛ рдмреЛрд░реНрдб рдШрдЯрдХ рдХреЛ рдПрдХ рдШрдЯрдирд╛ рднреЗрдЬрддрд╛ рд╣реИред рдЖрдк рдпрд╣рд╛рдВ рдкрд░ рдХреЛрдб рдХреЛ рджреЗрдЦ рдФрд░ рдкрд░рдЦ рд╕рдХрддреЗ рд╣реИрдВ ред



рдЦрд╛рд▓реА рд╕реЗрд▓ рдлрд╝рдВрдХреНрд╢рди


рдЦрд╛рд▓реА рд╕реЗрд▓ рдлрд╝рдВрдХреНрд╢рди рд╡рд┐рдЬреЗрддрд╛-рдХреИрд▓реНрдХ рдлрд╝рдВрдХреНрд╢рди рдХреЗ рд▓рд┐рдП рдПрдХ рд╕рд╣рд╛рдпрдХ рдлрд╝рдВрдХреНрд╢рди рд╣реИ, рдЬреЛ рдпрд╣ рдЬрд╛рдВрдЪрддрд╛ рд╣реИ рдХрд┐ рдЧреЗрдо рдЯреЗрдмрд▓ рдореЗрдВ рдЦрд╛рд▓реА рд╕реЗрд▓ рд╣реИрдВ рдпрд╛ рдирд╣реАрдВред

рдмрд┐рдЯ рдЖрдкрдХреЛ рдШрдЯрдХ рджрд╕реНрддрд╛рд╡реЗрдЬ рджреЗрдЦрдиреЗ рдФрд░ рдкрд░реАрдХреНрд╖рд╛ рдкрд░рд┐рдгрд╛рдо рджреЗрдЦрдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИ:



рдлрд╝рдВрдХреНрд╢рди рдХреЛрдб
 /** * @description * check if 2d array have an empty cell * @param {{Array.<string[]>}} matrix 2d array * @param {number} rowsNum number of rows * @param {number} colsNum number of columns * @returns {boolean} return true if empty cell was found, and false if not. * @example * import haveEmptyCell from '@bit/joshk.tic-tac-toe-game.utils.have-empty-cell'; * * const matrix = [ * ['X', 'O', 'X'], * ['O', 'X', 'O'], * ['O', 'X', 'O'] * ]; * const result = haveEmptyCell(matrix, 3, 3); * * export default result * @example * import haveEmptyCell from '@bit/joshk.tic-tac-toe-game.utils.have-empty-cell'; * * const matrix = [ * ['X', 'O', 'X'], * ['O', '', 'O'], * ['O', 'X', 'O'] * ]; * const result = haveEmptyCell(matrix, 3, 3); * * export default result * @example * import haveEmptyCell from '@bit/joshk.tic-tac-toe-game.utils.have-empty-cell'; * * const matrix = [ * ['X', 'O', 'X'], * ['O', , 'O'], * ['O', 'X', 'O'] * ]; * const result = haveEmptyCell(matrix, 3, 3); * * export default result * @example * import haveEmptyCell from '@bit/joshk.tic-tac-toe-game.utils.have-empty-cell'; * * const matrix = [ * ['X', 'O', 'X'], * ['O', null, 'O'], * ['O', 'X', 'O'] * ]; * const result = haveEmptyCell(matrix, 3, 3); * * export default result */ function haveEmptyCell(matrix: Array<Array<string>>, rowsNum: number, colsNum: number): boolean { let empty: boolean = false; for (let x = 0; x < rowsNum; x++) { for (let y = 0; y < colsNum; y++) { const element: any = matrix[x][y]; if (!element) { empty = true; break; } } if (empty) break; } return empty; } export default haveEmptyCell 


рд╡рд┐рдЬреЗрддрд╛ рдЧрдгрдирд╛ рд╕рдорд╛рд░реЛрд╣


рд╡рд┐рдЬреЗрддрд╛ рдЧрдгрдирд╛ рдПрдХ рдлрд╝рдВрдХреНрд╢рди рд╣реИ рдЬреЛ рдХреНрд╖реИрддрд┐рдЬ, рдКрд░реНрдзреНрд╡рд╛рдзрд░ рдФрд░ рд╡рд┐рдХрд░реНрдг рд╡рд┐рдорд╛рдиреЛрдВ рдкрд░ рд╡рд┐рдЬреЗрддрд╛ рдХреА рдЧрдгрдирд╛ рдХрд░рддрд╛ рд╣реИред

рдмрд┐рдЯ рдЖрдкрдХреЛ рдШрдЯрдХ рджрд╕реНрддрд╛рд╡реЗрдЬ рджреЗрдЦрдиреЗ рдФрд░ рдкрд░реАрдХреНрд╖рд╛ рдкрд░рд┐рдгрд╛рдо рджреЗрдЦрдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИ:



рдлрд╝рдВрдХреНрд╢рди рдХреЛрдб
 /** * @description * check winner horizontal, vertical and diagonal * @param {Array.<string[]>} matrix 2d array with X and O * @param {number} rowsNum number of rows * @param {number} colsNum number of columns * @param {number} numToWin the number of matching to win * @param {number} lastRow the row number of the square player click * @param {number} lastCol the column number of the square player click * @returns {string} return the winner, X or O or '' if no one win. * @example * import winnerCalc from '@bit/joshk.tic-tac-toe-game.utils.winner-calc'; * * const matrix = [ * ['O', 'O', 'X'], * ['O', 'X', ''], * ['X', '', ''] * ]; * const result = winnerCalc(matrix, 3, 3, 3, 0, 2); * * export default result */ import haveEmptyCell from '../HaveEmptyCell' function winnerCalc(matrix: Array<Array<string>>, rowsNum: number, colsNum: number, numToWin: number, lastRow: number, lastCol: number): string { let winner: string = ''; let match: number = 0; const lastValue: string = matrix[lastRow][lastCol]; //check Horizontal for (let c = 0; c < colsNum; c++) { let currentValue = matrix[lastRow][c]; if (currentValue === lastValue) match++; else match = 0; if (match === numToWin) { winner = lastValue; break; } } if (winner !== '') return winner; match = 0; //check Vertical for (let r = 0; r < rowsNum; r++) { let currentValue = matrix[r][lastCol]; if (currentValue === lastValue) match++; else match = 0; if (match === numToWin) { winner = lastValue; break; } } if (winner !== '') return winner; //check diagonal top-left to bottom-right - include middle match = 0; for (let r = 0; r <= rowsNum - numToWin; r++) { let rowPosition = r; for (let column = 0; column < colsNum && rowPosition < rowsNum; column++) { const currentValue = matrix[rowPosition][column]; if (currentValue === lastValue) match++; else match = 0; if (match === numToWin) { winner = lastValue; break; } rowPosition++; } if (winner !== '') break; } if (winner !== '') return winner; //check diagonal top-left to bottom-right - after middle match = 0; for (let c = 1; c <= colsNum - numToWin; c++) { let columnPosition = c; for (let row = 0; row < rowsNum && columnPosition < colsNum; row++) { let currentValue = matrix[row][columnPosition]; if (currentValue === lastValue) match++; else match = 0; if (match === numToWin) { winner = lastValue; break; } columnPosition++; } if (winner !== '') break; } if (winner !== '') return winner; //check diagonal bottom-left to top-right - include middle match = 0; for (let r = rowsNum - 1; r >= rowsNum - numToWin - 1; r--) { let rowPosition = r; for (let column = 0; column < colsNum && rowPosition < rowsNum && rowPosition >= 0; column++) { let currentValue = matrix[rowPosition][column]; if (currentValue === lastValue) match++; else match = 0; if (match === numToWin) { winner = lastValue; break; } rowPosition--; } if (winner !== '') break; } if (winner !== '') return winner; //check diagonal bottom-left to top-right - after middle match = 0; for (let c = 1; c < colsNum; c++) { let columnPosition = c; for (let row = rowsNum - 1; row < rowsNum && row >= 0 && columnPosition < colsNum && columnPosition >= 1; row--) { console.log(`[${row}][${columnPosition}]`); let currentValue = matrix[row][columnPosition]; if (currentValue === lastValue) match++; else match = 0; if (match === numToWin) { winner = lastValue; break; } columnPosition++; } if (winner !== '') break; } if (winner !== '') return winner; if(haveEmptyCell(matrix, rowsNum, colsNum) === false) { winner = '-1'; } return winner; } export default winnerCalc 


рдкрд░рд┐рдпреЛрдЬрдирд╛ рдмрд┐рдЯ рдкрд░ рдФрд░ рдореЗрд░реЗ рдЧрд┐рдЯрд╣рдм рднрдВрдбрд╛рд░ рдореЗрдВ рдореЗрд░реЗ рд╕рдВрдЧреНрд░рд╣ рдореЗрдВ рдЙрдкрд▓рдмреНрдз рд╣реИ ред

рдЗрд╕ рд▓реЗрдЦ рдкрд░ рдЯрд┐рдкреНрдкрдгреА рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕реНрд╡рддрдВрддреНрд░ рдорд╣рд╕реВрд╕ рдХрд░реЗрдВ рдФрд░ рдореЗрд░реЗ рдЯреНрд╡рд┐рдЯрд░ рдкрд░ рд╕рджрд╕реНрдпрддрд╛ рд▓реЗрдВред

Source: https://habr.com/ru/post/hi456000/


All Articles