Grid Tetris

A Tetris clone using CSS to render graphics.

Play a live build here!

🕹️ Controls

Action	Key
Move Horizontally	Left & Right Arrow Keys
Move Down	Down Arrow Key
Immediate Drop	Up Arrow Key
Rotate Block	Z or X

Options	Key
Toggle Pause	P or click Pause Button
Toggle Target	T or click Target Button

Technologies Used

Installation

To build and run the project in a local server:

npm install
npm run serve

or

yarn install
yarn serve

Feature List

• MVP Gameplay
• Pieces are immediately dropable
• Show next piece
• Hold a piece to the side
• Pieces progressively fall at a faster rate
• High Score Board
• Detect & display double, triple, quadruple row clears
• Audio (SFX, Music)

Why

• This project was made in under a week for my first General Assembly software project
• I wanted to challenge myself to apply transformations to shapes and detect collisions on a grid
• Use event polling in the DOM vs. the more typical event-driven programming
• Try to understand DOM rendering & animation limitations
• Make a game from scratch without a framework

Wireframe Draft

Next Steps

• PvP online battle Tetris?