The Creation of CapitalFish: An incremental game built with SvelteKit

Over spring break, I decided to try out SvelteKit, a Svelte framework that provides client-side routing, server-side rendering, and all that fancy good stuff. SvelteKit recently released their public beta, so I thought it would be a great opportunity to build something fun. You can learn more about SvelteKit in their announcement blog post. I already had the idea of creating an incremental game similar to Cookie Clicker, so what better way to learn a new thing than actually using that new thing?

You can play the game at https://capitalfish.tomichen.com/.

Ranting about JavaScript 🤬

I’ve played around with Next.js before, and I was impressed at how easy it made things. However, the biggest drawback of React and Next for me is how much JavaScript it ships. The Next tutorial project has a whole 47.5 kB of JS, which is kind of a lot considering it needs almost none of that. Compared to the game this post is about at 18 kB, I’ll probably be more likely to use Svelte.

I am aware that this isn’t a great comparison and there’s client-side routing and all that, but still. A 30 kB difference between a static blog and a literal game? Also, I don’t have that much experience in React/Next, so take my opinions with a grain of salt. Come to think of it, I have less than a week of experience with Svelte, so…

While I could probably cut more if I rewrote the entire thing in plain vanilla JavaScript, I’m pretty sure that would be much less fun and take a lot more time. While it may be worth it for simple things (in which case, I prefer Eleventy), I think Svelte has a good balance between developer ergonomics and performance.

But I did not come here to rant about my obsession with file sizes while also simultaneously being too lazy to optimize my images. I am here to write about building a game.

Building the game

The idea for this game came a couple of weeks before, where joking around with some friends led me to impulsively buy a domain with no clue what to do with it. After some deep introspection and consideration, I decided the best use was to build a cookie-clicker-esque incremental game. Since this would require lots of JavaScript, I decided to try out a JavaScript framework, choosing Svelte/SvelteKit for the reasons above.

The bulk of the work was done in one day (~11 hours) with a couple of hours the night before to set things up/read the docs. The SvelteKit docs were very informational, and for Svelte itself, I mainly referenced their tutorial, which had everything I needed. When researching different frameworks, I did the first few lessons, which was enough for me to get a general idea of what was going on and get started.

After showing my friends, they seemed to enjoy it, so I slowly improved it over the next few days. Since the original contained some very mild personal information, I re-themed it to release it publicly, which is the version linked in this post. The code is also available on GitHub if you’re into that. Besides the images and text, the mechanics are the same. It’s also pretty simple to change the game theme and tweak values if you want, so feel free to do that! (though I will warn that my code is kinda bad even though I tried my best slacking off is inevitable and I could’ve split it into more components and I could’ve put styles in a different place and I could’ve done this and I could’ve done that and whatever at least it works lmao 😋 )

Overall, building this game was a lot of fun. I learned a lot about Svelte, SvelteKit, and the amount of flexibility in the browser. While absolute positioning and changing top/left properties is not very performant (I think?) it works fine(ish)! There are still lots of bugs and issues and tweaking to gameplay that could happen, but I’m not going to worry about that. 😌