Binary Tetris: Interactive Binary Operation Playground

What if tetris had a baby with a hex editor?

Note: The demo in this page requires a big screen, maybe it works in landscape mode in phones. I didn't want to break the 32 bits in a row or use less bits.

While working on the memory chapter for the book WebAssembly from the Ground Up I reached a point where I had to introduce binary operations and explain that in WebAssembly you can do loads and stores specifying a storage type that is smaller than the bit width of the type being loaded or stored.

The usual approach in the book, or at least our objective, is to introduce interactive components when it helps to explain the concept at hand.

I started thinking and for some reason I had a mental image that was a mix between tetris and a hex editor. The idea evolved into a game where you got binary "shapes" from the top and as they touched shapes on the floor you had to select a binary operation to "merge" both shapes, I didn't think long enough to check if the game made sense or if it would be fun, but the idea of a binary pile and merging by selecting operations persisted. Here's the result of that exploration:

💡 The example is interactive, read after it for some things you may want to try.

💭 Some things you can do in the playground:

• Append values by giving them a name and a value on the top left and clicking Add
• Get more information about each operation by clicking the operation on the top right
• ▶ Expand a value to see the bits grouped in 8 , 16 and 32 bits.
• While expanded you can also remove the value or apply a binary operation (&, |, ^) with the value below it
• << shift the bits in a value to the left one bit at a time
• >> shift the bits in a value to the right one bit at a time
• ~ negate all bits
• Click on a bit to flip its value
• Click on the 8, 16 and 32 bit groups to flip the bits from that group
• Hover over each bit to see its position and how to get it with decimal and binary operations
• Reorder values by dragging one from the name and dropping it over another value's header to place it above it

Some further ideas I want to explore is to capture each operation in a list that can later be replayed, if the user does 8 successive shift lefts merge them into a single one that does a shift by 8 bits at once.

With the operation list a simple game is possible, starting with an initial setup of values, an objective and a maximum number of operations to achieve it. The game watches a particular value until it has the correct binary value.

But the current prototype is enough exploration for the book :)

Here's an fresh binary tetris for you to play: