From 8b0a0ed271399b5d3da13dd477e549eeb08d5fad Mon Sep 17 00:00:00 2001 From: Dominic DiTaranto Date: Fri, 2 Jan 2026 10:31:27 -0500 Subject: [PATCH] finalizing pathfinding --- assets/css/style.css | 6 +++ assets/img/empty2.png | Bin 0 -> 383 bytes assets/js/app.js | 2 + assets/js/constants.js | 13 +++++ assets/js/dialog.js | 2 +- assets/js/pathfinder.js | 112 ++++++++++++++++++++++++++++++++-------- assets/js/terminal.js | 7 +++ assets/js/window.js | 6 +++ index.html | 80 ++++++++++++++++++++++++++++ 9 files changed, 205 insertions(+), 23 deletions(-) create mode 100644 assets/img/empty2.png diff --git a/assets/css/style.css b/assets/css/style.css index e46a86b..fa1762a 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -363,6 +363,12 @@ button:hover { left: 0px } +.click-map { + position: absolute; + top: 0px; + left: 0px; +} + #on-screen-controller-button { background-color: #ededed; font-size: 16.9px; diff --git a/assets/img/empty2.png b/assets/img/empty2.png new file mode 100644 index 0000000000000000000000000000000000000000..01b6a25264c46deeccb7b587065234832bd765d8 GIT binary patch literal 383 zcmeAS@N?(olHy`uVBq!ia0y~yV7dUpj6eZ~i8@t=KuRImBgmJ5p-PQ`p`nF=;TKS- z;RORjsR0ASs{{rHs~HRo;stYd1=;{5m`Z~Df*BafCZDwc@shmVT^Jbeb_p*5^4Lo} zeO=jKF)}goSwt)LL;!_UOI#yLQW8s2t&)pUffR$0fsvW6fuXK}QHX(|m7$51shPHc zft7)Qz#A3~6b-rgDVb@NxHTkh+%pBJK?80>NoH

Controls:

ENTER: Close this Dialog, Interact with things on screen
Arrow Keys: Movement (WASD or VIM keys also work)

Walk over to my resume and click ENTER', + 'resume': 'Hello! Welcome to my Interactive Portfolio!

Controls:

Enter: Close this Dialog, Interact with things on screen
Arrow Keys: Movement (WASD or VIM keys also work)
Click: Click anywhere to move or interact with what you see.

Walk over to my resume and click ENTER', 'controls': 'Use ARROW KEYS or WASD or VIM keys (HJKL) to move around.
Press the ENTER key to interact with what you see on the screen.

', // 'resume': 'Walk over to the DESK and click on my RESUME.
The RESUME is marked by the flashing red indicator light.

', 'portfolio': 'Thanks for looking at my Resume!
Check out my PORTFOLIO by clicking on the BOOKSHELF.
', diff --git a/assets/js/pathfinder.js b/assets/js/pathfinder.js index d421c66..83451cc 100644 --- a/assets/js/pathfinder.js +++ b/assets/js/pathfinder.js @@ -1,7 +1,7 @@ const timer = ms => new Promise(res => setTimeout(res, ms)) -var cols = 8 -var rows = 8 +var cols = 9 +var rows = 9 let grid = new Array(cols); @@ -12,6 +12,29 @@ let start; let end; let path = []; + +function generateClickMap() { + var clickMap = document.getElementById('click-map') + for (let i = 0; i < rows; i++) { + for (let j = 0; j < cols; j++) { + var area = document.createElement('area') + area.shape = 'rect' + area.href = '#' + area.addEventListener('click', function (event) { + if (j > 7) { + pathfind(i, j - 1) + } else { + pathfind(i, j) + } + }) + area.coords = `${i * spriteSize},${j * spriteSize},${(i + 1) * spriteSize},${(j + 1) * spriteSize}` + clickMap.appendChild(area) + } + } +} + +generateClickMap() + function heuristic(position0, position1) { let d1 = Math.abs(position1.x - position0.x); let d2 = Math.abs(position1.y - position0.y); @@ -20,17 +43,18 @@ function heuristic(position0, position1) { } -function GridPoint(x, y) { - this.x = x; - this.y = y; - this.f = 0; - this.g = 0; - this.h = 0; - this.neighbors = []; - this.parent = undefined; +class GridPoint { + constructor(x, y) { + this.x = x; + this.y = y; + this.f = 0; + this.g = 0; + this.h = 0; + this.neighbors = []; + this.parent = undefined; + } - - this.updateNeighbors = function(grid) { + updateNeighbors(grid) { let i = this.x; let j = this.y; var tmpNeighbor; @@ -84,8 +108,6 @@ function init(destX, destY) { end = grid[destX][destY] openSet.push(start); - - console.log(grid); } @@ -144,21 +166,67 @@ function search(destX, destY) { } async function pathfind(destX, destY) { + + var isBoundary = player.isBoundary([destX, destY]) + + if (isBoundary) { + var tmpDestX = destX + var tmpDestY = destY + var newDest = boundaryMap[String(destX) + String(destY)] + destX = newDest[0] + destY = newDest[1] + } + var newPath = search(destX, destY) for (let i = 0; i < newPath.length; i++) { - if (newPath[i].x > player.canvasX) { + changeDir(newPath[i].x, newPath[i].y) + + player.canvasX = newPath[i].x + player.canvasY = newPath[i].y + + if (isBoundary && i === newPath.length - 1) { + changeDir(tmpDestX, tmpDestY) + } + await timer(100) + } + + if (destX === 0 && destY === 0 || destX === 1 && destY === 0) { + player.direction = 'up' + portfolio.show() + } + + if (destX === 7 && destY === 0 || destX === 8 && destY === 0) { + player.direction = 'up' + games.show() + } + + if (destX === 2 && destY === 4 || destX === 3 && destY === 4) { + player.direction = 'up' + terminal.show() + } + + if (destX === 4 && destY === 4) { + player.direction = 'up' + resume.show() + } + + if (destX === 0 && destY === 6 || destX === 1 && destY === 6) { + player.direction = 'down' + music.show() + } + +} + +function changeDir(destX, destY) { + if (destX > player.canvasX) { player.direction = 'right' - } else if (newPath[i].x < player.canvasX) { + } else if (destX < player.canvasX) { player.direction = 'left' } - if (newPath[i].y > player.canvasY) { + if (destY > player.canvasY) { player.direction = 'down' - } else if (newPath[i].y < player.canvasY) { + } else if (destY < player.canvasY) { player.direction = 'up' } - player.canvasX = newPath[i].x - player.canvasY = newPath[i].y - await timer(100) - } } diff --git a/assets/js/terminal.js b/assets/js/terminal.js index f6d5601..cb6ef29 100644 --- a/assets/js/terminal.js +++ b/assets/js/terminal.js @@ -23,6 +23,13 @@ class Terminal { } } terminalMode = true; + + var self = this; + document.addEventListener('keydown', function(event) { + if (event.key === 'Escape') { + self.hide() + } + }) } hide () { diff --git a/assets/js/window.js b/assets/js/window.js index 7426a8b..7e6c574 100644 --- a/assets/js/window.js +++ b/assets/js/window.js @@ -7,6 +7,12 @@ class Window { show() { this.resize() this.container.style.display = 'block' + var self = this; + document.addEventListener('keydown', function(event) { + if (event.key === 'Escape') { + self.hide() + } + }) } hide() { diff --git a/index.html b/index.html index f9d6b81..12fc185 100644 --- a/index.html +++ b/index.html @@ -58,6 +58,86 @@
PRESS ENTER
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +