diff --git a/src/assets/styles.css b/src/assets/styles.css index fce0104..68f6daf 100644 --- a/src/assets/styles.css +++ b/src/assets/styles.css @@ -19,10 +19,17 @@ p { color: gray; } -canvas { - background-color: white; - margin: auto; +#content { display: block; +} +#content > div { + position: relative; + width: 800px; + margin: auto; +} + +canvas { + background-color: black; border: 1px solid #5f5f7b; image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; @@ -30,3 +37,12 @@ canvas { width: 800px; height: 400px; } + +#bubble { + color: white; + top: 320px; + left: 70px; + display: block; + position: absolute; + text-align: left; +} diff --git a/src/index.html b/src/index.html index 4b1470d..be52c56 100644 --- a/src/index.html +++ b/src/index.html @@ -3,8 +3,14 @@
a js13kgame by Aaron Fischer (2017)
- +loading game ...
+ diff --git a/src/main.js b/src/main.js index 4c8e221..244c78e 100644 --- a/src/main.js +++ b/src/main.js @@ -56,7 +56,13 @@ if (kontra.store.get('current-room') === null) kontra.store.set('current-room', 'stasis_dark'); - + + muri.talk([ + 'Uh ...', + 'Where I am? ...', + 'It is so dark in here, I can\'t even see my bare hands. I can\'t remember a thing and my brain hurts so bad. What happened here?' + ], [40, 20]); + var rooms = { stasis_dark: kontra.sprite({x: 0, y: 0, image: kontra.assets.images.room_stasis_dark}), stasis: kontra.sprite({x: 0, y: 0, image: kontra.assets.images.room_stasis}) diff --git a/src/muri.js b/src/muri.js new file mode 100644 index 0000000..65e463b --- /dev/null +++ b/src/muri.js @@ -0,0 +1,22 @@ +var muri = { + bubble: function(text, position=[2, 7], delay=3, callback=false) { + var bubble = document.getElementById('bubble'); + bubble.style.display = ''; + bubble.style.left = position[0]*8; + bubble.style.top = position[1]*8; + bubble.innerHTML = text; + setTimeout(function() { + bubble.style.display = 'none'; + if (callback !== false) callback.call(); + }, delay*1000); + }, + + talk: function(texts, position) { + if (texts.length === 0) return; + var text = texts.shift(); + var delay = Math.ceil(text.length/13); + this.bubble(text, position, delay, function() { + muri.talk(texts, position); + }); + } +};