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

Binary Tetris: Interactive Binary Operation Playground

submited by

Style Pass

2024-03-29 03:30:03

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:

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.