Basic structure

src/assets/styles.css

@@ -2,12 +2,13 @@ body {
     background-color: black;
     margin-top: 50px;
     text-align: center;
-    color: #a44;
+    color: white;
+    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 }
 
 h1 {
+    color: #5f5f7b;
     font-size: 4em;
-    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     margin: 0;
 }
 a {
@@ -15,11 +16,17 @@ a {
 }
 p {
     margin-bottom: 20px;
+    color: gray;
 }
 
 canvas {
     background-color: white;
     margin: auto;
     display: block;
-    border: 1px solid #a44;
+    border: 1px solid #5f5f7b;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: -webkit-crisp-edges;
+    image-rendering: pixelated;
+    width: 800px;
+    height: 400px;
 }

src/index.html

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

src/main.js

@@ -1,29 +1,79 @@
+"use strict";
+
+// Plot: You are in the dark, and you have no clue where you are
+// and what happened. You wake up in completely dark and stumble
+// around. You explore the area and you find out you are on a
+// old space ship. You need to find out whats going on here and
+// why you are here. After finding and combining some items, you
+// find out that your stasis capsule had some malfunctioning and
+// you are the only one on this mission. But what mission? And
+// where are your crew members? Where are you? You are drifting
+// along, lost in space with no hope of rescue. But you want to
+// surrender.
+// You find out that you are the only surrender on an ancient
+// space ship, carring cargo from one place to another when
+// space pirates killed the crew except you. You want to fly
+// home, but you need to bring the ship back to life.
+
+// Ship:
+// Statis capsule room
+// Cargo room
+// Command station
+// Crew quarters
+// Machine/Engine room
+
+// Act 1: No light at all. Only player. Can walk. If the player
+// hit a wall (he stands in a corridor), he can switch on the light.
+// He sees the room and the stasis capsule. Explore the room,
+// find out more details about your current situation (statis
+// no one is here, ship don't move, warning signs everywhere).
+
+// Act 2: Open the pressure door, find a space suite, get a map
+// fix a leak in the ship.
+
+// Act 3: Go into the command station, find out more on the
+// terminals, fix some things by exploring the rest of the ship.
+
+// Act 4: Bring the ship back to operation, find the way home,
+// end.
+
+
+
+// TODO: draw the different rooms
+// TODO: Put it on the screen, "player" movement (mouse is the player)
+// TODO: "speech bubbles" for text
+// TODO: Item store
+
 (function() {
     kontra.init('js13k-2017');
-    //kontra.canvas.width = document.body.scrollWidth;
-    //kontra.canvas.height = document.body.scrollHeight;
+    kontra.assets.load(
+        'assets/images/test.png'
+    ).then(function() {
+        var image = new Image();
+        image.src = 'assets/images/test.png';
+        
+        var sprite = kontra.sprite({
+            x: 10,
+            y: 20,
+            width: 16,
+            height: 16,
+            dx: 0,
+            image: image
+        });
 
-    var sprite = kontra.sprite({
-        x: 100,
-        y: 80,
-        color: '#bb4444',
-        width: 50,
-        height: 50,
-        dx: 1
-    });
+        var loop = kontra.gameLoop({
+            update: function() {
+                sprite.update();
 
-    var loop = kontra.gameLoop({
-        update: function() {
-            sprite.update();
-
-            if (sprite.x > kontra.canvas.width) {
-                sprite.x = -sprite.width;
+                if (sprite.x > kontra.canvas.width) {
+                    sprite.x = -sprite.width;
+                }
+            },
+            render: function() {
+                sprite.render();
             }
-        },
-        render: function() {
-            sprite.render();
-        }
-    });
+        });
 
-    loop.start();
+        loop.start();
+    });
 })();