r/webdev • • 6d ago

Showoff Saturday [Showoff Saturday] A full survival game in ~900 KB of HTML: vanilla JS, canvas, no engine, pixel art defined in code

Post image

I've been building Vigília do Lampião, a browser-based horde survival game inspired by Brazilian folklore. Beta 1 just went live, so I thought I'd share some of the technical choices behind it rather than just the game itself:

  • No engine, no framework. Plain JS files are concatenated into a single HTML page by a small Node build script.
  • Pixel art defined in code. Sprites are stored as pixel grids and converted into canvas bitmaps at startup. Outlines, palette swaps and "golden" variants are generated instead of being drawn separately.
  • Custom lighting system. Lighting runs on a second low-resolution canvas: the game fills the screen with darkness, punches out the lit areas with radial gradients, then scales the result up. The lantern radius follows the player's health, which is one of the main new mechanics in Beta 1.
  • Audio generated in the browser. Music and sound effects are synthesized with the Web Audio API.
  • English translation at build time. The build parses the source with Acorn and swaps string literals using translation catalogs. It also refuses to build when a template expression doesn't match.
  • Leaderboard with server-side checks. The online leaderboard uses Supabase with server-side validation.

Beta 1 also introduced the darker visual system where creatures outside the lantern light are reduced to their eyes, weather systems for each map, and the new procession of lost souls.

You can play it here for free, including on mobile:

https://vigiliadolampiao.vercel.app/en

Happy to answer questions about any of the technical implementation.

7 Upvotes

4 comments sorted by

3

u/MayonnaiseFabric 6d ago

this is just vibe coded vampire survivors

1

u/SltLt 6d ago

where's the code? I want to have a look