diff --git a/css/game.css b/css/game.css index 24b2dd1..ab1bd22 100644 --- a/css/game.css +++ b/css/game.css @@ -1,3 +1,8 @@ +@font-face { + font-family: 'Minecraft'; + src: url('../res/fonts/Minecraft.ttf'); +} + html, body { margin: 0; padding: 0; @@ -46,4 +51,8 @@ div#menu > ul { div#menu > ul > li { padding-top: 10px; cursor: pointer; +} + +div#board > canvas { + letter-spacing: 2px; } \ No newline at end of file diff --git a/res/images/asdf-logo.png b/res/images/asdf-logo.png new file mode 100644 index 0000000..c895e3b Binary files /dev/null and b/res/images/asdf-logo.png differ diff --git a/res/images/keys/arrows.png b/res/images/keys/arrows.png new file mode 100644 index 0000000..5adef2c Binary files /dev/null and b/res/images/keys/arrows.png differ diff --git a/res/images/keys/ctrl.png b/res/images/keys/ctrl.png new file mode 100644 index 0000000..c0e53fc Binary files /dev/null and b/res/images/keys/ctrl.png differ diff --git a/res/images/keys/q.png b/res/images/keys/q.png new file mode 100644 index 0000000..b438a4e Binary files /dev/null and b/res/images/keys/q.png differ diff --git a/res/images/keys/space.png b/res/images/keys/space.png new file mode 100644 index 0000000..3ca89ff Binary files /dev/null and b/res/images/keys/space.png differ diff --git a/res/images/keys/t.png b/res/images/keys/t.png new file mode 100644 index 0000000..be95634 Binary files /dev/null and b/res/images/keys/t.png differ diff --git a/res/images/logo.png b/res/images/logo.png new file mode 100644 index 0000000..5d092f7 Binary files /dev/null and b/res/images/logo.png differ diff --git a/res/images/tutorial/interact.png b/res/images/tutorial/interact.png new file mode 100644 index 0000000..967f11f Binary files /dev/null and b/res/images/tutorial/interact.png differ diff --git a/res/lang/default.js b/res/lang/default.js index 630166e..f4f9acd 100644 --- a/res/lang/default.js +++ b/res/lang/default.js @@ -11,7 +11,7 @@ module.exports = { "Press Ctrl to sprint, but watch your stamina!", "Press space to interact with objects", "If the arrow above an object is red, you cannot interact with it", - "You might be missing key or have already interacted with it", + "You might be missing a key or have already interacted with it", "Press space to return" ], gameOver: { diff --git a/src/entities/chest.js b/src/entities/chest.js index 696939c..40ab61d 100644 --- a/src/entities/chest.js +++ b/src/entities/chest.js @@ -5,7 +5,7 @@ const { Texture, Sound, TileSprite, entity } = asdf; const texture = new Texture(__dirname + "/../../res/images/tilemap.png"); const sounds = { forbidden: new Sound(__dirname + "/../../res/sounds/forbidden.wav"), - obtain: new Sound(__dirname + "/../../res/sounds/obtain.wav") + obtain: new Sound(__dirname + "/../../res/sounds/obtain.wav", { volume: 0.1 }) }; const Pointer = require("./pointer.js"); @@ -67,7 +67,7 @@ class Chest extends TileSprite { if (this.state == state.closed) { this.state = state.open; this.pressed = true; - this.action(); + this.action(); sounds.obtain.play(); } else { if (!sounds.forbidden.playing && !this.pressed) { diff --git a/src/helpers/stats.js b/src/helpers/stats.js index 4d4c931..3f1f32c 100644 --- a/src/helpers/stats.js +++ b/src/helpers/stats.js @@ -5,7 +5,7 @@ const tilemap = new Texture("../res/images/tilemap.png"); const tileSize = 32; const text = require(__dirname + "/../../res/lang/default.js"); -const fillStyle = {fill: "#ffffff", font: "24px Arial"}; +const fillStyle = {fill: "#ffffff", font: "24px Minecraft"}; class Stats extends Container { constructor(player) { @@ -20,14 +20,14 @@ class Stats extends Container { livesText.pos = {x: 10, y: 310}; const livesCounter = new Text(player.lives, fillStyle); - livesCounter.pos = {x: 90, y: 310}; + livesCounter.pos = {x: 100, y: 310}; const heart = new TileSprite(tilemap, tileSize, tileSize); heart.frame = {x: tilemapFrames[42].x / tileSize, y: tilemapFrames[42].y / tileSize}; - heart.pos = {x: 104, y: 284}; + heart.pos = {x: 120, y: 284}; - const staminaText = new Text("| " + text.game.stamina + ":", fillStyle); - staminaText.pos = {x: 140, y: 310}; + const staminaText = new Text(text.game.stamina + ":", fillStyle); + staminaText.pos = {x: 160, y: 310}; this.children = [ background, @@ -41,7 +41,7 @@ class Stats extends Container { Array(5).fill().forEach((_val, index) => { const sprite = new TileSprite(tilemap, tileSize, tileSize); sprite.frame = {x: tilemapFrames[44].x / tileSize, y: tilemapFrames[44].y / tileSize}; - sprite.pos = {x: index * 26 + 270, y: 286}; + sprite.pos = {x: index * 26 + 290, y: 286}; this.children.push(sprite); }); } diff --git a/src/screens/gameover.js b/src/screens/gameover.js index 4bdc639..5d404ef 100644 --- a/src/screens/gameover.js +++ b/src/screens/gameover.js @@ -1,9 +1,9 @@ const asdf = require("asdf-games"); // eslint-disable-next-line no-unused-vars -const { Texture, Text, Container, Sprite } = asdf; +const { Text, Container, Rect } = asdf; const text = require(__dirname + "/../../res/lang/default.js"); -const fillStyle = {fill: "#ffffff", font: "24px Arial"}; +const fillStyle = {fill: "#ffffff", font: "24px Minecraft"}; class GameOver extends Container { constructor(game, keys, onEnd) { @@ -14,12 +14,14 @@ class GameOver extends Container { this.children = []; - var gameover = new Text(text.gameOver.dead, {fill: "#ffffff", font: "32px Arial"}); - gameover.pos = { x: 200, y: 200 }; + this.add(new Rect(this.game.w, this.game.h, { fill: "#333333" })); + + var gameover = new Text(text.gameOver.dead, {fill: "#bb0a1e", font: "60px Minecraft"}); + gameover.pos = { x: 188, y: 150 }; this.add(gameover); var instruction = new Text(text.gameOver.instruction, fillStyle); - instruction.pos = { x: 200, y: 236 }; + instruction.pos = { x: 125, y: 216 }; this.add(instruction); } diff --git a/src/screens/logo.js b/src/screens/logo.js index b289d87..4696ac2 100644 --- a/src/screens/logo.js +++ b/src/screens/logo.js @@ -1,9 +1,8 @@ const asdf = require("asdf-games"); // eslint-disable-next-line no-unused-vars -const { Texture, Text, Container, Sprite } = asdf; +const { Texture, Container, Sprite } = asdf; -const text = require(__dirname + "/../../res/lang/default.js"); -const fillStyle = {fill: "#ffffff", font: "24px Arial"}; +var logo = new Texture("../res/images/asdf-logo.png"); class Logo extends Container { constructor(game, onEnd) { @@ -12,16 +11,8 @@ class Logo extends Container { this.onEnd = onEnd; this.children = []; - - const textPos = { x: 200, y: 150 }; - for (let index = 0; index < text.logoScreen.length; index++) { - const element = new Text(text.logoScreen[index], fillStyle); - element.pos = { - x: textPos.x, - y: textPos.y + 24 * index - }; - this.add(element); - } + + this.add(new Sprite(logo)); this.lifetime = 2; } diff --git a/src/screens/title.js b/src/screens/title.js index b55fc96..4ba948b 100644 --- a/src/screens/title.js +++ b/src/screens/title.js @@ -1,9 +1,16 @@ const asdf = require("asdf-games"); // eslint-disable-next-line no-unused-vars -const { Texture, Container, Sprite, Text } = asdf; +const { Texture, Container, TileSprite, Text, AnimManager, Rect, Sprite } = asdf; const text = require(__dirname + "/../../res/lang/default.js"); -const fillStyle = {fill: "#ffffff", font: "24px Arial"}; +const fillStyle = {fill: "#ffffff", font: "24px Minecraft"}; + +const textures = { + space: new Texture("../res/images/keys/space.png"), + t: new Texture("../res/images/keys/t.png"), + q: new Texture("../res/images/keys/q.png"), + logo: new Texture("../res/images/logo.png") +}; class Title extends Container { constructor(game, keys, onStart, onTutorial, onQuit) { @@ -19,13 +26,46 @@ class Title extends Container { this.children = []; - const textPos = { x: 200, y: 200 }; + this.add(new Rect(this.game.w, this.game.h, { fill: "#333333" })); + + this.add(new Sprite(textures.logo)); + + this.keyCaps = [ + new TileSprite(textures.space, 64, 16), + new TileSprite(textures.t, 16, 16), + new TileSprite(textures.q, 16, 16) + ]; + + this.keyCaps.forEach(element => { + element.scale = { x: 1.5, y: 1.5 }; + element.anims = new AnimManager(element); + element.anims.add("press", [0, 1].map(y => ({ x: 0, y })), 0.50); + element.anims.play("press"); + console.log(element); + }); + + const textPos = { x: 220, y: 240 }; for (let index = 0; index < text.titleScreen.instructions.length; index++) { + const keyCap = this.keyCaps[index]; + if (index == 0) { + keyCap.pos = { + x: textPos.x - 120, + y: textPos.y + (28 * index) - 18 + }; + } else { + keyCap.pos = { + x: textPos.x - 56, + y: textPos.y + (28 * index) - 20 + }; + } + const element = new Text(text.titleScreen.instructions[index], fillStyle); element.pos = { x: textPos.x, y: textPos.y + 28 * index }; + + this.add(keyCap); this.add(element); } } diff --git a/src/screens/tutorial.js b/src/screens/tutorial.js index 74e300c..a893593 100644 --- a/src/screens/tutorial.js +++ b/src/screens/tutorial.js @@ -1,9 +1,16 @@ const asdf = require("asdf-games"); // eslint-disable-next-line no-unused-vars -const { Texture, Container, Text, Sprite } = asdf; +const { Texture, Rect, Container, Text, TileSprite } = asdf; const text = require(__dirname + "/../../res/lang/default.js"); -const fillStyle = {fill: "#ffffff", font: "20px Arial"}; +const fillStyle = {fill: "#ffffff", font: "16px Minecraft"}; + +const textures = { + space: new Texture("../res/images/keys/space.png"), + arrows: new Texture("../res/images/keys/arrows.png"), + ctrl: new Texture("../res/images/keys/ctrl.png"), + interact: new Texture("../res/images/tutorial/interact.png") +}; class Tutorial extends Container { constructor(game, keys, onEnd) { @@ -12,16 +19,52 @@ class Tutorial extends Container { this.keys = keys; this.onEnd = onEnd; + this.pos = { x: 0, y: 0 }; this.children = []; - const textPos = { x: 50, y: 150 }; + this.add(new Rect(this.game.w, this.game.h, { fill: "#333333" })); + + const title = new Text("Tutorial", {fill: "#ffffff", font: "36px Minecraft"}); + title.pos = { x: 12, y: 44 }; + this.add(title); + + this.images = [ + new TileSprite(textures.arrows, 48, 32), + new TileSprite(textures.ctrl, 21, 16), + new TileSprite(textures.space, 64, 16), + new TileSprite(textures.interact, 64, 39) + ]; + + this.instructions = []; for (let index = 0; index < text.tutorial.length; index++) { - const element = new Text(text.tutorial[index], fillStyle); - element.pos = { - x: textPos.x, - y: textPos.y + 24 * index - }; - this.add(element); + this.instructions.push(new Text(text.tutorial[index], fillStyle)); + } + + // Controls direction + this.images[0].pos = { x: 24, y: 60 }; + this.instructions[0].pos = { x: 12, y: 108 }; + + // Controls sprint + this.images[1].pos = { x: 24, y: 116 }; + this.instructions[1].pos = { x: 12, y: 148 }; + + // Controls action + this.images[2].pos = { x: 24, y: 156 }; + this.instructions[2].pos = { x: 12, y: 188 }; + + // Interact + this.images[3].pos = { x: 24, y: 196 }; + this.instructions[3].pos = { x: 12, y: 254 }; + this.instructions[4].pos = { x: 12, y: 274 }; + + // Back to menu + this.instructions[5].pos = { x: 12, y: 308 }; + + for (let index = 0; index < this.instructions.length; index++) { + if (this.images[index]) { + this.add(this.images[index]); + } + this.add(this.instructions[index]); } }