Matchstick NIM Challenge

• 

  Logo

• 

  Playing Screen

• 

  Game End (stats with persistent storage)

The Inspiration

I wanted to digitize a classic “bar game.”
The Nim game (or Marienbad) is a mathematical classic, and the goal was to create a tactile, immersive version of this puzzle for Snapchat’s turn-based environment.

Building the Experience

I moved away from world-unit coordinates and utilized a ScreenTransform anchor-based system.
This allows the matchsticks to occupy the full area of a specific region container, regardless of the device’s screen aspect ratio.

The Technical Logic

The pyramid is generated using a nested loop that calculates the center of each matchstick within the $(-1, 1)$ coordinate space of the container:

$$ X_{center} = RowStart + (Col \cdot StepX) $$

This ensures the 1–3–5–7 formation is always perfectly centered and responsive to the parent UI container’s size.

Challenges Faced

The biggest hurdle was Responsive Layout.
Designing a pyramid that fills a small region of the screen without distortion required precise anchoring logic.

I also implemented a Career Win Rate system that calculates accuracy based on local persistent storage, helping keep users engaged over time.

What I Learned

• UI Anchoring: Mastered the use of anchors.setCenter for procedural grid generation.
• Statistical Tracking: Implementing win/loss ratios and accuracy percentages to enhance player competitiveness.

Built With

• api
• javascript
• persistentstorage
• turnbased