Skip to content
This repository has been archived by the owner on Nov 11, 2021. It is now read-only.

Commit

Permalink
fix issue with creating new tiles
Browse files Browse the repository at this point in the history
  • Loading branch information
lochungtin committed Jun 1, 2021
1 parent f8d46ca commit d87d772
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 2 deletions.
39 changes: 39 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
## RN2048

### Background

In the evening of the 25th May, 2021, I decided to task myself with a 4-day weekend build. I wanted to learn how to use the react-native-gesture-handler package and I decided to code the game 2048 with typescript React Native.

This project took all 4 days, or effectively, 20 or so hours to complete. Days 1 and 2 were spent developing the game's main algorithm, day 3 was spent debugging and refining the code, and the final day was used to style, refactor, document, and release everything.

### Technical Details

Ths app consists of 2 pages, the main game page and a record page which displays all the games the user decides to save.

Due to time concerns, animated movement for the tile on the grid have not been implemented. But this could be done with react-native-reanimated or other similar packages.

#### Libraries Used

Below is a list of all the node packages used for the project (React Native base packages **EXCLUDED**)
- react-native-gesture-handler
- react-native-modal
- react-native-vector-icons
- react-navigation (and all of its subsequent packages)
- the stack navigation package
- redux (and all of its subsequent packages)
- react-redux
- redux-persist
- react-native-async-storage

### Gallery

| Game Screen (Dark) | Game Screen (Light) | Gameover Popup Screen | Record Screen |
| :-----------------------------: | :------------------------------: | :-----------------------------------: | :---------------------------------: |
| <img src='./img/game_dark.jpg'> | <img src='./img/game_light.jpg'> | <img src='./img/gameover_screen.jpg'> | <img src='./img/record_screen.jpg'> |


### Maintenance and Future Updates

As of now, there are no plans to maintain nor further develop this project, as this is only a weekend sprint build.

Although there is no incentive to do so, the way the app is coded is prepared for further expansion, such as different sized boards. The algorithms were developed to be able to handle boards of all sizes. Adding new screens to accomodate for board size selection would also be easy as screen components are extracted and abstracted from the navigator itself.
7 changes: 5 additions & 2 deletions src/game/board.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { cascade } from "../utils/array";
import { cascade, compare } from "../utils/array";
import { Direction } from "../utils/enums";
import { CoordinatePair } from "../utils/types";

Expand All @@ -25,9 +25,12 @@ export default class Board {

static swipe = (board: Board, direction: Direction): void => {
let temp = cascade(board.board, direction);

if (!compare(board.board, temp.board))
Board.newTile(board);

board.board = temp.board;
board.score += temp.score;
Board.newTile(board);
}

static validate = (board: Board): boolean => {
Expand Down
12 changes: 12 additions & 0 deletions src/utils/array.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,15 @@ export const cascade = (arr: Array<Array<number>>, direction: Direction): GameCo
}
}

export const compare = (board1: Array<Array<number>>, board2: Array<Array<number>>): boolean => {
// assuming they are of same dimensions

for (let i = 0; i < board1.length; ++i) {
for (let j = 0; j < board1[i].length; ++j) {
if (board1[i][j] !== board2[i][j])
return false;
}
}

return true;
}

0 comments on commit d87d772

Please sign in to comment.