From a96752100a433a4c4fbab0b97782f56dd2298767 Mon Sep 17 00:00:00 2001 From: Sky Johnson Date: Sat, 12 Oct 2024 10:04:13 -0500 Subject: [PATCH] Graphics!!! --- database/auth.db | Bin 45056 -> 45056 bytes database/live.db | Bin 188416 -> 188416 bytes public/assets/css/dragon.css | 27 +++++++- public/assets/css/forms.css | 4 ++ public/assets/img/world/rogues.png | Bin 0 -> 7054 bytes public/assets/img/world/tiles.jpg | Bin 0 -> 7758 bytes templates/pages/world/base.php | 98 +++++++++++++++++------------ 7 files changed, 87 insertions(+), 42 deletions(-) create mode 100644 public/assets/img/world/rogues.png create mode 100644 public/assets/img/world/tiles.jpg diff --git a/database/auth.db b/database/auth.db index 26b28c44c1188afa6f619aa16bafaf6be5b1c067..7598b137bb7f74eb0d7115e5d129b90fbd738145 100644 GIT binary patch delta 16 YcmZp8z|`=7X~QL1MuE+jWpyV306qZ**8l(j delta 16 YcmZp8z|`=7X~QL1MxM==WpyV306pmj(*OVf diff --git a/database/live.db b/database/live.db index db1b7c49cfdd5082b3807372d89450bf0f6319a7..68229c9f6c82daf429b11b517f5b81b1a5b440ae 100644 GIT binary patch delta 565 zcmb7=!D|yi6vk&ZyW5#vGv7{GiV=-c+h7C{6nZN3pnrj9C5ZM=iUvdwytHX4MK4iC zS>nOshEk+R8WWHeB=Mji6|_R3BJNfzf+8puT5met{smqhkN4(%-|w5rt~=Rvm;R0z z(y3GL&_Qv7xY>l@J#OLxhQ)?BD^3cYO++MaXOm{7lU2#3M=s;X7%#|ugy+<)a$oP6 za(R4g^rG)Oj&sD*;{!Y6*6QWsbia!d!4FJfUdvv?I7;}8dw7huSZG#8ph^=%9y@hq z?5dN=(Oo5}<|oeOw~330;5U}_+YegfE7q}!7w8~D)RJBeDysHdW`O>=L z;G;&``KK0Mp^ioTK}%aYy!!n=d delta 538 zcmb7=(MuFj6vpqJoteEe;^xfu`zI#LWhcW|q z+WKw}jAjOVZZ$R8m%J8covW3Lo1@+Qtc^6oAto_TW5+OzG``>s*0F$vLbewwJ$}tQ z{m&#dKi;3(W;V(UKd?sKhxmqFY~npCDA!K0(F>r;Q|$(RF~d>2Q|+l6%$6a;BA(+R zaW2cBa!bCGA*2jtSjbLF70!k_*4P=fJlo72m3}do+9FPg;TQ+_iU^;uf-2skgbx%Y z;>!9U=1ioXBR@=ZbmhcKM5#WR(pob6O2NkX3RMIdl zg9{-n#uz2x_!|}NVyEy7&bjb}ZsY%4_|eBYKBp0WA3KDv{Yw$6_>COpBH^FG&&AsL ho}|%W=t6J{N6h4j`aM}!v#tiYN^&hhs@MGJ-d}#$rB?s| diff --git a/public/assets/css/dragon.css b/public/assets/css/dragon.css index 43e0c3e..4d126aa 100644 --- a/public/assets/css/dragon.css +++ b/public/assets/css/dragon.css @@ -531,6 +531,31 @@ body::-webkit-scrollbar-thumb { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast; - background-color: rgba(0, 0, 0, 0.5); + } +} + +.char-icon { + width: 32px; + height: 32px; + background-image: url('/assets/img/world/rogues.png'); + + &.index-0 { + background-position: 0 0; + } + + &.index-1 { + background-position: -32px 0; + } + + &.index-2 { + background-position: -64px 0; + } + + &.index-3 { + background-position: -96px 0; + } + + &.index-4 { + background-position: -128px 0; } } diff --git a/public/assets/css/forms.css b/public/assets/css/forms.css index 7ae6c25..23d733d 100644 --- a/public/assets/css/forms.css +++ b/public/assets/css/forms.css @@ -87,6 +87,10 @@ & > span.selected { display: none; } + + & > .char-icon { + margin-right: 0.25rem; + } } &.active > label { diff --git a/public/assets/img/world/rogues.png b/public/assets/img/world/rogues.png new file mode 100644 index 0000000000000000000000000000000000000000..9106ecb978d90a319cd2f784014d56959024dcc0 GIT binary patch literal 7054 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 TXQi0%o{T1;R$i&&D?|SUFc!dI literal 0 HcmV?d00001 diff --git a/templates/pages/world/base.php b/templates/pages/world/base.php index af5964a..ff176f6 100644 --- a/templates/pages/world/base.php +++ b/templates/pages/world/base.php @@ -12,22 +12,37 @@ csrf: '', tiles: { size: 32, - colors: { - 0: '#fff', - 1: '#f00' - } + img: new Image(), + cols: 3 + }, + sprites: { + size: 32, + img: new Image(), + cols: 6 } } const map = [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - [0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - [0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - [0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - [0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - [0, 0, 0, 2, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], - [0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 1, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 1, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], @@ -40,10 +55,19 @@ y: document.getElementById('char_y') } - let player = { x: , y: } + let player = { x: , y: , char: 23, sprite: { x: 0, y: 0 } } let camera = { x: 0, y: 0 } let visible = { x: 0, y: 0 } + game.tiles.img.src = '/assets/img/world/tiles.jpg'; + game.sprites.img.src = '/assets/img/world/rogues.png'; + + function getPlayerSprite() { + let col = player.char % game.sprites.cols + let row = Math.floor(player.char / game.sprites.cols) + player.sprite = { x: col * game.sprites.size, y: row * game.sprites.size } + } + function updateCanvasSize() { game.canvas.width = game.canvas.clientWidth game.canvas.height = game.canvas.clientHeight @@ -75,18 +99,19 @@ 'ArrowRight': 3 }[e.key]; - if (direction !== undefined) { - // If player would move outside map bounds, return early - if (direction === 0 && player.y === 0) return; - if (direction === 1 && player.y === map.length - 1) return; - if (direction === 2 && player.x === 0) return; - if (direction === 3 && player.x === map[0].length - 1) return; + // Direction vectors: [up, down, left, right] + const dx = [0, 0, -1, 1]; + const dy = [-1, 1, 0, 0]; - // Return early if the player is trying to move into a wall - if (direction === 0 && map[player.y - 1][player.x] === 2) return; - if (direction === 1 && map[player.y + 1][player.x] === 2) return; - if (direction === 2 && map[player.y][player.x - 1] === 2) return; - if (direction === 3 && map[player.y][player.x + 1] === 2) return; + // Calculate new position + const newX = player.x + dx[direction]; + const newY = player.y + dy[direction]; + + if (direction !== undefined) { + // Check if the new position is outside the map bounds + if (newX < 0 || newX >= map[0].length || newY < 0 || newY >= map.length) return; + + if (map[newY][newX] !== 0) return; // Execute a POST request to /move. If successful, the server will return a new x,y position fetch('/move', { @@ -99,9 +124,8 @@ }).then(response => { if (response.ok) { response.json().then(data => { - map[player.y][player.x] = 0 - map[data.y][data.x] = 1 - player = data + player.x = data.x + player.y = data.y loc_span.x.textContent = player.x loc_span.y.textContent = player.y updateCamera() @@ -148,27 +172,19 @@ const screenX = x * game.tiles.size - camera.x const screenY = y * game.tiles.size - camera.y - if (map[y][x] === 1) { - // Draw player - ctx.fillStyle = 'red'; - ctx.fillRect(screenX, screenY, game.tiles.size, game.tiles.size) - } else if (map[y][x] === 2) { - // Draw wall - ctx.fillStyle = 'black'; - ctx.fillRect(screenX, screenY, game.tiles.size, game.tiles.size) - } else { - // Draw empty tile - ctx.strokeStyle = 'gray'; - ctx.fillStyle = 'white'; - ctx.fillRect(screenX, screenY, game.tiles.size, game.tiles.size) - ctx.strokeRect(screenX, screenY, game.tiles.size, game.tiles.size) - } + ctx.drawImage(game.tiles.img, map[y][x] * game.tiles.size, 0, game.tiles.size, game.tiles.size, + screenX, screenY, game.tiles.size, game.tiles.size) } } + + // Render the player on top of the map using their current position + ctx.drawImage(game.sprites.img, player.sprite.x, player.sprite.y, game.sprites.size, game.sprites.size, + (player.x * game.sprites.size) - camera.x, (player.y * game.sprites.size) - camera.y, + game.sprites.size, game.sprites.size) } window.addEventListener('load', () => { - map[player.y][player.x] = 1 + getPlayerSprite() updateCanvasSize() setupEventListeners() render()