The Creation of CapitalFish: An incremental game built with SvelteKit
By Tomi Chen April 11, 2021
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/.
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…
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.
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. 😌