React Tetris Game

A modern implementation of the classic Tetris game built with React, featuring smooth animations, and sound effects. This project demonstrates React hooks usage, game state management.

🎮 Features

• Classic Tetris gameplay mechanics
• Smooth piece movement and rotation
• Next piece preview
• Score tracking
• Background music and sound effects
• Pause/Resume functionality
• Game Over state with restart option
• Responsive design with beautiful UI

🛠️ Tech Stack

• React - Frontend library for building user interfaces
• Vite - Next generation frontend tooling
• Tailwind CSS - Utility-first CSS framework
• ESLint - Code linting and style enforcement

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn package manager

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/tetris.git
   cd tetris

2. Install dependencies:

   npm install
   # or
   yarn

3. Start the development server:

   npm run dev
   # or
   yarn dev

4. Open http://localhost:5173 in your browser

🎯 Game Controls

• ← → : Move piece left/right
• ↑ : Rotate piece
• ↓ : Move piece down
• P : Pause/Resume game

🏗️ Project Structure

tetris/
├── public/
│   └── sound/          # Game sound effects
├── src/
│   ├── components/     # React components
│   ├── styles/         # CSS styles
│   ├── assets/         # Static assets
│   └── App.jsx         # Root component
├── package.json        # Dependencies and scripts
└── vite.config.js      # Vite configuration

🎲 Game Components

TetrisGame.jsx

Main game component that handles:

• Game board state management
• Piece movement and rotation
• Collision detection
• Score tracking
• Game loop
• User input handling

Key Game Mechanics

1. Board Management

   • 10x20 grid using 2D array
   • Null cells for empty spaces
   • Color values for filled spaces

2. Piece Movement

   • Horizontal movement with collision detection
   • Downward movement with floor/piece collision
   • Rotation with wall kick system

3. Line Clearing

   • Detection of filled rows
   • Score calculation

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 Development Guidelines

1. Code Style

   • Follow ESLint configuration
   • Use functional components and hooks
   • Maintain consistent naming conventions

2. State Management

   • Use React hooks for state management
   • Keep game logic separate from UI components
   • Implement proper cleanup in useEffect

3. Testing

   • Write unit tests for game logic
   • Test component rendering and interactions
   • Ensure game mechanics work as expected

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Original Tetris game by Alexey Pajitnov
• React and Vite communities
• Contributors and maintainers

---

Made with ❤️ by Muhammad Anshar