Skip to main content

Examples

Number Match

Select pairs of numbers that add to 10 — constraint-driven game loop with automatic refill and win detection.

Try it

Loading example…

Click two numbers that add to 10 to remove them. The constraint chain automatically removes matched pairs, refills the grid from the pool, and detects game-over or win conditions.

How it works

A single number-match module manages 36 numbered tiles (1–9, four of each). Nine are displayed on a grid at a time. Four constraints drive the entire game loop:

  1. pairAddsTen – when two selected tiles sum to 10, emits REMOVE_TILES
  2. refillTable – when the grid has fewer than 9 tiles and the pool is non-empty, emits REFILL_TABLE
  3. noMovesLeft – when the pool is empty and no valid pairs remain, emits END_GAME
  4. allCleared – when all tiles are removed, emits END_GAME with a win message

Summary

What: A Number Match game where you select pairs of tiles that sum to 10.

How: Four priority-ordered constraints chain together: match → remove → refill → end-game detection. Resolvers handle the multi-fact mutations.

Why it works: The constraint chain settles automatically. Each resolver mutates multiple facts in a single batch, and the engine re-evaluates constraints until no more fire.

Source code

main.ts
// Source file "main.ts" not found

Stay in the loop. Sign up for our newsletter.

We care about your data. We'll never share your email.

Powered by Directive. This signup uses a Directive module with facts, derivations, constraints, and resolvers – zero useState, zero useEffect. Read how it works