Modern rewrite of my first-year Bachelor's project. Rebuilding a fun project to create a production-ready game playable anywhere, anytime, while showcasing clean architecture and modern development practices. Have a break, play tetris !
If you enjoy this game, please consider supporting the project. Your support helps me dedicate more time and energy to improve and expand the project.
This project is a modern TypeScript rewrite of my first-year Bachelor's group project. It transforms a simple academic project into a production-ready game that demonstrates:
- Clean architecture with separation of concerns
- Modern development practices and patterns
- TypeScript mastery with strict mode
- Professional code organization and testing
- Responsive design and mobile support
- 🎮 Two Game Modes - Classic (infinite) and Ultra (2-minute challenge)
- 👻 Ghost Piece - See where your piece will land
- 💾 Hold System - Save a piece for later use
- 🎨 4 Themes - Classic, Dark, Neon, Retro
- 🌍 i18n Support - French and English with extensible system
- 📱 Fully Responsive - Adaptive touch controls with gesture support for mobile
- 🎵 Audio System - Background music and sound effects
- 📊 FPS Counter - Real-time performance monitoring
- 🏆 High Scores - Persistent leaderboard per game mode
- TypeScript 5.x - Strict mode for type safety
- Vite 6.x - Fast build tool with HMR
- Vitest - Unit testing framework
- SCSS - CSS preprocessor with modules
- Canvas API - Game rendering
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone https://github.com/KevOneRedOne/Simplistic-Tetris.git cd Simplistic-Tetris -
Install dependencies
npm install
-
Start development server
npm run dev
npm run dev # Start dev server with HMR
npm run build # Build for production
npm run preview # Preview production build
npm test # Run unit tests
npm run test:ui # Run tests with UI
npm run lint # Lint code
npm run format # Format code with Prettier| Key | Action |
|---|---|
| ← → | Move left/right |
| ↑ | Rotate piece |
| ↓ | Soft drop |
| Space | Hard drop |
| Shift | Hold piece |
| Esc or P | Pause game |
| Enter | Restart game |
- Swipe left/right ⬅️➡️: Move piece
- Swipe down ⬇️: Soft drop
- Swipe up ⬆️: Rotate piece
- Single tap 👆: Rotate piece
- Double tap 👆👆: Hard drop
📱 Full mobile support with adaptive swipe sensitivity! See Mobile Features Guide for details.
- 🎮 Classic Mode: Traditional Tetris. Play until game over. Clear lines to level up.
- ⚡ Ultra Mode: Time attack. Score maximum points in 2 minutes!
🔴 Before (V1 - Vanilla JS) - Click to view diagram
graph TD
A[index.html] --> B[main.js]
B --> C[Piece.js]
B --> D[tetrominoes.js]
B --> E[fps.js]
B --> F[styles.css]
C --> G[Mixed Logic:<br/>Game + Rendering + UI]
D --> G
style G fill:#f5b5b5,stroke:#c77,stroke-width:2px,color:#333
style B fill:#f4d190,stroke:#d6a86f,stroke-width:2px,color:#333
style C fill:#f4d190,stroke:#d6a86f,stroke-width:2px,color:#333
Characteristics:
- ❌ Vanilla JavaScript (no typing)
- ❌ Mixed concerns in single files
- ❌ No test coverage
- ❌ Basic CSS styling
- ❌ Manual FPS counter
- ❌ French only
🟢 After (V2 - TypeScript Modern) - Click to view diagram
graph TD
A[index.html] --> B[main.ts]
B --> C[Core Layer]
B --> D[Rendering Layer]
B --> E[UI Layer]
B --> F[Input Layer]
B --> G[i18n Layer]
C --> C1[GameEngine.ts]
C --> C2[Board.ts]
C --> C3[Tetromino.ts]
C --> C4[CollisionDetector.ts]
C --> C5[ScoringSystem.ts]
C --> C6[GameModes.ts]
D --> D1[CanvasRenderer.ts]
D --> D2[AnimationEngine.ts]
D --> D3[ThemeManager.ts]
E --> E1[UIManager.ts]
E --> E2[AudioManager.ts]
E --> E3[HighScoreManager.ts]
E --> E4[FPSCounter.ts]
F --> F1[InputHandler.ts]
G --> G1[i18n.ts]
G --> G2[locales/]
H[Tests] --> C
style C fill:#8fc994,stroke:#5a9,stroke-width:2px,color:#fff
style D fill:#7ba4db,stroke:#4a8ad6,stroke-width:2px,color:#fff
style E fill:#d9a7c7,stroke:#c77aa4,stroke-width:2px,color:#fff
style F fill:#f4c790,stroke:#d6a86f,stroke-width:2px,color:#333
style G fill:#c9a0dc,stroke:#a67bc8,stroke-width:2px,color:#fff
style H fill:#8b9dc3,stroke:#6a7fa8,stroke-width:2px,color:#fff
Characteristics:
- ✅ TypeScript strict mode
- ✅ Clean separation of concerns
- ✅ Unit tests (Vitest)
- ✅ Modern SCSS architecture
- ✅ Integrated FPS counter
- ✅ Multi-language (FR/EN)
- ✅ Optimized Vite build
- Separation of Concerns - Game logic, rendering, and UI are independent
- Testability - Pure functions and dependency injection
- Immutability - Game state updates create new objects
- Event-Driven - Loose coupling through event emitters
- SOLID Principles - Single responsibility, open for extension
- 🏭 Factory Pattern (Tetromino creation)
- 👁️ Observer Pattern (Event-driven game events)
- 🔒 Singleton Pattern (i18n, ThemeManager)
- 🎯 Strategy Pattern (Game modes)
- 📦 Module Pattern (Organized file structure)
- 🎵 Music Setup - How to add custom background music
- 📱 Mobile Features - Complete guide to touch controls, responsive design, and mobile optimization
# Run all tests
npm test
# Run tests with UI
npm run test:ui
# Generate coverage report
npm run test:coverage
# View coverage HTML
open coverage/index.html| Test Type | Files | Tests | Coverage |
|---|---|---|---|
| Unit Tests | 7 | 170 | 30-95% |
| E2E Tests | - | Planned | - |
Coverage Highlights:
- ✅ GameEngine: 77.18% (36 tests)
- ✅ UIManager: 95.72% (43 tests)
- ✅ AnimationEngine: 96.22% (25 tests)
- ✅ InputHandler: 74.41% (22 tests)
- ✅ Board: 66.34% (13 tests)
- ✅ Tetromino: 82.5% (15 tests)
- ✅ ScoringSystem: 38.88% (16 tests)
Tested Functionality:
- ✅ Board state management and collision detection
- ✅ Game engine orchestration and event system
- ✅ Scoring calculations and level progression
- ✅ Tetromino rotation and movement
- ✅ Input handling (keyboard and touch)
- ✅ UI management and modal system
- ✅ Animation system and particle effects
See Testing Guide for detailed information.
The site is set up for search engines and crawlers:
- Meta & Open Graph: Title, description, and social cards are set in
index.html; align with the main tagline when changing copy. - robots.txt (
public/robots.txt): Allows indexing of the app and static assets; disallows/reports/and/assets/(build artifacts). Points to the sitemap. - sitemap.xml (
public/sitemap.xml): Single-page sitemap with alternates and image entries. Updatelastmodwhen you make meaningful content or SEO changes. - Structured data: JSON-LD for
VideoGame,WebApplication,WebSite, andBreadcrumbListis included in the main HTML.
This is a portfolio project, but suggestions and feedback are welcome! Feel free to open an issue or submit a pull request.
- 🐛 Report Bugs: Use the bug report template
- 💡 Suggest Features: Use the feature request template
- 🔧 Submit PRs: Follow the pull request template
For more details, see our Contributing Guide.
If you enjoy this game, consider supporting the project:
- ☕ Buy me a coffee - Support with a small donation
- 🐛 Report an issue - Help improve the game
- 🔧 Contribute - Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
This project is a modern rewrite of my first-year Bachelor's group project. The original V1 project was built with the help of the following resources:
- Javascript Tetris tutorial by CodeExplained
- JSON tutorial by James Q Quick
- MDN Web Docs - JavaScript documentation
- DevDocs - JavaScript API documentation
- W3Schools - JavaScript tutorials
- Lyon YNOV Campus's Object and DOM tutorials
- Chrono JavaScript tutorial by Alsacréations
- [Best-README-Template] (https://github.com/othneildrew/Best-README-Template) by othneildrew
The original V1 project was a group effort with:
- Me (KevOneRedOne)
- Djoudi Yanis (Tadayoshi123)
- Moren Yohan (BoSswosile)
⭐ Star this repo if you found it interesting or useful for your learning journey!