diff --git a/src/assets/styles.css b/src/assets/styles.css
new file mode 100644
index 0000000..25839e5
--- /dev/null
+++ b/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;
+}
diff --git a/src/index.html b/src/index.html
index 92347c3..567933c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,3 +1,9 @@
-
-
-
+
+
+
JS13KGames 2017
+by Aaron Fischer
+
+
+
+
+
diff --git a/src/main.js b/src/main.js
index 6ae9105..7cae803 100644
--- a/src/main.js
+++ b/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();
+})();