Getting Started

Download

• Production and development versions
• $ npm install kontra

Load

Load the library by adding it as a script tag to the page. Kontra does not support module loading at this time (CommonJS, es6, etc.).

<script src="kontra.js"></script >

Want to get started without all the hassle? Web Maker has you covered! When you start a new project, select the Kontra Game Engine from the list of predefined templates and you're good to go. Learn more by reading the Web Maker and JS13k tutorial.

Initialize

Initialize the game by calling kontra.init() to create the drawing context. By default, it will use the first canvas element on the page, but you can also pass it the ID of the canvas or a Canvas element.

kontra.init();

Create

Once the game is initialized, you can create a simple sprite and game loop in just a few lines of code.

let 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 }); let 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