The Wise Mist

The final assignment at HackerYou's Web Development Bootcamp was an agency-style group project: our team of four was tasked with building an app to meet a client brief. And what a brief it was! We were asked to build a game with “the 1980s in space” aesthetics where the player must navigate a maze to reach The Wise Mist, an all-knowing, genderless, glowing cloud that dispenses fortunes. With an over-the-top brief like that, how could we not rise to the occasion?

In less than a week we’d built this goofy vaporwave dungeon-crawler in React. We were inspired partly by Chips Challenge, an old PC game; the user must work their way through the maze, avoiding shifting walls that block their path, laser cages that momentarily trap them, and wormholes that teleport them somewhere else, to finally reach the Mist who tells them wisdom based on a word they've entered at the beginning of their journey.

The "wisdom" wound up being the simplest part of the project – that comes from a keyword search to the Advice API, and if no matches are found, another call to the API returns a random bit of advice as a default.

The biggest challenge was probably working out how to best display the maze. At first, the character sprite moved around a fixed map, but we quickly found that that limited the size of the playing field, and would have been impossible to make work on a phone. So, we refactored and instead, the player's avatar is fixed in the centre of the screen, and we animate the map around them. This allowed for a much larger map, the addition of a subtle shadow effect (ooh, mysterious) and gave us room to add on-screen controls for mobile devices that lack a keyboard.

We aimed high with this one and we were thrilled to see our team effort come together so quickly! Shout outs to Soo Shim, Jonathan McWilliam, and Jonathan Tung, three extremely talented and lovely people.