Building games

in 13 kilobytes

Andrzej Mazur • @end3r • Enclave Games
Front-end Hero meetup, Kraków, July 14th 2022

js13kGames

js13kgames.com

onGameStart 2012

end3r.com/blog/2012/09/ongamestart-2012-the-aftermath/

Enclave Games

enclavegames.com

Why participate?

• For fun, challenge yourself
• Grow your skills
• Meet new friends
• Win cool prizes

youtube.com/watch?v=V06vtANbGCE

2012-2021: 1770 entries

github.com/js13kgames

Post mortems

phoboslab.org/log/2021/09/q1k3-making-of

48 hours

30 days

Eat, sleep, code, repeat.

"Size was never an actual problem."

"I ran out of time
before I ran out of space."

13 kb is A LOT

Limitations spawn creativity

HTML

<style> body { margin: 0; background: black; ... } </style>
<canvas></canvas>
<script>
  document.title = "Blade Gunner";
  ...
</script>

Loading images

var i = new Image();
i.addEventListener('load', function() { // image can be drawn });
i.src = 'data:image/png;base64,iVBORw0KGgoAAAANS...RU5ErkJggg==');

Level data

Snake.UI = {
    food: [
       [       ],
       [ , ,1  ],
       [ ,1, ,1],
       [ , ,1  ]
    ]
};

Sounds

Snake.Sound.sounds = {
// Example sound - entering the TRON mode
enterTronMode: [
jsfxr([0,,0.0864,,0.4458,0.2053,,0.3603,,,,,,0.2349,,0.4484,,,1,,,,,0.5]),
jsfxr([0,,0.2012,,0.4803,0.2939,,0.326,,,,,,0.525,,0.6112,,,1,,,,,0.5]),
jsfxr([0,,0.2424,,0.2184,0.2631,,0.2023,,,,,,0.2315,,,,,1,,,,,0.5]),
jsfxr([0,,0.0429,,0.4426,0.5,,0.2284,,,,,,0.1798,,,,,1,,,,,0.5]),
jsfxr([1,,0.2311,,0.2188,0.2821,,0.0801,,,,,,,,,,,1,,,,,0.5])
]
};

Procedural content generation

Lost in the Woods, Phosphorus Dating

js13kgames.github.io/resources

Setup

• Microlibary - kontra
• Artwork - pico8
• Sound - jsfxr
• Music - sonant-x
• Minification - advzip

 
Galactic Backfire

Don't try this at home

• Replacing Math.PI with a global variable named pi
• Removing the end tags for HTML, BODY, HEAD, CANVAS
• Removing/shortening string constants
• No images, everything is rendered using primitives
• Shortening class names in CSS
• ...
• Removed space in "GAME OVER" so it reads "GAMEOVER"

js13kGames

===

Enclave Games

===

Front-end

A decade and 1770 games later...

Scope

Working prototype

Perfection or vanity

If at first you don't succeed,

try again start something else