Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tinspham209/tetris-game-react
Tetris Game with React
https://github.com/tinspham209/tetris-game-react
react tetris-game tetrominos
Last synced: about 8 hours ago
JSON representation
Tetris Game with React
- Host: GitHub
- URL: https://github.com/tinspham209/tetris-game-react
- Owner: tinspham209
- Created: 2020-09-03T10:49:58.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T11:50:51.000Z (11 months ago)
- Last Synced: 2023-12-15T12:53:28.086Z (11 months ago)
- Topics: react, tetris-game, tetrominos
- Language: JavaScript
- Homepage:
- Size: 1.3 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mini Project: Tetris Game
## Date: 3 - Sep - 2020 ~> 5 - Sep - 2020
### Functions
**Tetris Game with React**
### Screenshot
### Tech-Stack
- React
- styled-components
- custom Hooks
### Deploy
1. Deploy with **surge.sh**:
- https://tetris.tinspham.info/
- http://tetris-game-sff.surge.sh/
2. Deploy with **Firebase**:
- https://tetris-game.tinspham.info/
- https://tetris-game-react-3a64e.web.app/
### Plan Of Action
1. **Initial project**
2. **setup react & tooling**
3. **setup hooks useInterval**
4. **Scaffolding/Initial components**
- Cell
- Display
- Stage
- StartButton
- Tetris
5. **Stage and Tetrominos**
- `createState`
- Tetrominos
- create shape of each element: `0(default), I, J, L, O, S, T, Z`
- `randomTetromino` function
6. **Styling with styled-components**
- StyledCell
- StyledTetris
- StyledStage
- StyledDisplay
- StyledStartButton
- import style to component
7. `usePlayer`: set Position tetromino of user current playing
8. `useStage`: '[stage, setStage]';
- `createStage`: when we restart the game, we need to create a clean stage for that
9. **Stage update and player movement**
- `movePlayer` function: move tetromino when user use `move` left/right function
- in `src/components/Tetris`:
- `startGame` function:
- `drop` function:
- `dropPlayer` function: move tetromino when user use `move` down function dropPlayer();
- `move` function: tracking keyCode of user typing on keyboard
- in `src/gameHelper`
- updatePlayerPos: set new position of tetromino
- resetPlayer: reset tetrominos when run `startGame` function
- in `src/hooks/useStage`
- `updateStage`
- First flush the stage
- Then draw the tetromino
- in `src/hooks/usePlayer`
- set tetromino is 0 when initial application
1. **Collision detection**
- `checkCollision` function:
- Check that we are on an actual Tetromino Cell
- Check that our move is inside the game areas height (y)
- Check that our move is inside the game areas width (x)
- Check that the cell we are moving is isn't set to clear
- Add checkCollision to `src/components/Tetris`
1. **Player RotationG**
- `rotate` function:
- Make the rows to become cols
- Reverse each row to get a rotated matrix
- `playerRotate` function
- Check when tetromino rotate in a collied: true
12. **Clear Rows**
- `sweepRows`
13. **drop with useInterval**
- copy `useInterval.js` hook created by Dan Abramov to `src/hooks`
- useInterval in `src/components/Tetris`
- Interval off when keyDown = DOWN
- Interval off when keyUp
14. **useGameStatus**
- in `src/hooks/useGameStatus.js`
- linePoints is [40, 100, 300, 1200]
- `calcScore`
- useEffect to tracking when rowsCleared
- Import useGameStatus to `src/components/Tetris`
- Increase level when player has cleared 10 rows
- Also increase speed
15. Optimize `src/components/Cell` re-render with (React.memo)
- Cell is re-render 240times when Stage change
- So im optimized with (React.memo)
16. Remove `console.log()`
17. Deploy
18. Write paper `README.md`
### Directory Structure
```
.
├── .gitignore
├── package.json
├── README.md
├── public
└── src
├── assets
├── fonts
└── img
├── components
├── styles
├── StyledCell.js
├── StyledDisplay.js
├── StyledStage.js
├── StyledStartButton.js
└── StyledTetris.js
├── Display
├── Stage
├── StartButton
├── Cell
└── Tetris
├── hooks
├── useGameStatus.js
├── useInterval.js
├── usePlayer.js
└── useStage.js
├── gameHelper.js
├── tetrominos.js
├── App.js
├── App.css
├── index.css
└── index.js
```
### Set up
Use the cmd line to clone repo to your computer
```
git clone https://github.com/tinspham209/tetris-game-react
```
Use the cmd line to install dependencies.
```
npm install
```
Run in cmd for start the dependencies server
```
npm start
```