Have you ever wanted to bring your creativity to life inside Reddit? With Reddit's Devvit framework, you can build interactive experiences for users directly within the platform. In this blog, I’ll share how I created Plumbi, a simple yet addictive puzzle game where players connect pipe pieces to let water flow.
Plumbi combines the fun of puzzle-solving with Reddit's community-driven ecosystem, providing a seamless gaming experience using Devvit and Redis for data storage.
What is Plumbi?
Plumbi is a level-based puzzle game where users must rotate and align pipe pieces on a grid to create a continuous path for water.
The game tracks progress, scores, and completion times, letting users compete with each other on a leaderboard. It’s lightweight, accessible, and designed to integrate directly into Reddit posts and comments.
PLAY THE GAME HERE Plumbi game
Why Devvit?
Reddit's Devvit framework allows developers to create apps and interactive panels that work seamlessly within the Reddit platform. For Plumbi, Devvit provided:
Panel Support: To create the game interface.
User Interaction: To handle inputs like rotating pipe pieces.
Seamless Integration: Making the game available within Reddit posts, keeping users engaged without leaving the platform.
How I Built Plumbi
1. Setting Up the Devvit Environment
To get started with Devvit, I followed the official documentation to set up my development environment:
Installed the Devvit CLI.
npm install -g devvit
2. Game Logic
The core of Plumbi revolves around managing a grid of pipe pieces. Here’s how I implemented it:
Grid Representation: The game grid is a 2D array where each cell represents a pipe piece with properties like type (straight, curved) and orientation.
const [gameBoard, setGameBoard] = useState<EmptyPipe[][]>(() => {
return initializeGameBoard(currentLevelIndex);
});
Pipe Rotation: Each pipe can rotate in 90-degree increments. Clicking on a piece triggers a rotation function:
export function rotatePipe(pipeType: EmptyPipe): EmptyPipe {
switch (pipeType) {
case EmptyPipe['═']:
return EmptyPipe['║'];
case EmptyPipe['║']:
return EmptyPipe['═'];
case EmptyPipe['╔']:
return EmptyPipe['╗'];
case EmptyPipe['╗']:
return EmptyPipe['╝'];
case EmptyPipe['╚']:
return EmptyPipe['╔'];
case EmptyPipe['╝']:
return EmptyPipe['╚'];
case EmptyPipe['╠']:
return EmptyPipe['╦'];
case EmptyPipe['╣']:
return EmptyPipe['╩'];
case EmptyPipe['╦']:
return EmptyPipe['╣'];
case EmptyPipe['╩']:
return EmptyPipe['╠'];
default:
return pipeType; // For pipes that don't rotate (like '╬')
}
}
Path Validation: A simple traversal algorithm checks if water can flow from the start to the end point.
`
const checkForPath = (map: string[], x: number, y: number, direction: string, visited: boolean[][]): boolean => {
if (y < 0 || y >= map.length || x < 0 || x >= map[y].length) return false;
if (visited[y][x]) return false;
visited[y][x] = true;
const char = map[y][x];
if (char === 'S' || char === 'F') return true;
if (char in DirectionPipe) {
if (char === direction) {
return checkForPath(map, x + (direction === '═' ? 1 : 0), y + (direction === '║' ? 1 : 0), direction, visited);
}
return false;
}
return false;
};`
3. Storing Game States with Redis
To manage player data, levels, and leaderboards, I used Redis for its speed and simplicity:
Player Progress: Stored current levels and game states for each player.
Leaderboards: Used Redis sorted sets to rank players based on completion times.
async function awardPoints(context: Devvit.Context, username: string, levelIndex: number) {
const pointsForLevel = (levelIndex + 1) * 10; // Award more points for higher levels
await context.redis.zIncrBy('leaderboard', username, pointsForLevel);
return pointsForLevel;
}
`
Conclusion
Building Plumbi with Reddit Devvit was a rewarding experience that combined creativity and technical challenges. By leveraging Devvit’s capabilities and Redis’s speed, I was able to create an engaging game for Reddit users.
If you’re a developer looking to bring your ideas to Reddit, give Devvit a try—it’s a fantastic platform for building community-driven applications!
Top comments (1)
Nice one