Check out this React Cosmos example for a newer, Redux version of Flatris.
Take a trip down memory lane with one the classics and play some Flatris!
Flatris is a demo app for the Cosmos project, built using React components.
The purpose of this demo is to prove that data can drive a user interface, even
one as complex as a game. A snapshot of the game state can be generated at any
time by calling Flatris.serialize() in the browser console of the demo page.
This will reveal the data structures on top of which the game is built.
For more insights check out the source code and Cosmos.
Thanks @paulgergely for the flat Tetris design!
Building block for Tetriminos and the grid of the Well, occupying a 1x1 square block. The only configurable property square blocks have is their color.
A Tetromino is a geometric shape composed of four squares, connected orthogonally. Read more at http://en.wikipedia.org/wiki/Tetromino
Isolated matrix for the landed Tetriminos inside the Well.
A rectangular vertical shaft, where Tetriminos fall into during a Flatris game. The Well has configurable size and speed. Tetrimino pieces can be inserted inside the well and they will fall until they hit the bottom, and eventually fill it. Whenever the pieces form a straight horizontal line it will be cleared, emptying up space and allowing more pieces to enter afterwards.
The game panel contains:
- The next Tetrimono to be inserted
- The score and lines cleared
- Start or pause/resume controls
It is displayed on the right side of the game.
Information panel for the Flatris game/Cosmos demo, shown in between game states.
The Tetris game was originally designed and programmed by Alexey Pajitnov. It was released on June 6, 1984 and has since become a world-wide phenomenon. Read more about the game at http://en.wikipedia.org/wiki/Tetris
Render a Flatris instance next to its prettified, serialized state.
Persist Flatris state with local storage.
npm install
node_modules/.bin/webpack