A classic Tetris implementation with game built with plain JavaScript and DOM, featuring dynamic tilemap backgrounds and focusing on performance and smooth gameplay.
You can play it here
- 60 FPS Gameplay: Optimized rendering using
requestAnimationFrameand delta timing for consistent frame rates. - Dynamic Tilemap Backgrounds: Three unique animated background themes that enhance visual experience
- Circuit Board: Tech-inspired pattern with glowing elements
- Matrix Rain: Animated digital rain effect with flickering characters
- Cyberpunk City: Urban skyline with neon lights and traffic effects
- Smooth Controls: Responsive keyboard inputs with key repeat support for continuous movement.
- Pause Menu:
- Resume current game
- Restart game
- Quit to main menu
- Scoreboard:
- Game timer (MM:SS format)
- Score tracking with level multipliers
- Lives counter (❤️ system)
- Level progression (up every 10 lines)
- Lines cleared counter
- Game Mechanics:
- 7 classic Tetris pieces
- Piece rotation
- Hard drop (space bar)
- Next piece preview
- Level-based speed increases
- Three-life system
- Performance Optimized: Minimal DOM layers, targeted cell updates, and efficient tilemap rendering
- Story Mode: A storyline to engage players and make it interesting
- Leaderboard: A board to show the scores of previous players
- Responsive Design: Adapts to different screen sizes with scalable tilemaps
- ← → Arrow Keys: Move piece horizontally
- ↑ Arrow Key: Rotate piece
- ↓ Arrow Key: Soft drop
- Space: Hard drop
- P: Pause/Resume
- Enter: Start/Restart game
- Circuit Button: Switch to Circuit Board background
- Matrix Button: Switch to Matrix Rain background
- City Button: Switch to Cyberpunk City background
- Toggle Background: Show/hide tilemap backgrounds
- Clear lines by filling horizontal rows
- Earn more points by clearing multiple lines at once
- Avoid stacking pieces to the top
- Game ends after losing 3 lives
- Speed increases with each level (every 10 lines)
- Switch background themes for visual variety
- Background automatically changes when starting new games
- Points:
- 1 line: 40 × level
- 2 lines: 100 × level
- 3 lines: 300 × level
- 4 lines: 1200 × level
- Level Up: Every 10 cleared lines
- Lives: Lose one life when pieces stack to the top
- Frame timing using
requestAnimationFrame - Delta time calculations for consistent movement
- Selective DOM updates (only modified cells)
- Matrix-based collision detection
- Minimal object creation during gameplay
- Tilemap Optimizations:
- Viewport culling (only visible tiles rendered)
- GPU acceleration with CSS transforms
- Efficient tile pattern repetition
- Responsive tile scaling
- Reduced paint operations
- Vanilla JavaScript (no frameworks)
- Pure DOM manipulation (no Canvas)
- CSS Grid for board layout
- Custom Tilemap Engine: Built from scratch without tile editors
- Modern JavaScript features (ES6+)
- CSS animations and transforms for visual effects
- TilemapEngine: Core rendering engine with performance optimizations
- Pattern-based Generation: Procedural tilemap creation using mathematical patterns
- Dynamic Sizing: Automatically adapts to screen dimensions
- Animation Support: Smooth scrolling and visual effects
- Circuit Board: Electronic/tech aesthetic with pulsing elements
- Matrix Rain: Digital falling code with animated opacity
- Cyberpunk City: Urban landscape with glowing windows and traffic lights
- Only renders tiles visible in viewport
- Uses CSS
will-changefor GPU acceleration - Minimal DOM reflows and repaints
- Efficient memory usage with tile reuse
- Clone repository and cd into the directory
git clone https://learn.zone01kisumu.ke/git/moonyango/make-your-game-different-maps
cd make-your-game-different-maps- Run the program
make- Open your browser with link
http://localhost:8080├── cmd/
│ └── main.go # Go server implementation
├── internals/
│ └── handlers.go # HTTP handlers
├── static/
│ ├── css/
│ │ ├── tetris.css # Main game styling
│ │ ├── error.css # Error page styling
│ │ └── tilemap.css # Tilemap visual styles
│ └── js/
│ ├── main.js # Core game loop and initialization
│ ├── gameState.js # Game state management
│ ├── gameLogic.js # Game mechanics and rules
│ ├── board.js # Game board creation
│ ├── shapes.js # Tetris piece definitions
│ ├── ui.js # UI updates and display
│ ├── events.js # Input handling and events
│ ├── gameMode.js # Story mode content
│ ├── tilemap.js # Tilemap rendering engine
│ └── tilemapData.js # Tilemap patterns and data
└── index.html # Main game interface
- Pre-calculated piece matrices
- Object pooling for game pieces
- Batch DOM updates
- Efficient collision detection
- Throttled event handling
- Tilemap-specific:
- Visibility culling for off-screen tiles
- Pattern repetition instead of large arrays
- CSS-based animations over JavaScript
- Minimal layer creation and compositing
- Modern browsers supporting ES6+
- CSS Grid and Flexbox support
requestAnimationFramesupport- CSS transforms and animations
- ResizeObserver API for responsive tilemaps
This project is licensed under the MIT License - see the LICENSE file for details.
- Zone01 Kisumu for project support
- All contributors and testers
- Classic Tetris for game mechanics inspiration
For additional information or support, please open an issue in the repository.
Happy gaming with dynamic backgrounds! 🎮✨