Basic structure

This commit is contained in:
Aaron Fischer 2017-08-15 15:38:23 +02:00
parent a212a9045a
commit 97788b9c39
4 changed files with 85 additions and 28 deletions

BIN
src/assets/images/test.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 B

View file

@ -2,12 +2,13 @@ body {
background-color: black; background-color: black;
margin-top: 50px; margin-top: 50px;
text-align: center; text-align: center;
color: #a44; color: white;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
} }
h1 { h1 {
color: #5f5f7b;
font-size: 4em; font-size: 4em;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin: 0; margin: 0;
} }
a { a {
@ -15,11 +16,17 @@ a {
} }
p { p {
margin-bottom: 20px; margin-bottom: 20px;
color: gray;
} }
canvas { canvas {
background-color: white; background-color: white;
margin: auto; margin: auto;
display: block; 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;
} }

View file

@ -1,9 +1,9 @@
<link rel="stylesheet" href="assets/styles.css"></link> <link rel="stylesheet" href="assets/styles.css"></link>
<h1>JS13KGames 2017</h1> <h1>murí</h1>
<p>by <a href="https://aaron-fischer.net/">Aaron Fischer</a></p> <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="vendor/kontra.js"></script>
<script src="main.js"></script> <script src="main.js"></script>

View file

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