Using Elm to Create a Fun Game in Just Five Days
Learn about 404 Elm Street, our open-source browser game made with Elm.
Among the four of us who developed 404 Elm St., one of us had used Elm to develop a Flatris clone, one was new to functional programming, and two were experienced functional programmers eager to try Elm. Here’s how we got the job done while learning a new language on the fly.
Day One: Basic Framework and Sprite Rendering
At Zalando, we always try to put ourselves in our customer's shoes. With 404 Elm St., we wanted to put our customers in our shoes for a change. After brainstorming a minimum set of features, our team got to work.
- Kolja (senior front-end engineer, ClojureScript enthusiast, illustrator) created the first animated sprites
- Andrey (senior front-end engineer, author of the aforementioned Flatris clone) put the raw framework together and the code to animate the sprites
- Vignesh (senior front-end engineer) got up to speed with Elm
- Arpad (front-end engineer) worked on an A* algorithm to generate a pathfinder for Joe
At the end of the day, we had created a map featuring houses and an animated fountain.
Day Two: A* Pathfinding FTW
Arpad finished his work on the algorithm; Andrey coded a mock page for pathfinding that used SVG to draw a calculated path; Andrey and Vignesh pair-programmed and came up with a code model and game logic; and Kolja sketched.
The results: A working pathfinding algorithm and a map with actual game objects (houses, warehouses, trees, fountains and Joe).
Day Three: Game Logic Focus
We rendered different items and made sure that Joe was mobile. Andrey continued working on the game logic and event handling, and Kolja continued drawing. By day’s end, Joe could move around in eight different directions and follow paths.
Day Four: Putting Things Together
We went open source on GitHub! We also added click-handling and other components, and Kolja finished drawing the customers.
Day Five: Final Presentation
We set up a booth at the Hack Week project fair and demonstrated the game for our colleagues. Thanks to Vignesh’s implementation of continuous deployment, we were able to add features and fix bugs during the fair. When our booth visitors refreshed the screen, they saw our improvements.
Finally, we learned that our algorithm really needed to be streamlined, or else the code would turn out ugly and complicated. Elm makes it obvious what needs to be refactored or rewritten in the future.
The Elm compiler helped us greatly — allowing us to toss code around quickly, rename functions, and change types, while remaining confident about the results. The compiler also helped us resolve a cyclic dependency issue by showing nice ASCII art of the dependency loop.
We had a great time making the game, and are still improving it; go here to contribute, share issues, and send pull requests. Some of our plans:
- create “Start” and “Game Over” screens
- add sound (if you’re a sound engineer, drop us a line at andrey.kuzmin at zalando dot de!)
- put this thing on an actual 404 page!
We’re also continuing our work with the Elm language, and have created a guild that will allow us to pursue things further.