Le presentamos una traducci贸n de un art铆culo de Josh Kuttler publicado en blog.bitsrc.io. Aprenda a crear una aplicaci贸n Tic-Tac-Toe con React y TypeScript.
Un simple juego de tres en raya creado de forma modular y
cargado en el sitio web de Bit . Puedes cambiar los componentes de mi juego y probarlo en l铆nea en Bit PlayGround usando NPM, Yarn o Bit. Para hacer esto,
vaya a mi colecci贸n de componentes .
Cuando creas juegos Tic-Tac-Toe de forma modular, es dif铆cil encontrar una raz贸n por la cual los componentes de la interfaz de usuario puedan volver a usarse. Por lo tanto, me concentr茅 principalmente en las utilidades del juego.
Para la programaci贸n, eleg铆 TypeScript: compil茅 el c贸digo usando
TypeScript en el sitio web de Bit . Luego us贸 el marco Mocha para las pruebas.
Para instalar componentes de mi proyecto, primero configure
bit.dev como el registro de dominio (copie y pegue en su dispositivo). 隆Esto debe hacerse solo una vez! Si contin煤a utilizando el sitio web de Bit, no necesitar谩 volver a configurarlo.
npm config set '@bit:registry' https:
Luego instale el componente utilizando los gestores de paquetes Yarn o NPM:
npm i @bit/joshk.tic-tac-toe-game.game yarn add @bit/joshk.tic-tac-toe-game.game
Componente del juego
El componente del juego es el componente principal de mi aplicaci贸n: se cre贸 usando un componente de la placa y dos componentes
Prime React .
Utilic茅 el
bot贸n y
los componentes de
entrada de texto para la pantalla de configuraci贸n; puedes probar y ver su c贸digo
aqu铆 .
Instale componentes PrimeReact en su proyecto:
yarn add @bit/primefaces.primereact.inputtext yarn add @bit/primefaces.primereact.button
Despu茅s de configurar los par谩metros, puede hacer clic en "Reproducir" y ... 隆jugar!
Componente de placa
El componente de
tablero crea una tabla din谩mica usando Props, establece la cola para los jugadores y determina el ganador. Puedes probar y ver el c贸digo
aqu铆 .
Componente cuadrado
El componente Cuadrado es una celda normal que recibe un valor con un color opcional y env铆a un evento al componente Tablero cuando el valor cambia. Puedes probar y ver el c贸digo
aqu铆 .
Funci贸n de celda vac铆a
La funci贸n de celda vac铆a es una funci贸n auxiliar para la funci贸n Winner-calc, que verifica si hay celdas vac铆as en la mesa de juego.
Bit le permite ver documentos componentes y resultados de pruebas:
C贸digo de funci贸n 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
Funci贸n de c谩lculo ganador
El c谩lculo del ganador es una funci贸n que calcula al ganador en planos horizontales, verticales y diagonales.
Bit le permite ver documentos componentes y resultados de pruebas:
C贸digo de funci贸n 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];
El proyecto est谩 disponible en mi colecci贸n
en Bit y en mi
repositorio de GitHub .
Si茅ntase libre de
comentar este art铆culo y suscribirse a mi
Twitter .