Building Blosharper with HTML, CSS, and JavaScript

On this page

This is an edited version of a devlog I published on itch.io on July 3, 2026.

Blosharper is a card game built with HTML, CSS, JavaScript, and TypeScript rather than a commercial game engine. After years of frontend development, I started with the tools I knew well. Web technologies let me put an idea on screen quickly and change it as I worked out how the game should feel.

A card game built around its interface

Much of Blosharper is about planning moves, building a deck, and interacting with cards. How those cards and their information appear and respond on screen is a substantial part of the game.

I used flexbox and grid for layout, with CSS animation for movement and skill effects. The techniques were familiar from building web interfaces, and they suited a game where cards and UI occupy so much of the screen.

Movement with DOM and CSS

People sometimes ask whether a game built with web technologies will stutter. A large number of moving DOM elements can certainly put pressure on rendering. Knowing the tools did not remove the need to work on performance.

For card animations and effects, I focused on transform and opacity and on making use of the browser's hardware acceleration. Those choices alone do not guarantee a particular frame rate in every scene.

Card selection and play flow into score and multiplier effects. Gameplay footage from the Steam store.

SVG filters and the game's atmosphere

SVG filters and CSS backdrop-filter helped create the dark, rough look I wanted. Glitches, blood splatters, and screen shakes were built by combining Web APIs and CSS.

The cards and interface remained DOM elements. Adding texture and movement to that familiar structure was how I approached the game's noir atmosphere.

Scene transitions and a shift in color set the mood when a boss arrives. Gameplay footage from the Steam store.

TypeScript and Electron

The rendering core was built in TypeScript without React or Vue. I used a game-specific core rather than fitting the game into an existing web framework.

For desktop distribution, I used Electron to package the HTML, CSS, and JavaScript application for Windows, macOS, and Steam Deck.

Packaging was only part of the work. Controller input, save-data encryption, and audio-context handling still needed attention. Working through those tasks was part of getting the demo ready.

Later rendering experiments

This post records the technologies behind Blosharper's original presentation. Later, I also tried HTML-in-Canvas as a different rendering path while keeping the HTML layout. I wrote about the visual differences and the problems I encountered in I Put HTML-in-Canvas in My Game. Then Turned It Off by Default..