https://github.com/bboydflo/use-tetris
tetris game implemented as a react/preact hook
https://github.com/bboydflo/use-tetris
Last synced: about 1 year ago
JSON representation
tetris game implemented as a react/preact hook
- Host: GitHub
- URL: https://github.com/bboydflo/use-tetris
- Owner: bboydflo
- License: mit
- Created: 2021-06-15T11:51:18.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-15T16:28:27.000Z (about 5 years ago)
- Last Synced: 2025-01-27T05:21:06.489Z (over 1 year ago)
- Language: TypeScript
- Size: 467 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tetris game logic implemented as a custom hook
This is a fun project with the sole purpose to learn new things. It is a work in progress. Currently there are some things missing:
1. add levels
2. increase speed (gravitation) for each level
3. simplify current hook using `useReducer` for the game logic
I've extracted this from another project which you can try here [https://florin-cosmin-tetris.netlify.app/](https://florin-cosmin-tetris.netlify.app/)
## How to use it
```bash
npm i use-tetris@latest -E
```
Then in your JavaScript/TypeScript code:
```tsx
import React from 'react'
import { render } from 'react-dom'
import { useTetris } from 'use-tetris'
// copied from: https://usehooks-typescript.com/react-hook/use-event-listener
import useEventListener from './use-event-listener'
const TetrisApp: React.FC = () => {
const {
tetrisState,
handleKey
} = useTetris()
// listen for keydown events
useEventListener('keydown', function(event) {
const keycode = (event as KeyboardEvent).keyCode as keyof typeof browserKeyCodeMap
const key = browserKeyCodeMap[keycode]
handleKey(key)
})
const { score, grid, piece, nextPiece, gameState } = tetrisState
return (
...
)
}
render(, document.querySelector('#root'))
```
This project was bootstrapped using [tsdx.io](https://tsdx.io)
If you want to get in contact with me you can always DM me on [twitter](https://mobile.twitter.com/CosminOnciu)