Back to technical projects

TECHNICAL PROJECT · MATHEMATICAL GAME

MonoMatch

A fast local multiplayer game built on a generated combinatorial system in which every pair of cards shares exactly one valid symbol.

MonoMatch browser game showing two player cards and a shared symbol-matching card

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.

NEXT STEP

See the project in action.

Open the live application to explore the interaction directly, or send me a message about a custom project with similar product or technical challenges.