Geekly articles weekly

Criando um jogo Tic-Tac-Toe com TypeScript, React e Mocha

Apresentamos uma tradução de um artigo de Josh Kuttler publicado no blog.bitsrc.io. Aprenda a criar um aplicativo Tic-Tac-Toe usando React e TypeScript.



Um simples jogo da velha escola criado em uma base modular e carregado no site da Bit . Você pode alterar os componentes do meu jogo e testá-lo on-line no Bit PlayGround usando NPM, Yarn ou Bit. Para fazer isso, vá para minha coleção de componentes .

Ao criar jogos Tic-Tac-Toe de forma modular, é difícil encontrar uma razão pela qual os componentes da interface do usuário possam ser usados ​​novamente. Portanto, concentrei-me principalmente em utilitários de jogos.

Para programação, escolhi o TypeScript - compilei o código usando o TypeScript no site da Bit . Então ele usou a estrutura Mocha para testar.

Para instalar componentes do meu projeto, primeiro configure o bit.dev como o registro de domínio (copie e cole no seu dispositivo). Isso deve ser feito apenas uma vez! Se você continuar usando o site da Bit, não precisará reconfigurá-lo.

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

Em seguida, instale o componente usando os gerenciadores de pacotes Yarn ou NPM:

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

Componente do jogo


O componente do jogo é o principal componente do meu aplicativo - ele foi criado usando um componente da placa e dois componentes do Prime React .

Usei os componentes Botão e Entrada de texto na tela de configuração - você pode testar e ver o código deles aqui .



Instale os componentes do PrimeReact no seu projeto:

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

Depois de definir os parâmetros, você pode clicar em "Play" e ... play!

Componente da placa


O componente Board cria uma tabela dinâmica usando Props, define a fila para os jogadores e determina o vencedor. Você pode testar e ver o código aqui .



Componente quadrado


O componente Square é uma célula normal que recebe um valor com uma cor opcional e envia um evento ao componente Board quando o valor é alterado. Você pode testar e ver o código aqui .



Função de célula vazia


A função Célula vazia é uma função auxiliar da função Winner-calc, que verifica se há células vazias na tabela de jogos.

Bit permite que você veja documentos componentes e resultados de testes:



Código de função
 /** * @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


Função de cálculo do vencedor


O cálculo do vencedor é uma função que calcula o vencedor nos planos horizontal, vertical e diagonal.

Bit permite que você veja documentos componentes e resultados de testes:



Código de função
 /** * @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


O projeto está disponível na minha coleção no Bit e no meu repositório GitHub .

Sinta-se livre para comentar sobre este artigo e se inscrever no meu Twitter .

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

More articles:


All Articles