From 11ef29918d10831bafb298dd448f0f7f8a981dea Mon Sep 17 00:00:00 2001 From: Matt Kohls Date: Sun, 10 Nov 2019 22:42:59 -0500 Subject: Changing out sprites to use so I have that goes with it --- public/js/rogue.js | 248 ++++++++++++++----------------------- public/scroll-o-sprites-edited.png | Bin 0 -> 14438 bytes public/scroll-o-sprites.png | Bin 0 -> 22402 bytes 3 files changed, 91 insertions(+), 157 deletions(-) create mode 100644 public/scroll-o-sprites-edited.png create mode 100644 public/scroll-o-sprites.png diff --git a/public/js/rogue.js b/public/js/rogue.js index db6198b..10f53b8 100644 --- a/public/js/rogue.js +++ b/public/js/rogue.js @@ -9,180 +9,120 @@ var gamemap = {}; -function Sprite(x, y, size) { +function Sprite(x, y, width, height) { this.x = x; this.y = y; - this.size = size; + this.width = width; + this.height = height; } var border = [ - new Sprite(13, 9, 1),// Top Right - new Sprite(12, 10, 1),// Top Left - new Sprite(11, 9, 1),// Bottom Right - new Sprite(9, 9, 1),// Bottom left - new Sprite(12, 12, 1),// Right - new Sprite(12, 9, 1),// Left - new Sprite(11, 12, 1),// Top - new Sprite(10, 9, 1)// Bottom + new Sprite(6, 28, 16, 16),// Top Right + new Sprite(5, 28, 16, 16),// Top Left + new Sprite(8, 28, 16, 16),// Bottom Right + new Sprite(7, 28, 16, 16),// Bottom left + new Sprite(3, 28, 16, 16),// Right + new Sprite(3, 28, 16, 16),// Left + new Sprite(2, 28, 16, 16),// Top + new Sprite(2, 28, 16, 16)// Bottom ]; -var paper = new Sprite(13, 12, 1); -var nothing = new Sprite(0, 0, 1); -var tile = new Sprite(10, 12, 1); -var dirt = new Sprite(10, 1, 1); +/** World Entities **/ + +var nothing = new Sprite(1, 6, 16, 16); +var tile = new Sprite(8, 26, 16, 16); +var dirt = new Sprite(3, 34, 16, 16); var wall = [ - new Sprite(1, 0, 1), - new Sprite(2, 0, 1), - new Sprite(3, 0, 1), - new Sprite(13, 10, 1), - new Sprite(13, 11, 1) + new Sprite(2, 26, 16, 16), + new Sprite(3, 26, 16, 16), + new Sprite(4, 26, 16, 16) ]; -var stairsdown = new Sprite(4, 0, 1); -var starisup = new Sprite(5, 0, 1); +var stairsdown = new Sprite(12, 26, 16, 16); +var starisup = new Sprite(13, 26, 16, 16); -var lava = [ - new Sprite(0, 0, 1), - new Sprite(0, 1, 1) -]; +var water = new Sprite(8, 34, 16, 16); -var water = [ - new Sprite(4, 1, 1), - new Sprite(5, 1, 1) -]; +var door = new Sprite(14, 26, 16, 16); -var door = [ - new Sprite(11, 1, 1), - new Sprite(12, 1, 1), - new Sprite(13, 1, 1), - new Sprite(14, 1, 1), - new Sprite(15, 1, 1) -]; +/** Items **/ -var chestclosed = [ - new Sprite(0, 2, 1), - new Sprite(2, 2, 1) -]; +var chestclosed = new Sprite(8, 37, 16, 16); +var chestopen = new Sprite(9, 37, 16, 16); -var chestopen = [ - new Sprite(1, 2, 1), - new Sprite(3, 2, 1) -]; +var potion = new Sprite(6, 42, 16, 16); +var scroll = new Sprite(8, 49, 16, 16); +var book = new Sprite(10, 49, 16, 16); -var potion = [ - new Sprite(4, 3, 1), - new Sprite(5, 3, 1), - new Sprite(6, 3, 1), - new Sprite(7, 3, 1), - new Sprite(8, 3, 1) -]; +var mace = new Sprite(13, 3, 1); +var dagger = new Sprite(2, 45, 16, 16); +var sword = new Sprite(3, 45, 16, 16); +var axe = new Sprite(4, 45, 16, 16); +var club = new Sprite(7, 45, 16, 16); +var hammer = new Sprite(8, 45, 16, 16); +var bow = new Sprite(11, 45, 16, 16); +var arrow = new Sprite(12, 45, 16, 16); -var book = [ - new Sprite(10, 3, 1), - new Sprite(11, 3, 1), - new Sprite(12, 3, 1), - new Sprite(13, 3, 1) -]; +var helmet = new Sprite(13, 45, 16, 16); +var boot = new Sprite(2, 46, 16, 16); +var robe = new Sprite(8, 46, 16, 16); +var armor = new Sprite(6, 46, 16, 16); +var shield = new Sprite(10, 45, 16, 16); -var mace = new Sprite(14, 3, 1); -var rapier = new Sprite(15, 3, 1); -var dagger = new Sprite(0, 4, 1); -var sword = new Sprite(1, 4, 1); -var battleaxe = new Sprite(2, 4, 1); -var axe = new Sprite(7, 4, 1); -var crossbow = new Sprite(3, 4, 1); -var bolt = new Sprite(4, 4, 1); -var bow = new Sprite(5, 4, 1); -var arrow = new Sprite(6, 4, 1); - -var helmet = [ - new Sprite(11, 4, 1), - new Sprite(12, 4, 1), - new Sprite(13, 4, 1) -]; +var heart = new Sprite(7, 55, 16, 16); -var boot = [ - new Sprite(15, 4, 1), - new Sprite(0, 5, 1) -]; +/** Mobs **/ -var robe = [ - new Sprite(1, 5, 1), - new Sprite(2, 5, 1) +var player = [ + new Sprite(2, 6, 16, 16), + new Sprite(2, 7, 16, 16) ]; -var armor = new Sprite(4, 5, 1); -var heart = new Sprite(7, 9, 1); -var shield = new Sprite(6, 9, 1); +var necromancer = new Sprite(9, 20, 16, 16); +var goblin = new Sprite(2, 17, 16, 16); +var zombie = new Sprite(2, 20, 16, 16); +var bat = new Sprite(3, 14, 16, 16); +var ember = new Sprite(6, 23, 16, 16); +var slime = new Sprite(2, 23, 16, 16); +var skeleton = new Sprite(4, 20, 16, 16); +var litch = new Sprite(6, 20, 16, 16); +var snake = new Sprite(8, 14, 16, 16); +var rat = new Sprite(2, 14, 16, 16); +var ghost = new Sprite(7, 20, 16, 16); -var player = [ - new Sprite(5, 5, 1), - new Sprite(6, 5, 1), - new Sprite(7, 5, 1), - new Sprite(9, 5, 1) -]; +/** Font **/ +var number = new Sprite(2, 59, 8, 16); +var upper = new Sprite(2, 60, 8, 16); +var lower = new Sprite(2, 62, 8, 16); -var ghoul = new Sprite(8, 5, 1); -var wizard = new Sprite(10, 5, 1); -var necromancer = new Sprite(11, 5, 1); -var specter = new Sprite(12, 5, 1); -var orc = new Sprite(0, 6, 1); -var zombie = new Sprite(1, 6, 1); -var entling = new Sprite(2, 6, 1); -var bat = new Sprite(3, 6, 1); -var ember = new Sprite(4, 6, 1); -var slime = [ - new Sprite(5, 6, 1), - new Sprite(6, 6, 1) -]; -var octopus = [ - new Sprite(7, 6, 1), - new Sprite(8, 6, 1) -]; -var skeleton = new Sprite(9, 6, 1); -var litch = new Sprite(10, 6, 1); -var snake = [ - new Sprite(11, 6, 1), - new Sprite(12, 6, 1), - new Sprite(13, 6, 1) -]; -var rat = [ - new Sprite(14, 6, 1), - new Sprite(15, 6, 1) -]; -var drake = [ - new Sprite(0, 7, 1), - new Sprite(1, 7, 1) -]; -var ghost = new Sprite(2, 7, 1); +/** Client Logic **/ const canvas = document.getElementById('gameboard'); const context = canvas.getContext('2d'); -const spritemap = new Image(128, 104); +const spritemap = new Image(320, 1264); spritemap.onload = drawInitialBoard; -spritemap.src = 'minirogue-all-edited.png'; +spritemap.src = 'scroll-o-sprites-edited.png'; function drawInitialBoard() { - for(var i = 0; i < 64; i++) { - for(var j = 0; j < 52; j++) { + for(var i = 0; i < 32; i++) { + for(var j = 0; j < 26; j++) { drawSprite(nothing, i, j); } } - for(var i = 12; i < 30; i++) { - for(var j = 20; j < 44; j++) { - drawSprite(tile, i, j); + for(var i = 5; i < 30; i++) { + for(var j = 2; j < 10; j++) { + drawSprite(dirt, i, j); } } - for(var i = 0; i < 64; i++) { + for(var i = 0; i < 32; i++) { drawSprite(wall[0], i, 0); - drawSprite(wall[1], i, 51); + drawSprite(wall[1], i, 25); } - for(var j = 0; j < 52; j++) { + for(var j = 0; j < 26; j++) { drawSprite(wall[2], 0, j); - drawSprite(wall[3], 63, j); + drawSprite(wall[2], 31, j); } - context.drawImage(this, 0, 0); drawPlayerInfo(); } @@ -193,41 +133,35 @@ function drawInitialBoard() { */ function drawPlayerInfo() { var boxWidth = 10; - + for(var i = 0; i < boxWidth; i++) { - for(var j = 0; j < 51; j++) { - if(i != 0 && j != 0) { - drawSprite(paper, 63 - i, j); - } + for(var j = 1; j < 25; j++) { + drawSprite(nothing, 31 - i, j); if(i == 0) { - drawSprite(border[5], 63, j); - drawSprite(border[4], 63 - boxWidth, j); + drawSprite(border[5], 31 - boxWidth, j); + drawSprite(border[4], 31, j); } } - drawSprite(border[6], 63 - i, 0); - drawSprite(border[7], 63 - i, 51); + drawSprite(border[6], 31 - i, 0); + drawSprite(border[7], 31 - i, 25); } - drawSprite(border[1], 63 - boxWidth, 0); - drawSprite(border[0], 63, 0); - drawSprite(border[3], 63 - boxWidth, 51); - drawSprite(border[2], 63, 51); - - drawSprite(heart, 63 - boxWidth + 2, 8); - drawSprite(shield, 63 - boxWidth + 2, 8); - - - context.font = "8px"; - context.strokeText("Player", (63 - boxWidth + 2) * 8, 16); - context.strokeText("Info", (63 - boxWidth + 6) * 8, 32); + + drawSprite(border[1], 31 - boxWidth, 0); + drawSprite(border[0], 31, 0); + drawSprite(border[3], 31 - boxWidth, 25); + drawSprite(border[2], 31, 25); + + drawSprite(heart, 31 - boxWidth + 2, 7); + drawSprite(shield, 31 - boxWidth + 2, 8); } /** - * Draws a sprite onto the gameboard at the given location + * Draws a sprite onto the gameboard at the given location in default color * * @param sprite The {@code Sprite} to draw * @param x The X location to draw to * @param y The Y location to draw to */ function drawSprite(sprite, x, y) { - context.drawImage(spritemap, sprite.x * 8, sprite.y * 8, 8 * sprite.size, 8 * sprite.size, x * 8, y * 8, 8 * sprite.size, 8 * sprite.size); + context.drawImage(spritemap, sprite.x * 16, sprite.y * 16, sprite.width, sprite.height, x * 16, y * 16, sprite.width, sprite.height); } diff --git a/public/scroll-o-sprites-edited.png b/public/scroll-o-sprites-edited.png new file mode 100644 index 0000000..b1a6e3f Binary files /dev/null and b/public/scroll-o-sprites-edited.png differ diff --git a/public/scroll-o-sprites.png b/public/scroll-o-sprites.png new file mode 100644 index 0000000..f344396 Binary files /dev/null and b/public/scroll-o-sprites.png differ -- cgit v1.2.3