# Getting Started

## Download

- Global object production and development versions
- ES module production and development versions
- `$ npm install kontra`

## Load

There are a few different ways to load the library depending on how you are going to use it.

### Global Object

Load the library by adding it as a script tag. This will add a global `kontra` object to the page with all Kontra functions and properties.

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

### ES Module Import

Kontra also supports ES modules and exports all API functions, allowing you to import it into your code as well. Import the file `kontra.mjs` and either use the entire `kontra` object or just import the functions you need.

    import kontra from 'path/to/kontra.mjs';

### Module Bundler

If you're using a module bundler that supports npm dependency resolution (such as Webpack or Parcel), you can import the library directly from the module name. This is the recommended way to create custom builds of the library.

    import kontra from 'kontra';

### Web Maker

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 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.

The `init()` function returns the canvas and context used for the game.

    let { init } = kontra;

    let { canvas, context } = init();

    import { init } from 'path/to/kontra.mjs';

    let { canvas, context } = init();

    import { init } from 'kontra';

    let { canvas, context } = init();

## Create

After the game is initialize, you can create a simple Sprite and Game Loop in just a few lines of code

    let { init, Sprite, GameLoop } = kontra

    let { canvas } = init();

    let sprite = 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 = 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 > canvas.width) {
          sprite.x = -sprite.width;
        }
      },
      render: function() { // render the game state
        sprite.render();
      }
    });

    loop.start();    // start the game

    import { init, Sprite, GameLoop } from 'path/to/kontra.mjs'

    let { canvas } = init();

    let sprite = 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 = 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 > canvas.width) {
          sprite.x = -sprite.width;
        }
      },
      render: function() { // render the game state
        sprite.render();
      }
    });

    loop.start();    // start the game

    import { init, Sprite, GameLoop } from 'kontra';

    let { canvas } = init();

    let sprite = 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 = 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 > canvas.width) {
          sprite.x = -sprite.width;
        }
      },
      render: function() { // render the game state
        sprite.render();
      }
    });

    loop.start();    // start the game