/web-tetris

Modern version of Tetris made using JS, HTML and CSS

Primary LanguageJavaScriptMIT LicenseMIT

web-tetris

Tetris

Tetris game made with JavaScript, HTML and CSS.

Live demo

How to play

Keyboard

Key Icon Description
Arrow up Rotate Clock-wise
Arrow left Move left, if oneshot instantly moves. Allowing for hypertapping
Arrow right Move right, if oneshot instantly moves. Allowing for hypertapping
Arrow down Accelerates vertical fall
Enter Rotate Anti-Cock-wise
Space Hard drop
Esc Pause game
Shift Faster horizontal movement when pressed alongside Arrow Left or Arrow Right
M Hold current piece

Game pad

The game supports any GamePad, being Wireless, wired, Xbox, Generic or PS-X.

Button Icon Description
A Rotate Clock-wise
X Rotate Anti-Cock-wise
B Hard drop
Y Hold current piece
Left Pad Move left, if oneshot instantly moves. Allowing for hypertapping
Right Pad Move right, if oneshot instantly moves. Allowing for hypertapping
Down Pad Accelerates vertical fall
Menu Pause game
LT or RT Faster horizontal movement when pressed alongside Left Pad or Right Pad

Features

  • GamePad API
  • WebAudio API
    • Pitch manipulation
    • Looping sounds
    • Audio decoding from array buffer
  • Localization
    • Available in:
      • Português - Brasil
      • English
  • Fetch API
  • Double buffering canvas
  • HighDPI (Retina compatible) canvas
  • Modern JavaScript (ES2021)
    • Modules
    • Classes
    • Private fields
  • Follows Official Tetris Guidelines
  • Animations
  • Particle system
  • Level system
  • State machine
  • Start menu, Pause and Game over screens

Levels

In my version of tetris, not only colors and speed are modified when a new level is reached, the shape of the board is also affected. This introduces a new dimension where not only you need muscle memory, speed and dexterity to play, but you will also need to adapt and pay attention visually to these changes. This in my opinion turns the game much more fun for those, like myself, that aren't Tetris masters and cannot go in impossible speeds, this adds the adaptability challenge by inviting your vision and brain to change.

Level 1

- Flat colors
- Squircle

Level 2

- Flat colors
- Square

Level 3

- Dracula colors
- Squircle outline

Level 4

- Monokai colors
- Circle

Level 5

- Material colors
- Hexagon

Changelog

v2.0.0

  • Complete overhaul and refactor of the game
  • Added UI elements inside the canvas
  • Better fixed game loop
  • Added hard drop system
  • Added holding piece system
  • Added peeking the Random bag
  • Better visuals
  • Added better responsiveness, for future mobile support
  • Added support for the GamePad API
  • Added Localization
  • Added shape shifting logic for each level

v1.0.0

TODO

[] - Add more levels

[] - Mobile support

[] - Settings menu

[] - In-game controls information

Acknowledgements

ThoseAwesomeGuys Prompts for the Keyboard and GamePad icons.

Zeh Jose Fernando Baldo Carneiro for the Font (NokiaFC22) used on this game.