Side Projects

JavaScript Browser Game

< Go Back

I work as a Product Owner since January 2022. Daily programming is no longer my focus. Instead, I spend my time with software architecture, discussions with stakeholders and my team and organising a lot of smaller tasks. And after one year I was wondering how much I already forgot from my old programming skills :-)

Some time ago I found a nice game named Babs is You: simple, creative, retro, fascinating. A little side project seems be a good idea to test my programming skills and recreate the basics of the game. To make it challenging, I choose JavaScript and Svelte as programming languages. I had only a basic understanding of JavaScript (I could not tell the difference between "==" and "==="). And I knew nothing about Svelte at all except the name.

Let's get started

The development tools that I chose are:

The Svelte homepage provides a lot of examples. I downloaded one of them as a starting point. I also wanted to use TDD (test driven development) and installed jest. I spent about 2 hours to understand its philosophy and get comfortable with it. Jest is easy to integrate in a development process. It can watch my sources and run the tests automatically if changes were saved.

development environment ready to use

I had a basic idea of the implementation in mind and started with the obvious: creating a game board and Baba, put him on the board, move him around and make sure that he does not fall off the edges. Everything in small iterations, tests first and then the implementation until all tests run successfully.

In the beginning, two major rewrites of the implementation where necessary. One because of my lack of knowledge about JavaScript and one because my initial design of internal data structures did not work out well. But I could do the rewrites without changing a large number of my tests.

The UI and Svelte came last. With a lot of help from the internet, I finally figured it out and created an interactive web app similar to the original game. My version allows Baba to move, get blocked by walls, push boxes around for fun and modify the environment. Try it out and use the browswer's back button to come back here.

development environment ready to use

What I learned in about 40 hours

Final Thoughts

Now I know better what I can expect from my team when it comes to web app development.

test coverage