LeandroSQ / web-tetris

Modern version of Tetris made using JS, HTML and CSS

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.