20 Award-Winning JavaScript Games – js13kGames

The js13kGames competition, now in its 10th year, challenges developers to build a complete game using JavaScript, HTML, and CSS in just 13 kilobytes or less. For the 2021 edition, the theme was "space", and the entries did not disappoint. From farming sims to platformers, from rhythm games to roguelikes, developers proved once again that compelling, creative games can come in very small packages.

As a full-stack developer and an avid gamer, I never cease to be amazed by the ingenuity and skill on display in the js13kGames entries. The competition is a testament to the power of the web as a game development platform, and a great way to hone your coding chops.

So, let‘s take a closer look at some of the top entries from this year‘s competition. But first, a bit more context on the technical constraints and challenges of js13k development.

Squeezing an Universe into 13 Kilobytes

To put the file size limit into perspective, 13KB is:

• About 1/10th the size of a basic jQuery library
• Roughly the amount of data needed to store a 4-second MP3 file
• Less than a typical 16×16 pixel favicon image

Fitting an entire game into that space is no small feat. It requires extreme discipline and efficiency in every aspect of the development process.

Assets like graphics, sounds, and levels must be stored in creative ways. Many games use procedural generation techniques to create content on the fly rather than storing it all explicitly. For example, a level might be represented as a small chunk of data used to seed a random level generator. Or an image might be stored as a set of vectors and drawn dynamically at runtime.

Code must be brutally optimized and minified. Short variable names, minimal whitespace, and compact expressions are a must. There‘s no room for error handling, as each additional character counts. Developers often resort to code golf tricks that would make most linters weep.

And yet, each year, the entries find new ways to dazzle. The 2021 winners include puzzle games, precision platformers, arcade shooters, and even a Metroidvania. Many of these would be impressive even without the size constraints. So let‘s dive into some of the standouts.

Stars of the Show

🥇 Space Garden

Space Garden, by Ryan Malm, is a farming sim set aboard a space station. You must carefully tend to your crops, splicing together different plant types to create new varieties while managing environmental factors like temperature and humidity. The star of the show is the realistic plant physics. Leaves and vines grow and sway based on configurable properties, creating a believable and soothing space garden vibe.

From a technical perspective, Space Garden is a master class in procedural content. The entire state of the game, from the plants to the layout of the station, is represented in just a few bytes of initial seed data. This allows for a huge amount of variability and emergent gameplay that would be impossible to store statically.

🥈 Beat Rocks

In Beat Rocks by Kos, you mine asteroids…to the beat! Blocks fly out from the asteroid in sync with the thumping techno soundtrack, and you must deftly catch the valuable gems while avoiding less useful debris. The vector graphics are stylish and the controls are tight, making for an addictive arcade experience.

Beat Rocks is open source, offering a great example of data-oriented design for web games. Instead of using object-oriented patterns, game state is stored in flat, cache-friendly arrays. This avoids a lot of the performance pitfalls that can plague web games and allows the gameplay to stay smooth even with hundreds of objects on screen.

🥉 The Adventures of Captain Callisto

A crash landing on an alien planet kicks off this expansive Metroidvania-style platformer. You explore a vast, interconnected world, finding powerups that help you reach new areas and take on new challenges. The pixel art is charming and the world design is impressively dense given the size constraints.

Captain Callisto‘s developer, Cody Ebberson, created a custom physics and collision engine for the game. Packing so much content and such robust systems into 13KB is a truly mind-bending achievement.

Technical Feats

While the games themselves are impressive, sometimes it‘s the underlying tech that really steals the show. Here are a few notable examples of technical wizardry:

• First-person shooter Q1K3 by Dominic Szablewski fits its entire codebase and level geometry into just 1024 bytes by using a height map compression scheme.
• Pac-Man clone Packabunchas by Mattia Fortunati generates its mazes on the fly using seeded random number generators, allowing for endless levels that can be reconstructed from tiny seed values.
• The Maze of Space Goblins by Jani Nykänen uses a custom 4-color palette where each color is stored as just 2 bits, dramatically reducing the size of its sprite data.

You can find many more examples of impressive optimizations and clever coding techniques by digging through the code of the open source entries. It‘s a goldmine for developers looking to up their game.

The Power of Open Source

Indeed, one of the best things about js13kGames is how many of the entries are open sourced. Developers host their code on GitHub, allowing anyone to freely download, run, modify, and learn from their creations.

For aspiring game devs, this is an invaluable resource. Seeing how experienced developers approach problems, structure their code, and squeeze every byte out of their builds is a great way to improve your own skills. You might just discover a new favorite coding trick or design pattern.

Even for non-game developers, exploring the entries is a great way to see the breadth of what‘s possible on the web. You‘ll find creative uses of modern web APIs, performance optimization techniques, and clever algorithms that are applicable across many domains.

The Future of Web Gaming

The js13kGames competition is a microcosm of the larger web game development scene. The entries showcase what‘s possible with modern web technologies and hint at the bright future of browser-based gaming.

Consider how far we‘ve come. Just a decade ago, making any kind of game in JavaScript was a daunting prospect. Performance was a constant struggle, cross-browser compatibility was a nightmare, and key APIs like WebGL were just emerging.

Now, js13kGames entries are routinely hardware-accelerated 3D games with physics, procedural content, and console-quality graphics and sound. And they run in any modern web browser, no plugins required.

This is thanks to the tireless work of web standards bodies and browser vendors in improving key APIs for game development, such as:

• WebGL for performant, hardware-accelerated 3D graphics
• Web Audio for low-latency, positional sound
• Gamepad API for supporting console-style game controllers
• WebAssembly for running high-performance C/C++ code in the browser
• WebXR for virtual and augmented reality experiences

The list goes on. With each passing year, the gap between what‘s possible in a native game versus a web game shrinks.

And the web has some distinct advantages as a game platform. The instant, frictionless nature of accessing a web game cannot be overstated. There are no downloads, no installs, no patch cycles. A game can be up and running with a single click. This is huge for accessibility and reaching wide audiences.

The open nature of the web is also a big win for game preservation. As long as there are web browsers, js13kGames entries will remain playable. Contrast this with the often ephemeral nature of native games, where platform dependencies, DRM, and walled gardens can render games inaccessible in the long run.

So while js13kGames will always be a fun and challenging exercise in extreme optimization, it‘s clear that the web game dev scene is thriving well beyond the 13KB limit. And that‘s a win for developers and players alike.

Closing Thoughts

The js13kGames competition never fails to impress with its creativity, ingenuity, and technical mastery. The 2021 "space" theme brought out some stellar entries that pushed the boundaries of what‘s possible in 13KB.

But beyond the individual games, js13kGames is a celebration of the web as an open, accessible, and powerful game development platform. It‘s a reminder of how far we‘ve come and a tantalizing glimpse of where we‘re heading.

So check out the entries, dig through the code, and most importantly, be inspired to create. Whether you‘re building the next great web game or just looking to hone your coding skills, js13kGames is a launchpad for developers of all stripes.

To infinity and beyond! 🚀