https://github.com/brandly/react-tetris
:video_game: by popular demand
https://github.com/brandly/react-tetris
hacktoberfest
Last synced: over 1 year ago
JSON representation
:video_game: by popular demand
- Host: GitHub
- URL: https://github.com/brandly/react-tetris
- Owner: brandly
- License: mit
- Created: 2014-12-03T07:30:48.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2024-09-21T05:55:28.000Z (almost 2 years ago)
- Last Synced: 2025-04-02T04:05:30.739Z (over 1 year ago)
- Topics: hacktoberfest
- Language: TypeScript
- Homepage: https://brandly.github.io/react-tetris/
- Size: 1.73 MB
- Stars: 140
- Watchers: 4
- Forks: 69
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-tetris
> Embed a game of Tetris in your React app
```shell
$ npm install --save react-tetris
```
[view demo](https://brandly.github.io/react-tetris/)
## usage
```js
const React = require('react');
const Tetris = require('react-tetris');
const App = () => (
Tetris
{({
HeldPiece,
Gameboard,
PieceQueue,
points,
linesCleared,
state,
controller
}) => (
Points: {points}
Lines Cleared: {linesCleared}
{state === 'LOST' && (
Game Over
New game
)}
)}
);
```
include some styles
```css
.game-block {
margin: 0;
padding: 0;
width: 1.5em;
height: 1.5em;
border: 1px solid #ddd;
}
.piece-i {
background-color: #ec858b;
}
.piece-j {
background-color: #f1b598;
}
.piece-l {
background-color: #f8efae;
}
.piece-o {
background-color: #b5a677;
}
.piece-s {
background-color: #816e56;
}
.piece-t {
background-color: #b77c72;
}
.piece-z {
background-color: #e3be58;
}
.piece-preview {
background-color: #eee;
}
```
## dev
```shell
$ npm run build
$ npm run watch
$ npm test
```