Tetris Game - HTML CSS JavaScript Project

📌 Project Description:

This Tetris Game is a classic tile-matching puzzle game built using HTML, CSS, and JavaScript. It mimics the mechanics of the original Tetris game: colored blocks (tetrominoes) fall from the top of the game board, and the player must rotate and move them to complete full rows. When a row is filled, it gets cleared, and the player earns points.

The game includes:

• A playable game grid

• Tetromino blocks (I, O, T, S, Z, J, L)

• Rotation, movement (left, right, down), and instant drop

• Line-clearing mechanic

• Score tracking

• Game over condition

• Simple, responsive UI with keyboard controls

⚙️ Project Features:

• Vanilla JavaScript logic — no frameworks

• Keyboard controls (Arrow keys or WASD)

• Real-time game updates with requestAnimationFrame or setInterval

• Scoring system based on cleared lines

• Clean and responsive UI with HTML & CSS

• Can be deployed on any static host (GitHub Pages, Netlify, etc.)

🕹️ How to Play:

Controls:

• 🔼 Rotate: Up Arrow / W

• ◀️ Move Left: Left Arrow / A

• ▶️ Move Right: Right Arrow / D

• 🔽 Move Down (Soft Drop): Down Arrow / S

• ⏬ Instant Drop: Spacebar (optional enhancement)

Objective:

• Arrange falling tetromino blocks to form complete horizontal lines.

• When a line is completed, it disappears and earns points.

• The game ends when blocks reach the top of the board.

Tips:

• Plan your moves and use rotation wisely.

• Don’t leave gaps or stacked blocks.

• Speed increases as your score rises (optional feature).

🧠 Skills You’ll Learn:

• JavaScript game loops and timing

• DOM manipulation for drawing the grid

• Handling keyboard events

• Managing game state (score, grid, tetrominoes)

• CSS grid/flexbox layout