Geekly articles weekly

Membuat game Tic-Tac-Toe dengan TypeScript, React, dan Mocha

Kami menyajikan kepada Anda terjemahan sebuah artikel oleh Josh Kuttler yang diterbitkan di blog.bitsrc.io. Pelajari cara membuat aplikasi Tic-Tac-Toe menggunakan Bereaksi dan TypeScript.



Gim tic-tac-toe sederhana yang dibuat secara modular dan diunggah ke situs web Bit . Anda dapat mengubah komponen permainan saya dan mengujinya secara daring di Bit PlayGround menggunakan NPM, Yarn, atau Bit. Untuk melakukan ini, buka koleksi komponen saya .

Saat Anda membuat game Tic-Tac-Toe dalam mode modular, sulit untuk menemukan alasan mengapa komponen UI dapat digunakan lagi. Karena itu, saya fokus terutama pada utilitas game.

Untuk pemrograman, saya memilih TypeScript - Saya mengkompilasi kode menggunakan TypeScript di situs web Bit . Kemudian dia menggunakan kerangka kerja Mocha untuk pengujian.

Untuk menginstal komponen dari proyek saya, konfigurasikan bit.dev terlebih dahulu sebagai registri domain (salin dan tempel pada perangkat Anda). Ini harus dilakukan hanya sekali! Jika Anda terus menggunakan situs web Bit, Anda tidak perlu mengkonfigurasi ulang.

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

Kemudian instal komponen menggunakan manajer paket Benang dan NPM:

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

Komponen gim


Komponen permainan adalah komponen utama dari aplikasi saya - itu dibuat menggunakan satu komponen Dewan dan dua komponen Prime React .

Saya menggunakan komponen Tombol dan Input-teks untuk layar pengaturan - Anda dapat menguji dan melihat kode mereka di sini .



Instal komponen PrimeReact di proyek Anda:

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

Setelah mengatur parameter, Anda dapat mengklik "Mainkan" dan ... main!

Komponen Dewan


Komponen papan membuat tabel dinamis menggunakan Alat Peraga, mengatur antrian untuk pemain dan menentukan pemenang. Anda dapat menguji dan melihat kode di sini .



Komponen Kuadrat


Komponen kuadrat adalah sel normal yang menerima nilai dengan warna opsional dan mengirimkan peristiwa ke komponen papan ketika nilai berubah. Anda dapat menguji dan melihat kode di sini .



Fungsi sel kosong


Fungsi sel kosong adalah fungsi pembantu untuk fungsi Winner-calc, yang memeriksa apakah ada sel kosong di tabel permainan.

Bit memungkinkan Anda untuk melihat dokumen komponen dan hasil pengujian:



Kode fungsi
 /** * @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


Fungsi perhitungan pemenang


Perhitungan pemenang adalah fungsi yang menghitung pemenang pada bidang horizontal, vertikal dan diagonal.

Bit memungkinkan Anda untuk melihat dokumen komponen dan hasil pengujian:



Kode fungsi
 /** * @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


Proyek ini tersedia dalam koleksi saya di Bit dan di repositori GitHub saya.

Jangan ragu untuk mengomentari artikel ini dan berlangganan Twitter saya.

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

More articles:


All Articles