Logic Gate Puzzle Game — Free HTML CSS JS Snippet

Boolean logic is the substrate under every conditional anyone ever writes, and it clicks the moment you can flip a switch and watch a wire light up. This snippet is a playable circuit puzzle: a fixed two-gate circuit wired as gate1(gate0(A, B), C), five gate types to choose from, three input switches, and a target described in plain English. The player picks gates until the circuit's behaviour matches the target across every possible input — not just the case currently on screen.

Graded on the whole truth table, not the visible state

The critical design decision is that the win condition evaluates all eight input combinations, not the three switches as they currently stand. ROWS is generated by extracting bits from the numbers 0-7 with (i >> 2) & 1, (i >> 1) & 1 and i & 1, which produces the canonical truth-table ordering without a hand-written table. Every render re-evaluates the circuit for all eight rows and shows want versus got side by side, so a circuit that happens to be right for the switches you are looking at but wrong elsewhere is visibly, specifically wrong — which is exactly the bug that hides in real conditional logic.

Behavioural equivalence, not a stored answer

Levels define their target as a JavaScript function of (a, b, c) rather than as a required pair of gate names. Any gate combination producing the same output column clears the puzzle, so a player who reaches the answer by a route the author did not anticipate is rewarded — and several of these targets genuinely have more than one solution, since NAND and NOR can substitute for combinations of the others. Grading behaviour rather than structure is what makes the game teach Boolean equivalence instead of gate trivia.

Gates as a lookup table of pure functions

GATES is an object mapping each name to a two-argument function built on JavaScript's bitwise operators — a & b, a | b, a ^ b, and the negated forms for NAND and NOR. The picker buttons are generated from Object.keys(GATES), so adding XNOR means adding one entry and nothing else: the picker, the evaluation, and the truth table all pick it up automatically. Using bitwise operators on 0/1 integers rather than booleans keeps the whole model in the same representation the truth table displays.

Live state shown on the wires

evaluate() returns both the intermediate value out of the first gate and the final output, which lets the UI light each gate independently — so a player flipping switches can see where a signal dies. That intermediate readout is the difference between a puzzle and an explanation: when the output is dark, you can tell at a glance whether the first gate produced a 0 or the second gate consumed a 1 and produced nothing. The row of the truth table matching the current switch positions is marked, tying the interactive view and the exhaustive view together.

Puzzles that build toward parity

The five targets run from a three-way AND, through an OR feeding an AND, an XOR feeding an OR, a three-input parity check (output high when an odd number of inputs are on — the basis of parity bits and checksums), and finally a NAND-based condition. Parity is the one that repays study: it is the standard example of a function that cannot be expressed without XOR-like behaviour, and building it by hand is more convincing than reading that fact.