About The Project

This project is a complete, playable implementation of the classic Tetris game, built from scratch using pure (vanilla) JavaScript, HTML, and CSS. The primary goal was to demonstrate core programming logic, state management, and rendering skills by recreating a well-known game. All game mechanics, from piece rotation to collision detection and scoring, are handled on the client-side.

Tech Stack

Key Features

• **Classic Tetris Gameplay:** Full control to move, rotate, and drop tetrominoes.
• **Efficient Rendering:** Uses the HTML Canvas API for smooth, efficient game rendering.
• **Real-time Collision Detection:** Robust logic to handle collisions with the game board and other pieces.
• **Automatic Line Clearing & Scoring:** The game automatically detects and clears completed lines, updating the player's score.
• **Next Piece Preview:** A side panel shows the upcoming piece, allowing for strategic planning.

Challenges & Solutions

The main challenge was to create an efficient, non-blocking game loop to handle piece movement, user input, and screen re-draws continuously without performance issues. This was solved by using `requestAnimationFrame` for the main game loop, which ensures that rendering is synchronized with the browser's refresh rate. The game state (board, current piece, score) is managed in a central set of variables, and the canvas is cleared and redrawn on every frame, providing a smooth gameplay experience.