Remember the game that was created with the Elm language during Zalando’s Hack Week #4? We’ve been working on it via open source and it’s had a lot of improvements since then. Our goal remains the same — to put the game on the 404 page of the Zalando website, and at its current state, we’re as close as ever to reaching it. In this post we will go through the game’s progress in detail.

Refactoring

The game was built at a really fast pace so we had to make some quick decisions, some of which ended up not working for the best. This resulted in some dirty hacks and cutting corners here and there. That’s why we immediately focused on refactoring in order to prepare the code for the new features.

The main refactoring challenge was to bring multiple lists of different map objects (warehouses, houses, trees and fountains) together into one list in order to use them in the path finding and map generation algorithms.

Thanks to the Elm compiler that guided us through this process, we were able to refactor it quickly and with confidence. An interesting discovery here was that the new features usually required some abstraction to bring the data pieces together, and this resulted in more lines of code being removed than added. This means that with Elm, you’re sometimes adding features by removing code! In fact, if we count all the new features that have been added since last year, lines of code have only increased slightly from 2623 to 2689.

Completeness

The game was fully playable at the Hack Week event, however it lacked some features that would make it look polished. The most noticeable of these features was the “Start Game” and “Loading in Progress” states. While the first feature was trivial to implement, the latter required a deep understanding of Elm Tasks and writing a native module in JavaScript to load the image.

We also noticed that in order to put the game on the website it had to be responsive, so we calculated the size of the map based on the Window.dimensions signal. Because the old map was hard-coded for desktop size only, we had to write a recursive algorithm that randomly positioned objects on the map and kept the list of empty boxes.

Performance

After making the game responsive, we spent quite a lot of time playing it on mobile! Unfortunately, we noticed that it didn’t perform well enough and the game’s animations weren’t smooth.

We initially used elm-html that implements the similar to the ReactJS concept of a Virtual DOM, and we rendered with the requestAnimationFrame by using Effects.Tick. Because the game objects were rendered as many div tags, the diff algorithm of the Virtual DOM had slow execution times and produced many changes to the real DOM. Our immediate idea was to use Graphics.Collage to render the game to a canvas, but unfortunately it didn’t support texture offsets, meaning we couldn’t use our animation strips.

Initially this seemed like a crazy idea, but in the end, we rewrote the rendering in WebGL, which made the game perform really fast at 60 frames per second. We also got an external contributor that helped us with the transparency issue in the shader code.

Sharing the knowledge

We are very excited about the game and Elm in general, and we want more people to get involved. We’ve applied to a couple of conferences in order to share our knowledge and spread the word. In the meantime, Andrey presented the game at the first Elm Berlin meetup and at the internal Web Guild event at Zalando. You can have a look at the slides here.

Future Plans

The game is in progress as an open source project, and our current focus is on the following tasks:

• We’re still looking for someone who can help us with sound effects for the game
• The images aren’t yet complete. For example, we had planned to put boxes on the bike of the moving delivery person
• We need to improve the gameplay, as it’s currently not possible to win and the game’s difficulty doesn’t increase

If you’d like to contribute to the project, please get in touch! You can reach Andrey via Twitter @unsoundscapes, and Kolja via Twitter @01k.