We love it when we find weird and unique indie games to tell you all about! Our alien friends to the left herald these occasions.
Some of you may remember seeing, from a while ago, a clever hack that implemented a series of interactive puzzles on a website. If you didn’t see it, or don’t know much about how these things usually work, you might not think much of that, we’ve all been playing web games for two decades now, and an entire web platform for them (Flash) has arisen and died in that time. It now has an updated version, with new puzzles to figure out!
Nowadays these things tend to be made using Javascript, or some language that renders down to Javascript. That’s what makes the CSS Puzzle Box amazing: it doesn’t use Javascript! It’s implemented entirely with HTML tags and CSS! See for yourself! Caveat: it doesn’t work on mobile platforms, some of the click or drag handles are a little hard to hit with your clumsy human finger. On desktop browsers, watching for the cursor to change when it’s over an interactive element is tremendously helpful.
It’s challenging, but far from impossible. It requires some close observation to get started, but after that you can probably get through it with enough time spent and effort expended. The hardest puzzle is one of the first, “Lights On,” one of those puzzles where clicking on a square inverts that light and those adjacent. You can follow these directions (swapping off lights for on ones) to solve it, or click on the O in the Lights On title a few times to skip it, or just muddle through—if you get stuck with just one or two lights on and can’t clear them, mess up the puzzle by clicking everywhere on it randomly and try again, and eventually you’ll happen on a pattern that resolves nicely.
So, about the technical underpinnings. Its creator blackle mori (Mastodon) wrote up a nice breakdown of how it manages to do what it does without scripting. Part of it includes the <details> tag and its accompanying <summary> tag, a way in pure HTML to have collapsing content. If you want to know the tricks there they are, but you don’t have to care about that to enjoy the puzzles. Good luck!
CSS Puzzle Box 2.0 by blackle mori (webgame)
