How to play

The board is a rope of paper lanterns over a night pond, one per bit, the most significant on the left. A sign reads MAKE and the target, five small lanterns count the level’s rounds, and each lantern’s place value hangs above it: 8, 4, 2, 1, or 128 down to 1 on a byte. Below, the board is read out as DEC, HEX and BIN.

Click or tap a lantern to flip it: lit is 1, dark is 0. On a keyboard, ← and → walk along the rope and Space flips; Enter flips too, until the round is solved. A miss says how far off you are: “Your bits make 2. The target is 4 — 2 to go.” When the board reads exactly the target, the status line says -- LIT -- and the round locks. Press Enter or Next round for the next target, which starts dark.

A level is five rounds, and the score is flips, including turning a lantern back off. The tally sets your flips against the round’s fewest and the level’s par. Par or less earns gold, up to 1.5 times par silver, more bronze. The card offers Next level, Try for fewer and Copy share link, which shares your levels solved and flips. Ask the duck gives three hints per level.

What you’ll learn

Twelve levels in four chapters. Each chapter’s first level is open; the rest open in order.

Place values: Four bits, Four-bit sums (11 is 8 + 2 + 1: 1011), One byte (powers of two up to 128) and Byte sums.
Hex: Hex nibbles, Hex letters and Hex bytes: each hex digit is half the board, so 0xD3 is 1101 0011.
Signed: The sign bit, where the leftmost lantern is worth -128, and Negative numbers, two’s complement: flip a positive number’s bits and add one, so -5 is 1111 1011.
Operators: Bit shifts (0xFF >> 4), Bit masks (clearing with 255 & ~16, setting with |, toggling with ^) and Bit recipes, which chain them by precedence: (0xF0 >> 2) | 1.

On operator levels the working sits above the lanterns, column for column: each number as a row of bits, each in-between result as ?. Once you light the answer, it plays out: bits slide for a shift, two rows merge for &, | and ^, and a row turns over for ~.

By the end you can read a byte in binary, hex and signed decimal, and work out a mask or shift in your head.

Good to know

The operators are JavaScript’s. Targets are evaluated with JavaScript’s own bitwise operators on 32-bit integers, in its precedence order, and the lanterns show the low 8 bits.
Par is the true minimum. Every round starts dark and a flip changes one lantern, so par is the count of 1 bits in the targets: 217 flips for all twelve levels.
Progress stays in your browser. Your fewest flips per level are saved in localStorage.
Not covered yet: boards wider than 8 bits, >>>, shifting negative numbers, binary addition and overflow.
Other binary games test speed. Cisco’s Binary Game is a fast-paced arcade drill in decimal and binary conversion for CCNA candidates, free with a Cisco Learning Network login. Q42’s Flippy Bit and the Attack of the Hexadecimals from Base 16 drops hex numbers that you shoot down by flipping eight bits, faster after every hit. Bit Flip is untimed, adds signed bytes and bitwise operators, and scores against par.

Questions

What does XOR do?

XOR (^) gives 1 where two numbers’ bits differ and 0 where they match: 0b1010 ^ 0b0110 is 0b1100, or 12. XOR with a mask toggles its bits, so doing it twice undoes it: 13 ^ 4 is 9, and 9 ^ 4 is 13.

How do I check if a bit is set?

AND the number with a mask of just that bit and compare with zero: (n & (1 << k)) !== 0. In JavaScript, use !== 0 rather than > 0, because bit 31 makes the result negative.

const n = 0b1010;
(n & (1 << 1)) !== 0; // true
(n & (1 << 2)) !== 0; // false

What’s the difference between >> and >>> in JavaScript?

>> copies the sign bit in as it shifts right, so negative numbers stay negative; >>> fills with zeros and returns an unsigned 32-bit result. For non-negative numbers they agree.

-16 >> 2;  // -4
-16 >>> 2; // 1073741820

Why do programmers use bitwise operators?

To pack yes-or-no flags into one integer and to read formats defined in bits. Unix permissions (read 4, write 2, execute 1) are set with |, cleared with & ~ and tested with &, and masks pull fields out of packed values: a color’s red channel is (0x3366CC >> 16) & 0xFF, or 51.

Bit Flip

Four bits