react-simple-tetris

React Simple Tetris

Embed a game of Tetris in your React app!
Get support »

Report Bug · Request Feature · Original Repo

📦 Installation

• Using yarn: yarn add react-simple-tetris
• Using npm: npm i react-simple-tetris

📚 Demo

• Live demo: https://338.rocks/games/tetris

🤓 Usage

const React = require("react");
const Tetris = require("react-simple-tetris");

const App = () => (
	<div>
		<h1>Tetris</h1>
		<Tetris
			keyboardControls={{
				// Default values shown here. These will be used if no
				// `keyboardControls` prop is provided.
				down: "MOVE_DOWN",
				left: "MOVE_LEFT",
				right: "MOVE_RIGHT",
				space: "HARD_DROP",
				z: "FLIP_COUNTERCLOCKWISE",
				x: "FLIP_CLOCKWISE",
				up: "FLIP_CLOCKWISE",
				p: "TOGGLE_PAUSE",
				c: "HOLD",
				shift: "HOLD",
			}}
		>
			{({
				HeldPiece,
				Gameboard,
				PieceQueue,
				points,
				linesCleared,
				state,
				controller,
			}) => (
				<div>
					<HeldPiece />
					<div>
						<p>Points: {points}</p>
						<p>Lines Cleared: {linesCleared}</p>
					</div>
					<Gameboard />
					<PieceQueue />
					{state === "LOST" && (
						<div>
							<h2>Game Over</h2>
							<button onClick={controller.restart}>
								New game
							</button>
						</div>
					)}
				</div>
			)}
		</Tetris>
	</div>
);

include some styles

.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;
}

📄 License

Copyright © 2022 Barış DEMİRCİ.

Distributed under the GPL-3.0 License. See LICENSE for more information.

🧦 Contributing

Feel free to use GitHub's features.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/my-feature)
3. Run prettier and eslint (npm run format && npm run lint)
4. Commit your Changes (git commit -m 'my awesome feature my-feature')
5. Push to the Branch (git push origin feature/my-feature)
6. Open a Pull Request

🔥 Show your support

Give a ⭐️ if this project helped you!

📞 Contact

• Mail: [e-mail]
• Discord: https://discord.gg/BjEJFwh
• Instagram: https://www.instagram.com/ben_baris.d/

✨ Special Thanks

• Matt Brandly - Creator of react-tetris