Scaffold

src/assets/styles.css

@@ -0,0 +1,25 @@
+body {
+    background-color: black;
+    margin-top: 50px;
+    text-align: center;
+    color: #a44;
+}
+
+h1 {
+    font-size: 4em;
+    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    margin: 0;
+}
+a {
+    color: white;
+}
+p {
+    margin-bottom: 20px;
+}
+
+canvas {
+    background-color: white;
+    margin: auto;
+    display: block;
+    border: 1px solid #a44;
+}

src/index.html

@@ -1,3 +1,9 @@
-<script src=vendor/kontra.js></script>
-<script src=main.js></script>
-<canvas width="500" height="300" id="game"></canvas>
+<link rel="stylesheet" href="assets/styles.css"></link>
+
+<h1>JS13KGames 2017</h1>
+<p>by <a href="https://aaron-fischer.net/">Aaron Fischer</a></p>
+
+<canvas width="600" height="480" id="js13k-2017"></canvas>
+
+<script src="vendor/kontra.js"></script>
+<script src="main.js"></script>

src/main.js

@@ -1,26 +1,29 @@
-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
-});
+(function() {
+    kontra.init('js13k-2017');
+    //kontra.canvas.width = document.body.scrollWidth;
+    //kontra.canvas.height = document.body.scrollHeight;
 
-var loop = kontra.gameLoop({  // create the main game loop
-  update: function() {        // update the game state
-    sprite.update();
+    var sprite = kontra.sprite({
+        x: 100,
+        y: 80,
+        color: '#bb4444',
+        width: 50,
+        height: 50,
+        dx: 1
+    });
 
-    // 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();
-  }
-});
+    var loop = kontra.gameLoop({
+        update: function() {
+            sprite.update();
 
-kontra.init(getElementById('game'));
-loop.start();    // start the game
+            if (sprite.x > kontra.canvas.width) {
+                sprite.x = -sprite.width;
+            }
+        },
+        render: function() {
+            sprite.render();
+        }
+    });
+
+    loop.start();
+})();