Karma Blitz

Title Screen
Intro
Gameplay
More Gameplay
Game Over Screen

Inspiration

I wanted to make a fun experience that had the feel of an old school, merciless arcade game. One that doesn't hold your hand, but instead rewards skill and practice and is balanced by chance. The kind of game you can brag to your fiends about your high score because you mastered the controls and mechanics of the game.

What it does

The game runs in a Reddit Custom Post. After a short splash screen while the game is loaded, the title screen renders directly in the post without requiring to be launched into a modal. Keyboard focus is grabbed automatically and regained on mouse enter if any other part of the Reddit host page is clicked.

Clicking the [ ? ] icon in the lower right will show the controls. This can also be accessed by the [ Esc ] key at any time during gameplay to pause. Pressing [ Spacebar ] on the title screen starts the game. A short intro screen is shown as the music ramps up.

Gameplay is synced up to the music, a hard beat suited to a game that's hard-to-beat. In fact though, this is not a game that you CAN beat. There is no end... until you run out of lives. The goal is to get as high a score as possible before that happens. And, it definitely WILL happen.

You get about 20 seconds in the first stage to get used to the controls and collect some easy points. upvotes are worth 1 point, downvotes remove 5 points, gold is worth +10, skulls will remove a life. Crossing each 100 point threshold (200/300/400/etc) awards an extra life.

After the first stage, the game gets progressively more difficult. The rest all run for ~11 seconds each and require some careful movement, timing and luck to maximize the points collected. You will need to make effective use of the unique movement in each stage to make it on the leaderboard. The text that flashes at the beginning of each stage tells you what action you can take using [ Spacebar ]. Your Snoovatar's directional movement is controlled through WASD or the Arrow keys. The specific movement in each stage is listed below:

Stage 1 : DASH left and right to catch the falling upvotes, hold [ Shift ] for more precise movement.
Stage 2 : DODGE bad karma by moving up and down between two lanes, jump to get out of tight spots
Stage 3 : SWIM up to avoid being in the path of deadly skulls as they rise from the bottom of the screen.
Stage 4 : SCRAMBLE across an open field to collect as much good karma as you can. Be careful when sprinting or you might trip on a few downvotes. If you're lucky here you could collect enough points to gain that next life, you may need it for what comes next...
Stage 5 : BOUNCE for your life as karma blows in from the left edge, press [ Spacebar ] when your feet are on the ground to bounce even higher and catch that elusive gold. Hold [ Shift ] to reduce your bounce height and duck that bad karma like a pro.

But wait, there's more... The game does not end when you complete stage 5. Instead, it loops back around to the intro. You get a short break to steady yourself and then start at Stage 1 again. Only now the drop rate has increased to 2x normal speed. After each run through the multiplier goes up by 1. It gets pretty hectic around 5x speed and it becomes much more difficult to avoid the deadly skulls.

When the game ends, a colored lens flare is applied to your score if you made the leaderboard. Your score is also added to the community goal shown at the bottom. Clicking this will display the top 3 ranked players who will also be awarded a flair displaying their highest medal achieved. Ranks 4-10 are not shown on the podium but will get a top-10 flair. Any player who didn't make the top 10 but contributes points to the community goal will get a flair as well if the goal is reached. The game post will also have this community goal flair applied to note the accomplishment. Players will be sent a message to let them know when a flair as been awarded.

How I built it

I started with the official Bolt x Devvit Starter Template which I then heavily modified to align with a custom template that I had previously published based on an early access preview of the Devvit Web platform. Since I had previous experience with building apps like this, getting up and running was a breeze and allowed me to dive right into developing the game mechanics.

My template gave me only a basic HTML entrypoint and an Express API that fetches the current username and avatar. The Reddit context is injected into each API Request through a middleware. From this template, I got Bolt to build a simple canvas-based game loop which let me draw the player/items and implement basic movement + collision detection. At this point I brainstormed some ideas between myself, my wife and a few different AI models until I had a pretty solid (and ambitious!) gameplan.

Originally, I wanted to build a more random party-game that was closer to WarioWare. The initial concept was to have a wider variety of micro-games. Ultimately, I decided that the timeframe for this hackathon was not long enough to develop a dozen or more wildly different styles of gameplay so I refined the idea into 5 variants of one core set of mechanics: Move your avatar to collect good items and avoid bad items.

To set the scene, I used Perchance Text-to-Image generator based on the incredible FLUX.1 model. But, even as good as this model is, I still had to do some editing and painting with my Wacom tablet to get exactly what I wanted.

I did some experimenting with a local build until I worked out a smooth stage-chaining mechanic and integrated my artwork. Then, I imported back into bolt to do a live test before prompting out the rest of the game mechanics. Bolt would usually get me pretty close to what I wanted, but I did have to manually tweak pretty much every change to keep the project matching my vision. I worked out a lot of the fine-tuning locally so that I didn't have build -> upload -> reload Reddit for every little adjustment to the canvas drawing and movement.

After all the game mechanics were polished Bolt did a pretty decent job help me with implementing the Reddit specific features. The results of every match, the community score goal and the associated rewards are all tracked using Redis. I did have to make some adjustments to it's suggestions due to the custom/experimental method I was using to build this.

The project is deployed from within Bolt using the Devvit command line utility and runs on Reddit's servers. After installing into my subreddit, a menu option is added that let's me (as a moderator) generate a post containing the game.

Challenges I ran into

Bolt.new limitations

Early on in this project I kept hitting the daily token limit pretty quickly. I would get about 4 prompts deep before needing to export my build and work locally for a bit. Importing by hand was awkward until I discovered that opening in StackBlitz let me access the file tree in a better way. I found out about this pretty far into development so it probably wasn't even available to me before I got my builder pack code to upgrade to pro. I ended up not making full use of my pro tokens because I was worried about burning through them too quickly. I did a fair amount of manual editing based on bolts suggestions rather than allowing Bolt to apply the changes. I also didn't feel like giving Bolt full access to my entire Github account including all private repos, so I was constantly exporting changes to my local copy of the project which I then tracked through git. If bolt had requested access to only one repo to track the project, this tedious manual syncing could have been avoided. Or, if the StackBlitz was more prominently displayed, I would have realized that I could do a lot of my manual coding in there. I didn't trust the main Bolt.new interface for any multi-file manual edits. Quite often, I would make changes then, without saving, click another file in the tree to check a reference, then come back and find that my previous edits were gone. Very frustrating.

Vite

Vite is used in the Devvit template but this was constant pain-point in this project until I removed it from the build step. It was interfering with my assets too much and breaking my carefully chained async module loading. It figured ripping it out was fine as I had no intention of using any node packages in my front-end code... until I later realized that I could not access the Reddit context in my app, which was needed to implement the Bolt badge link navigation. The game runs in an iframe with no access to the Reddit host window. The only way to trigger the link to the bolt.new URL was through the @devvit/client library. So I manually bundled the required exports and imported this file into my project.

Keyboard Focus Handling

This was tricky to get just right. Aside from a few UI elements, the game is controlled by the keyboard only. I didn't want a click-to-start message and then throw the player into a keyboard controlled environment. I decided to change the Call To Action based on whether the game is focused or not. If not, the message appears to be inviting a click, but updates automatically to indicate keyboard control when the mouse enters the bounds of the game view.

Accomplishments that I'm proud of

At one point Bolt used my own blog post as a reference in one of it's answers! I thought that was pretty awesome and have never had that happen when prompting an AI before!

This also is the first time that I have released a fully polished game experience. I have built quite a few "parts of games", or projects that were "almost a full game experience" but this hackathon has pushed me to create something really fun!

What I learned

That I definitely want to keep building games! And that Reddit is an excellent platform to do this on, especially with the improvements coming in the next version of Devvit Web.

What's next for Karma Blitz

I intend to implement a moderator-only dashboard to configure community goals and manage the leaderboard. I also want to track play time as a separate stat with it's own rewards. There's not enough time left in this hackathon to get these features implemented but they don't affect the core gameplay.

I am also thinking about the successor to this game. Now that the core engine is fine-tuned, I think the next entry in the series should be closer to the original concept: A wild, fast-paced, micro-game bonanza with dozens of (mobile-friendly) game types added over time.

Karma Blitz is keyboard only but Gamepad support should be pretty easy to implement, assuming it works through the Devvit platform. I will definitely be experimenting with this soon.