Binary Bit Flip Game — Free HTML CSS JS Snippet

Binary is one of those topics that stays abstract for as long as it is taught on paper and becomes obvious the moment you can flip a bit and watch a number change. This snippet is a small, genuinely playable number-building game: a random target between 1 and 255 appears, eight bit buttons sit below it labelled with their place values, and the player toggles bits until the running total equals the target. Every representation the player might meet in real code — the binary string, the decimal value, the hex byte, and the place-value sum — updates on every flip, so the relationship between them is visible rather than described.

Toggling a single bit with XOR

Flipping bit i is a single expression: value ^= placeValue(i). Exclusive-or with a mask that has exactly one set bit inverts that bit and leaves every other bit untouched, which is precisely what a toggle means at the bit level — and it is meaningfully better than the alternatives a beginner reaches for first. Tracking eight separate boolean variables and recomputing a sum keeps two sources of truth that can drift; adding or subtracting the place value works only if you first check the current state, which is the check XOR makes unnecessary. The whole game state is one integer between 0 and 255.

Deriving the display from the number, never the other way around

render() reads the single value integer and regenerates everything: each button's on/off class and its 0-or-1 digit come from (value & placeValue(i)) !== 0, the binary string from value.toString(2).padStart(8, '0'), the hex byte from value.toString(16) uppercased and padded, and the arithmetic line from collecting the place values of the set bits and joining them with plus signs. Because every visual element is derived from the same integer on every render, the display cannot disagree with the state — the same one-way data flow a framework enforces, done here in a dozen lines.

Place values as first-class UI

Each bit button shows its weight — 128, 64, 32, 16, 8, 4, 2, 1 — under the digit, computed as Math.pow(2, BITS - 1 - i) rather than hardcoded, so changing BITS to 4 or 16 rebuilds the whole board correctly. The running line beneath the readouts spells out the arithmetic in full ("64 + 32 + 8 = 104"), which is the step that converts pattern-matching into actual understanding: the player sees that a binary number is nothing more than a sum of the powers of two whose bits are set.

Keyboard and pointer paths through one function

Number keys 1 through 8 flip the corresponding bit from the left, and clicking a button does the same, because both paths call toggleBit(i) — a delegated click listener on the container resolves the index from a data-index attribute rather than binding eight separate handlers. Win detection lives inside that one function too: after every flip it compares value === target, so there is no separate check step and no way for the two input methods to behave differently.

Streaks that survive a refresh

Consecutive solves build a streak, and the best streak is written to localStorage under a single clearly named key, read back on load, and only rewritten when the record actually breaks. A short lock after a win prevents further flips from registering during the celebration delay before the next target appears, which is the small guard that stops a fast player from accidentally scoring the next round with a stale click.