Lets go

src/index.html

@@ -0,0 +1,3 @@
+<script src=vendor/kontra.js></script>
+<script src=main.js></script>
+<canvas width="500" height="300" id="game"></canvas>

src/main.js

@@ -0,0 +1,26 @@
+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();
+  }
+});
+
+kontra.init(getElementById('game'));
+loop.start();    // start the game