3D Tetris

A 3D version of Tetris written in Typescript using WebGl. This was originally written for the GFX 25S course of University of Vienna.

You can play the game, by cloning the repo and then compiling and running the site as described in the Running the site section.

Gameplay

The game plays similar to a normal tetris game, with the differences, that there are more pieces (the tetracubes as defined here) and you have to fill an entire horizontal 2D slice for the pieces to disappear. The scoring system uses the original BPS scoring system because levels aren't implemented. Tetracubes can furthermore be rotated around all 3 axes.

There are some other notable features:

• The game can be paused by pressing p
• You can display the complete grid (including parts that might obstruct the view) by pressing g
• You can switch out the cubes that the tetracubes consist of for cylinders by pressing f. This has no use other than showing differences in shaders better
• You can also select some of these options in the start menu, along with the size of the playing field
• Every tetracube has a 1/10 chance of being textured. This has also no practical effect
• A complete list of controls can be found on the site under the Keybinds collabsible or in the Controls section

Controls

Movement

• p: (un)pauses the game
• -> or d: move the piece in the positive x direction
• <- or a: move the piece in the negative x direction
• /\ or w: move the piece in the negative z direction
• \/ or s: move the piece in the positie z direction
• space: let the piece fall instantly to the ground

Note

Movement will always be with respect to the global coordinate system and is NOT view-dependent. You can display the global coordinate system with the axis overlay

Rotation

• x: rotate counterclockwise around x axis
• X: rotate clockwise around x axis
• y: rotate counterclockwise around y axis
• Y: rotate clockwise around y axis
• z: rotate counterclockwise around z axis
• Z: rotate clockwise around z axis

Note

Rotation will always be with respect to the global coordinate system and is NOT view-dependent. You can display the global coordinate system with the axis overlay

Viewport

• i: rotate counterclockwise around x axis
• k: rotate clockwise around x axis
• j: rotate counterclockwise around y axis
• l: rotate clockwise around y axis
• u: rotate counterclockwise around z axis
• o: rotate clockwise around z axis
• + or scroll up: zoom in
• - or scroll down: zoom out
• clicking and dragging mouse: rotate the viewport around the y axis

Miscellaneous

• g: toggle full grid (full grid will show all sides of the grid)
• v: toggle orthographic/perspective view
• f: switch the used shader between phong and gouraud shading
• v: toggle between cubes/cylinders
• m: toggle music
• #: toggle axis overlay; Axis overlay shows the axes of the coordinate system overlayed over the active piece which makes movement and rotation easier

Running the site

Install all packages and build the site:

pnpm install
pnpm run build

Then you should be able to run the site by just starting an http server in the dist directory:

cd dist
python -m http.server 8080
# or
cd dist
live-server

Ive used primarily the npm live-server 1.2.2 as a webserver, but also tested with the python http.server I have tested the site with Mozilla Firefox 136.0.3 browser.

Credit

• As the only external library, I used gl-matrix for vector and matrix operations

• I used the following ressources for the textures with just minimal alignment changes:

  • https://stock.adobe.com/at/images/wooden-crate-front-view-cargo-box-texture-3d-rendering/199149984
  • https://www.pinterest.com/pin/89157267620469807/

• Music by https://github.com/rtfmbrah