diff --git a/src/assets/images/test.png b/src/assets/images/test.png new file mode 100644 index 0000000..e80d5f9 Binary files /dev/null and b/src/assets/images/test.png differ diff --git a/src/assets/styles.css b/src/assets/styles.css index 25839e5..fce0104 100644 --- a/src/assets/styles.css +++ b/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; } diff --git a/src/index.html b/src/index.html index 567933c..9a3563f 100644 --- a/src/index.html +++ b/src/index.html @@ -1,9 +1,9 @@ -
a js13kgame by Aaron Fischer (2017)
- + diff --git a/src/main.js b/src/main.js index 7cae803..1d0f421 100644 --- a/src/main.js +++ b/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(); + }); })();