Overview
MonoMatch is a browser game based on a precise mathematical constraint: every pair of cards must share exactly one symbol.
The project combines that generated structure with a fast two-player interface, keyboard controls, animated card transitions, validation tools and performance-conscious asset handling.
The core concept
The mathematical construction is not simply a theme placed on top of the game. It determines the cards, the relationships between them and whether every possible round has one—and only one—correct answer.
The main deck contains 57 cards with eight symbols on each card. A smaller 31-card mode provides a quicker variant with six symbols per card.
Symbol scale, position and rotation are varied to make visual scanning more interesting, while collision checks prevent the layout from becoming unreadable.
How the system works
Each player controls a selector over their own card while comparing it with a shared center card. The goal is to identify the symbol that appears on both.
The left player uses W, A, S, D and Space; the right player uses the arrow keys and Enter. Correct answers move a player’s card into the center and immediately reveal the next card from that player’s pile.
The rules engine verifies the card construction and keeps the generated deck consistent before the interaction layer is applied.
Interaction and product design
The game is designed for fast local competition rather than a slow card-browser interface. A countdown establishes a clear start, selection highlights make the current choice visible, and correct or incorrect answers receive distinct animation and sound feedback.
A short transition lock prevents a near-simultaneous keypress from being counted as wrong while the cards are changing. Personal cooldowns also escalate after repeated incorrect answers rather than stopping both players.
Match-point and winner states make the end of a game easy to read without interrupting the pace of normal rounds.
Engineering decisions
Replacement cards are prepared before they are needed, allowing the next card to appear immediately while the scored card animates toward the center.
Moving selectors update through GPU-friendly transforms, and the card DOM is not rebuilt during ordinary movement. Optimized transparent symbol assets are used during gameplay while higher-resolution originals remain separate.
These decisions reduce work during the most time-sensitive part of the interaction: the interval between a player’s input, visible confirmation and the next playable state.
What the project demonstrates
MonoMatch demonstrates how a strict mathematical rule can become an accessible interaction when game design, controls, feedback and performance are developed around the rule rather than added afterward.
It also demonstrates attention to fairness in local multiplayer interaction, where timing and transition behavior can matter as much as the underlying correctness of the game logic.
Technical highlights
Exact card generation
Every card pair is validated to contain exactly one common symbol.
Two deck sizes
The full and quick modes preserve the same mathematical guarantee.
Collision-aware layouts
Symbols vary in position, size and rotation without becoming unreadable.
Local multiplayer controls
Two players receive independent keyboard input and feedback.
Transition fairness
Short lock windows avoid punishing inputs made while cards are changing.
Performance-conscious rendering
Pre-rendered cards, transform-based movement and optimized assets keep play responsive.
