tskgungun/css-tetris-3d

Tetris-like code experiment in the CSS 3D space.

CSS Tetris 3D

🚧 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.

Demo

Live on GitHub Pages.

Running locally as usual — clone && npm i && npm start.

Configured Inputs

Input	Event
Up / W	Move (or rotate) on X axis
Down / S	Move (or rotate) on X axis backwards
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

GUI

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.

Outcome

• 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.