Match or Lose: The Daily Puzzle Challenge

A deceptively simple puzzle for the sharpest minds. Experience the thrill of pure deduction with no luck involved. Prove your genius in the daily challenge.

Comment

Inspiration

We've all seen those viral videos—people frantically swapping colored bottles to match a hidden pattern while a timer ticks down. It's frustratingly addictive to watch, but we wanted to stop watching and start playing.

Match or Lose was born from a simple question: "Can we capture that high-stakes tension in a digital format?" We wanted to build a game that feels fair but unforgiving—a true test of logic where every move counts.

What it does

Match or Lose is a daily deduction puzzle game. Your goal is simple: arrange the colored cans to match the hidden correct order.

  • Daily Challenge: Everyone gets the same generated puzzle each day based on a unique seed.
  • Interactive Physics: Cans have "liquid" weight and wobble, making every interaction feel satisfying.
  • Instant Feedback: No complex rules. You either match the pattern or you don't.
  • High Stakes: In the main mode, one wrong guess resets your streak.

How we built it

We stripped away the bloat and built a custom game engine from scratch using TypeScript and HTML5 Canvas.

  • Rendering: We avoided heavy game engines like Unity in favor of a raw 2D Canvas implementation. This gives us pixel-perfect control over every frame and ensures instant load times.
  • Physics: We implemented custom "wobble physics" math to simulate liquid inside the cans, giving them a heavy, realistic feel without needing a physics library.
  • Logic: The game logic handles state management, daily seeding (so every player sees the same puzzle), and streak tracking.
  • Platform: Built with Vite for a modern development experience and optimized for the web.

Challenges we ran into

The "Juice" Factor: Getting the cans to feel "heavy" and satisfying to drop was surprisingly hard. We spent hours tweaking the angular velocity and dampening coefficients to get that perfect "thud" and wobble.

  • Responsive Design: Scaling a canvas game to look perfect on both mobile and desktop screens required a robust custom layout engine that recalculates coordinates dynamically.
  • Fairness vs. Difficulty: Finding the right balance for the daily puzzle generation was key. It couldn't be too easy (solved in 2 tries) or mathematically impossible.

Accomplishments that we're proud of

  • The "Feel": the game just feels good to touch. The drag-and-drop mechanics are smooth, and the sound design complements the visuals perfectly.
  • Zero Dependencies: We didn't rely on massive libraries. The core game loop is pure, optimized code.
  • Daily Mode: Successfully implementing a seed-based generator that creates a unique, solvable puzzle for every day of the year.

What we learned

Canvas Power: You don't always need WebGL or Three.js. The 2D Canvas API is incredibly powerful if you know how to optimize your render loop. User Feedback: Visual cues (like the wobble or the specific slide animations) are just as important as the game rules themselves.

What's next for Match or Lose: The Daily Puzzle Challenge

Global Leaderboards: Confirmed "World's Smartest" ranking. Versus Mode: Real-time 1v1 battles.

Built With

Share this project:

Updates