Tag: html

Gamefinds: CSS Puzzle Box

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!

CSS Puzzle Box 2.0, starting state

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)

Karate Great

Another work of Babarageo, Karate Great riffs on Kung Fu, known as Spartan X in Japan in which you have to take down hordes of mooks, and the occasional boss, using karate moves. This revision of the idea gives you only one control, an attack that’s activated by clicking/tapping the game screen. This causes your leggy karate lady to swiftly knock basic opponents right off the screen, and inflict damage on bosses both mini and major. Further, if you can hit four opponents in quick succession, she’ll switch to some gun fu, pulling out a pink pistol and just blasting following opponents. Why doesn’t she use the gun all the time isn’t explained; it only shows up as the fifth through eighth hits of a combo. And if you can get in a ninth hit… well I don’t want to spoil it, but it makes short work of most bosses.

All of these moves make K-lady pretty overpowered for most of the game! It isn’t until the last couple of stages where you face opponents where just clicking away at the screen rapidly won’t suffice. The last boss, an evil CEO, has an attack that can’t be deflected by the normal means, and will probably stymie you until you come to realize that you have to learn how to trigger the combo-ending move to thwart it.

It’s short but fun, as good web games should be!

Karate Great (web, $0)