🚧 Work In Progress...ish ヾ(`ヘ ´)ﾉﾞ
This is an unfinished Tetris game implied experiment with CSS 3D view and belonging perspective settings.
Tetromino aka block movement is implemented as expected but rotation only on the Z axis is enabled by default. Collision detection in 3D space goes beyond the original purpose of this thing.
Live on GitHub Pages.
Running locally as usual — clone && npm i && npm start.
| Input | Event |
|---|---|
| Left / A | Move (or rotate) on Y axis |
| Right / D | Move (or rotate) on Y axis backwards |
| Q | Move on Z axis backwards (for test 👻) |
| E | Move on Z axis (for test 👻) |
| (left?) SHIFT or ALT move key | Toggle rotation |
| SHIFT Mouse move | Perspective follows mouse cursor |
| Mouse scroll | Change perspective |
| Both mouse buttons | Pointless perspective underload |
For other tweaks please find the implemented dat.GUI runtime. The most intriguing state parameters are connected. Probably only these toggleables below are nebulous.
| Property | State changes |
|---|---|
live |
Moving tetrominos automatically like a game. |
screwAxisX |
Enable 3D rotation on X axis. |
- Fun and easy to work with, spectacular with the combination of animation keyframes without any supplementary knowledge.
- Performance differences are visible — especially with unoptimised code — within different CSS engines.
- Feels basic compared to WebGL. Aspire to post‒ Flash／jQuery image carousel fallout but I don't really see any real-life consumption on this level. However, there is potential to bring A-Frame like 3D markup for messes.