Create a 13 kB JavaScript game in 30 days with js13kGames

js13kGames logo

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:

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

Kontra.js code example

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!

miniMusic example

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 screenshot

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

LOSSST screenshot

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

Greeble screenshot

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

Lost Packets screenshot

@ElementalSystemsLost 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

Vernisage screenshot

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.

GitHub anti-bribery and events policies now open source

As a company that takes our commitment to social responsibility seriously, we’ve created and open sourced policies for others to adapt and use. We’re excited to announce that we’ve added four new policies to the collection.

Anti-bribery policies

The Anti-Bribery Statement and Gifts and Entertainment Policy are policies related to bribery. We designed these policies to promote compliance with anti-bribery laws, including the US Foreign Corrupt Practices Act and the UK Bribery Act.

Beyond our policy commitment to prohibiting bribery, the statement describes the concrete actions we take to back up our words. A key element of ensuring our employees know how to avoid bribery is education. We now provide anti-bribery training to all employees, with additional training for particularly relevant people and teams, like the sales team. We also now require our channel partners and vendors to comply with our anti-bribery statement.

In describing our anti-bribery policies, we note our Code of Ethics, Standards of Conduct, and Gifts and Entertainment Policy. We decided to open source a separate policy on gifts and entertainment to provide more detail on the activities with the highest risk of potential bribery. We include examples of what’s acceptable and what’s unacceptable, explain consequences for violations, and link to the DOJ and SEC’s Resource Guide on the Foreign Corrupt Practices Act.

Events policies

With GitHub’s annual Universe conference coming up, we realized it was a great time to update and open source our Event Terms and Event Code of Conduct. Both policies aim to create an inclusive, inviting, engaging, and safe place for people to learn and participate.

The code of conduct sets expectations for event speakers, attendees, exhibitors, organizers, and volunteers to show each other respect and courtesy. We make it clear that we are dedicated to providing a positive and harassment-free event experience for everyone—regardless of age, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, ethnicity, race, religion, nationality, or level of experience—and that we do not tolerate harassment of event participants in any form. We provide examples of acceptable and unacceptable behavior and contact information for reporting incidents. The terms provide more of the legalese, including basic requirements to attend (like agreeing to the code of conduct).

We hope our policies will help our users who may lack time or other resources to craft policies by providing a starting point and basis for them to contribute to best practices against bribery and corruption. We welcome you to adapt and reuse these policies.

Check out GitHub’s open source policies

Join us for Craftwork NYC on August 14

Greetings, New York City! Join us on August 14 for our latest Craftwork event. This workshop is open to developers of any skill level who want to learn how to use the GitHub API to build better developer workflows. We’ll have stickers for everyone, too!

GitHubbers will walk attendees through the process of creating their first GitHub App. This workshop will cover:

  • Introduction to the GitHub Apps flow
  • Probot, a great tool for getting started building GitHub Apps
  • Hosting code with Glitch

Beginners welcome

Craftwork is a hands-on workshop for learning how to build GitHub Apps—tools that can help make you and your team more productive with GitHub. The atmosphere is casual and informal; we’ll all be working together and helping each other out to build or first GitHub Apps. You will be able to work at your own pace with the help of a GitHubber nearby in case you run into any trouble.

You’ll leave with a working GitHub App, deployed and ready to use, and the confidence to continue building the tools you need to be more productive with your open source project, or at your work.

Details

For: Beginner and experienced developers alike who are looking to extend GitHub with apps\ When? August 14, 2018, 6-9pm EDT\ Where? 91 East 3rd Street, New York, NY 10003\ RSVP: RSVP as an attendee

If you do not yet have a GitHub account, be sure to create one before the event. It’s fast, easy, and free.

Food and refreshments will be provided. If you have any dietary restrictions, please let us know during registration.

Scholarships and accessibility at GitHub Universe 2018

Update as of 8/17/2018: Thank you to the hundreds of people who submitted an application to our 2018 GitHub Universe Individual Scholarship Program. Our application period for individual scholarships has ended on Friday, August 17, and we are no longer accepting new applications. We hope to accommodate many of the requests, but unfortunately only have a limited number of free tickets to offer.

We hope to see you at San Francisco’s beautiful Palace of Fine Arts!


We’re thrilled to announce our 2018 GitHub Universe Scholarship Program. This year, GitHub Universe is taking place on October 16-17 at the Palace of Fine Arts in San Francisco. As part of our ongoing commitment to make GitHub’s conferences accessible and inclusive to people from all walks of life, we’re excited to offer free tickets through our Community Partner and our Individual Scholarship Programs:

  • Community Partners: GitHub’s Social Impact Team is once again partnering with several local nonprofits and meetup groups in order bring even more diversity to Universe. We do this out of our dedication to ensuring a more rich, dynamic, and creative experience for everyone in attendance.
  • Individual Scholarship Program: For those interested in a free ticket to Universe, we do have a small number available for individuals.

Please note that individual scholarships only cover the cost of admission to Universe. Scholarships do not include any travel or lodging expenses. Scholarship recipients are responsible for arranging and paying for all their own travel and lodging expenses to, from, and within San Francisco.

Scholarships aren’t the only one way we’re making GitHub Universe more inclusive. This year, we’re proud to bring all of the following to the Universe experience:

  • Inclusive meals (vegetarian, vegan, dairy-free, and gluten-free offered. Additional dietary requirements can be arranged with 48 hours notice)
  • Gender neutral bathrooms
  • Quiet/meditation room
  • Nursing/baby care room (refrigeration provided upon request)
  • Closed captioning at all talks
  • ADA compliant venue spaces
  • Fresh water, treats, and an onsite relief area for service or therapy dogs

Changelog

Subscribe

Discover new ways to build better

Try Marketplace apps free for 14 days

Learn more