Create a 13 kB JavaScript game in 30 days with js13kGames

What is js13kGames?

Js13kGames is a month-long JavaScript coding competition organized by @end3r. Running since 2012, it challenges participants to create a game in 13 kilobytes or less of JavaScript based on a theme that’s announced at the start of the competition.

Bonus: This year there’s a WebXR category meaning web developers can experiment with virtual reality experiences for the competition. For this category, you’ll have the same file size limit of 13 kilobytes, but you’ll get A-Frame or Babylon.js for free!

Developers of all skill levels are welcome to participate. It’s a great excuse to learn or level up your JavaScript, learn or improve upon game development skills, and have fun sharing your ideas. The theme for this year’s competition will be announced on August 13 at 13:00 CEST.

Tools and techniques to make the most of 13kB

With final package sizes having to be 13kB or less—and most JavaScript game engines and libraries being much larger—the size limit does pose an interesting challenge. Thankfully, past participants have shared some of the micro game engines they’ve created specifically for js13kGames. Rather than starting from scratch, check out and use some of these engines:

• Boilerplates and engines like @xem’s platform-engine, @kittykatattack’s Ga are useful for creating 2D arcade and platform games.
• Kontra.js by @straker is a lightweight and highly modular library that allows you to pick what you need and stay under 5kB.

Create a simple sprite and game loop in just a few lines of code using Kontra.js:

var sprite = kontra.sprite({
  x: 100,        // starting x,y position of the sprite
  y: 80,
  color: 'red',  // fill color of the sprite rectangle
  width: 20,     // width and height of the sprite rectangle
  height: 40,
  dx: 2          // move the sprite 2px to the right every frame
});

var loop = kontra.gameLoop({  // create the main game loop
  update: function() {        // update the game state
    sprite.update();

    // wrap the sprites position when it reaches
    // the edge of the screen
    if (sprite.x > kontra.canvas.width) {
      sprite.x = -sprite.width;
    }
  },
  render: function() {        // render the game state
    sprite.render();
  }
});

loop.start();    // start the game

Minify your JavaScript

It’s definitely not cheating to submit minified version of your code to make it fit within 13kB. It’s almost a necessity. Tools like @xem’s s miniMinifer and @google’s Closure Compiler are heavily used by participants to minify code.

“Don’t worry too much about names, or golfing. The best way to make an entry is to concat everything in one file, minify, zip and use advzip (to save an extra 1kb over regular zipping)!” – @xem

Tip: You can keep the original, unminified source code in your repository and work the minification into your build process or manually upload the minified version during the competition submission process.

Optimize every bit and byte of your images

Your game probably won’t have many images given the size constraints. Whether you’re taking existing assets from websites like OpenGameArt.org, or creating your own using something like Piskel or Poxi, you’ll want to compress them as much as possible. Be sure to run your images through optimization tools like @catid’s Zpng or @voordmedia’s TinyPng.

Be smart with sound

Adding audio to your game can quickly raise your total project size, but it definitely adds to its appeal. Luckily there are some great tools and techniques you can use to generate your own audio.

Generate all sorts of weird blips and bleeps using @grumdrig’s jsfxr, or hit the music studio with @Mbitsnbites’s HTML5 synth music tracker/editor SoundBox. @xem’s miniMusic even lets you draw your masterpiece!

And play it back:
with(new AudioContext)[4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7,7,7,8,8,8,8,8,8,8,8,8,8,8,9,9,9,9,9,9,9,9,9,9,9,9,10,10,10,10,10,10,10,10,10,10,10,10,10,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,13,13,13,13,13,13,13,13,13,13,13,14,14,14,14,14,14,14,14,14,14,14,14,14,15,15,15,15,15,15,15,15,15,15,15,15,16,16,16,16,16,16,16,16,16,16,16,16,17,17,17,17,17,17,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,23].map((v,i)=>{with(createOscillator())v&&start(e=[7,8,9,10,11,12,13,14,15,16,17,18,19,26,27,28,29,30,31,43,44,45,46,47,48,49,50,51,56,65,7,8,9,10,11,12,13,14,15,16,17,18,19,24,25,26,27,28,29,30,31,37,38,42,43,51,56,57,64,65,12,13,24,25,26,27,31,38,51,56,57,62,63,12,13,23,24,25,38,50,51,56,57,61,62,12,13,23,24,38,48,49,50,56,57,60,12,13,23,24,38,45,46,47,48,56,57,59,12,13,23,24,38,44,45,46,47,48,56,57,58,12,13,23,24,25,26,27,28,29,30,38,48,49,56,57,12,13,23,24,25,26,27,28,29,30,31,38,49,50,56,57,12,13,30,31,32,38,50,51,56,57,58,7,8,12,13,31,32,38,51,56,57,58,59,60,7,8,12,13,31,32,38,51,56,57,60,61,7,8,12,13,31,32,38,51,56,57,62,63,7,8,9,12,13,31,32,38,51,56,57,64,65,7,8,9,10,11,12,13,31,32,38,51,56,57,65,66,7,8,9,10,11,12,13,31,32,38,49,50,51,56,57,66,67,8,9,10,11,12,22,23,24,25,26,27,28,29,30,31,32,37,38,44,45,46,47,48,49,56,57,67,22,23,24,25,26,27,28,29,30,37,38,56,57,67,68,56,57,68,68][i]/5,connect(destination),frequency.value=988/1.06**v)+stop(e+.2)})

Learn from others

After the competition ends, some developers publish retrospectives—fantastic resources on what to do and what not to do to maximize your productivity (and your game’s playability) within the constraints of 30 days and 13kB.

If playing the games, viewing the source, and reading the developers’ retrospectives from last year’s event would be helpful, here are five of our favorites:

A Day in the Life

A Day in the Life is a minimalist endless runner controlled by just one button. It was created by @MattiaFortunati using Kontra.js, TinyMusic, and PixelFont–a novel way to squeeze a font into an entry.

View the source
Play the game
Read the postmortem

LOSSST

In LOSSST by @xem, you’re a puzzle-solving snake looking for a lost kid. Warning: the game is very addictive and the postmortem contains everything from the thought process coming up with the design to focused game implementation details.

View the source
Play the game
Read the postmortem

Greeble

In Greeble by @Rybar, you control a space-mining bot searching for enough fuel and parts to repair and explore.

View the source
Play the game
Read the postmortem

Lost Packets

@ElementalSystems’ Lost Packets is an abstract puzzle game where you help lost packets reach their destination—very impressive work for only 40-50 hours of work on nights and weekends.

View the source
Play the game
Read the postmortem

Vernissage

In Vernissage by @Platane you’re lost in a museum showcase low resolution works of art as a series of colored dots. Explore the world in VR or in browsers thanks to A-Frame–a web framework for building virtual reality experiences. The postmortem includes great detail on the genetic algorithm used to generate the art pieces.

View the source
Play the game
Read the postmortem

More tips and tutorials

The js13Kgames website lists even more resources and retrospectives that should prove useful. If there’s something you’d like to add, please create an issue (or better yet, a pull request) on https://github.com/js13kgames/resources.

Join in on the fun

Follow @jsk13kGames on Twitter or visit the website on August 13 at 13:00 CEST (4am PT/7am ET) to find out what the theme will be. You can also use the hashtag #js13k to see how others are doing and to share your progress.

Written by

Lee Reilly

@leereilly

Developer / Marketing / Community at GitHub. Twitter: https://twitter.com/leereilly.