Create App game Caro from ReactNative(Expo)

le anh
3 min readSep 28, 2022

--

Currently, developing mobile applications is too simple for us, in order to better understand the architecture and operation of RN, we can make a small application to test the speed and performance. application capabilities, in addition, can also improve algorithm solving skills.
Today I will introduce a small game, which is also too popular among us, not yet completed, but I hope to be able to help or give you ideas at work.

We divide it into the following parts:

— Display
— Initialize matrix
— Win/lose handling

- Display
To be able to customize the size of the squares and check the number of custom wins that I can handle with the states, I set the following variables:

Depending on the design of the application can be made more sophisticated.

Tiếp theo đến phần tạo các khối cân xứng với nhau ví dụ như 3X3, 4X4, 5X5 chúng ta sử dụng matrix 2d để khởi tạo mảng dữ liệu để tạo mảng dữ liệu cân xứng.

Sau khi tạo động tuỳ biến size ứng dụng có tăng giảm như hình sau

Handle events for the squares in the image in order of X-O turn, avoid overwriting the marked squares

  1. check if the square has been processed
  2. tick that square
  3. move on to the next player’s turn
  • Handling wins and losses

In turn each time the data changes, we check the data again, counting horizontally, vertically, diagonally
Use the FOR function to process arrays according to the following syntax:

—Horizontal handling

— Vertical handling

— Diagonal handling

The process of working sometimes should also learn and do something to review the skill, reading and learning is not enough to understand it. Need to do and have experience will have the best reviews about it

Happy ending!

--

--