Case Study

:

Horrordle.app

A weekend hacking project turns into a full-fledge game.

One Saturday night I got the idea to re-skin a popular word guessing game & replace the word list with horror-themed picks. Initially, I was just curious about how much effort would take, & was looking for something to hack together over the weekend. A number of clones of this game already existed, but after looking through a bunch of open source projects, I realized what was available was unpolished if not unfinished. The more that I thought about it, building a game from scratch started to make the most sense. This would be a great learning project, anyhow, & there would end up being features I wanted to add to the original game. I also wanted to kick the tires on my recently-built Webflow framework, Blockhead.

Slowly, the game grew to a days-long and then weeks-long project, resulting in a fully-featured game.

The desktop UI

Rebranding a phenomenon

Since the original is seared into the mind of the public at this point, I only wanted to evolve the visuals. The bulk of this was taken care of by updating the green color indicating "correct" to red, changing up the fonts & adding some textures. I kept the basic UI in tact. But I also wanted to go with a Ralph Steadman-style treatment for the logo that would provide a compelling open graph image for social shares & carry the splatter motif into the end screen. This wasn't derivative of, but co-exists with a larger project I decided to fold the game under, Living Dead Co.

The mobile UI

Broadening the appeal

After playing the alpha version of the game for a few days, it quickly dawned on me that even people who consider themselves horror afficionados might have blind spots. Not everyone is going to be familiar with a Danish classic like 1922's Haxan, or Bob Clark's 1972 proto-slasher, Black Christmas. So I added a hint after 5 incorrect guesses. This meant that it wasn't just a test of one's horror bon fides, it could also be a learning experience: exposure to new films, new directors, & new characters. To supplement this, I added context to word reveals where needed to make it a little less cryptic: "The word was Trier, as in Lars von Trier."

Make it responsive

Adding so many new elements to the UI really made me appreciate how minimal the original game's design was. The larger logo, the footer logo, & the hint UI added good bit of vertical real estate, so I had to VH units & calc functions on mobile to ensure the layout would fit across a variety of screen sizes.

The desktop stats UI

Keeping track

The toughest parts of the project ended up revolving around state management. The game needed to save progress to the browser's localStorage not just so that they could keep track of wins & losses over time, but also so that they can return to an unfinished game & pick up where they left off. (Or so that they couldn't simply refresh the page if they were on the verge of losing.) This logic also allowed for sharing results, the viral mechanism that powered the spread of the original game.

A results share

Enlisting some help

Once the game was running, I appealed to the Evolution of Horror discord community to augment the word list & ChatGPT to help me write hints. The EoH community also helped beta test before I began sharing the game more broadly. And before I knew it, I had a fully functioning game.

The future

If a certain newspaper who now owns the original game hadn't begun cracking down on clones, I would turn Horrordle into a white listed, cloneable Webflow project. But given the circumstances, I'll just hope the added features & focused theme will keep it out of the paper's legal crosshairs as it finds its footing within the horrorcomunity.

view this project live