Js13KGames Video Tutorial Series

js13kGames Tutorial Video Series

In this video series made for our YouTube channel subscribers, we cover the creation of a simple “cross the road” / “frogger” type of game using the Kontra JavaScript micro-framework.

This 4-part tutorial is not just about programming. We also cover other important aspects such as the creation of a level using Tiled, how to reduce the size of our images using Gimp, and how to create a put together a custom build of the Kontra library using Node.js and Gulp. No prior experience with any of these technologies is required (except for JavaScript).

The series is aimed at people with basic JavaScript knowledge who want to participate in the JS13KGames online competition. This event consists on the creation of a HTML5 game in less than 13kb (zipped). This great event is organized by Andrzej Mazur, game programmer and founder of Enclave Games.

Constraints are great for creativity. They allow us reduce the scope of our projects and to keep things simple. The competition takes place every year and it goes on for a month, so you have plenty of time to work on your game!

Subscribe so you don’t miss anything

Be the first one to watch our new videos and to learn about our new courses by subscribing to ZENVA’s YouTube channel.

Tutorial source code files

You can download the game and it’s assets (total 11kb) here.

Part 1

Part 2

Part 3

Part 4

Interested in becoming a game dev pro?

Check out The Complete Mobile Game Development Course – Platinum Edition, our premium online course where we teach programming from scratch and cover the creation of 15 mobile games using JavaScript and the awesome Phaser library.

Published by

Pablo Farias Navarro

Founder of Zenva - the world's leading platform to learn programming and game development, which features a community of over 400,000 learners.Pablo is also a member of the Intel Software Innovator program in the Asia Pacific Region, and the Oculus Start program, which features upcoming developers and startups in the VR space.

Share this article

Leave a Reply

1 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Steven Copeland Recent comment authors
newest oldest most voted
Steven Copeland
Steven Copeland

Here is my solution to the first video:


var sprite = kontra.sprite({
x: 100,
y: 50,
width: 50,
height: 100,
color: ‘green’,
dx: 5,
dy: 0.6,
bounce: 0.6

var loop = kontra.gameLoop({
update: function() {
if (sprite.x >= 206) {
sprite.x = 206
sprite.dx = -(sprite.dx * sprite.bounce);
} else if (sprite.x 156) {
sprite.y = 156;
sprite.dy = -(sprite.dy * sprite.bounce);
} else if (sprite.y < 0) {
sprite.y = 0;
sprite.dy = -(sprite.dy * sprite.bounce);
render: function() {