Building Tetris in Your Browser's Console with SvelteKit

I'm excited to share my latest project: Tetris Console Edition - a unique implementation of the classic game that runs entirely in your browser's developer console! Built with SvelteKit and TypeScript, this project demonstrates how to create an engaging game experience using unconventional rendering techniques.

Game Features

• 🎮 Full Tetris gameplay in the console
• ⚙️ Customizable settings (board size, speed, etc.)
• 👻 Ghost piece visualization
• 📊 Score tracking and history
• ⏸️ Pause/Resume functionality

Technical Implementation

Console-Based Rendering

The game uses the browser's console as its display, with custom characters for different game elements:

const EMPTY = '⬛';
const PLACED = '🟪';
const ACTIVE = '🟨';
const GHOST = '⬜';
const BORDER = '🟦';

State Management

The game utilizes SvelteKit's latest reactivity features for state management:

let gameState = $state({
    started: false,
    paused: false,
    over: false,
    score: 0,
    board: [],
    currentPiece: {
        shape: [],
        row: 0,
        col: 0,
        name: ''
    }
});

Game Controls

Players can control the game using standard keyboard inputs:

• ← → : Move piece
• ↑ : Rotate
• ↓ : Soft drop
• Space : Hard drop
• P : Pause/Resume

Performance Optimizations

• RequestAnimationFrame for smooth rendering
• Efficient collision detection
• Optimized piece movement and rotation
• Score calculation with bonus points for multiple lines

Learning Outcomes

Building this project taught me several valuable lessons:

1. Creative UI Solutions: Using the console as a display medium
2. State Management: Handling complex game state with Svelte stores
3. Performance: Optimizing render cycles for smooth gameplay
4. TypeScript Integration: Leveraging type safety for game logic

Try It Yourself!

The project is open source and available on GitHub. To run it locally:

bun install
bun run dev

Then open your browser's DevTools (F12) and start playing!

Conclusion

This project showcases how modern web technologies can be used in creative ways to build unique gaming experiences. While the console might not be the conventional choice for game rendering, it provides an interesting challenge and demonstrates the flexibility of web platforms.

Check out the live demo or source code to explore more!