dominic/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

finalizing pathfinding

Browse source
This commit is contained in:
Dominic DiTaranto 2026-01-02 10:31:27 -05:00
parent bf9289c359
commit 8b0a0ed271
9 changed files with 205 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
assets/css/style.css
View file

@ -363,6 +363,12 @@ button:hover {
left: 0px left: 0px
} }
.click-map {
position: absolute;
top: 0px;
left: 0px;
}
#on-screen-controller-button { #on-screen-controller-button {
background-color: #ededed; background-color: #ededed;
font-size: 16.9px; font-size: 16.9px;

BIN
assets/img/empty2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 383 B

2
assets/js/app.js
View file

@ -32,6 +32,8 @@ window.addEventListener("resize", function() {
games.resize(); games.resize();
}) })
function renderRoom() { function renderRoom() {
// render wall // render wall
for (let i = 0; i < canvasOffset; i++) { for (let i = 0; i < canvasOffset; i++) {

13
assets/js/constants.js
View file

@ -11,6 +11,19 @@ var boundaries = [
[6, 5] [6, 5]
] ]
var boundaryMap = {
"23": [2, 4],
"33": [3, 4],
"43": [4, 4],
"53": [5, 4],
//guitar
"17": [1, 6],
"07": [0, 6],
//maomao
"65": [6, 4]
}
var computerInteractionZones = [ var computerInteractionZones = [
[2, 4], [2, 4],
[3, 4] [3, 4]

2
assets/js/dialog.js
View file

@ -8,7 +8,7 @@ class Dialog {
this.dialogOrder = ['resume'] this.dialogOrder = ['resume']
this.dialogMap = { this.dialogMap = {
'resume': 'Hello! Welcome to my Interactive Portfolio! <br><br> <h3 style="margin:0px;">Controls:</h3> <b>ENTER:</b> Close this Dialog, Interact with things on screen<br><b>Arrow Keys:</b> Movement (WASD or VIM keys also work)<br><br> Walk over to my resume and click <b>ENTER</b>', 'resume': 'Hello! Welcome to my Interactive Portfolio! <br><br> <h3 style="margin:0px;">Controls:</h3> <b>Enter:</b> Close this Dialog, Interact with things on screen<br><b>Arrow Keys:</b> Movement (WASD or VIM keys also work)<br><b>Click:</b> Click anywhere to move or interact with what you see.<br><br> Walk over to my resume and click <b>ENTER</b>',
'controls': 'Use <b>ARROW KEYS</b> or <b>WASD</b> or <b>VIM</b> keys (HJKL) to move around. <br>Press the <b>ENTER</b> key to interact with what you see on the screen.<br><br>', 'controls': 'Use <b>ARROW KEYS</b> or <b>WASD</b> or <b>VIM</b> keys (HJKL) to move around. <br>Press the <b>ENTER</b> key to interact with what you see on the screen.<br><br>',
// 'resume': 'Walk over to the <b>DESK</b> and click on my <b>RESUME</b>.<br> The <b>RESUME</b> is marked by the flashing red indicator light.<br><br>', // 'resume': 'Walk over to the <b>DESK</b> and click on my <b>RESUME</b>.<br> The <b>RESUME</b> is marked by the flashing red indicator light.<br><br>',
'portfolio': 'Thanks for looking at my Resume!<br>Check out my <b>PORTFOLIO</b> by clicking on the <b>BOOKSHELF</b>.<br>', 'portfolio': 'Thanks for looking at my Resume!<br>Check out my <b>PORTFOLIO</b> by clicking on the <b>BOOKSHELF</b>.<br>',

98
assets/js/pathfinder.js
View file

@ -1,7 +1,7 @@
const timer = ms => new Promise(res => setTimeout(res, ms)) const timer = ms => new Promise(res => setTimeout(res, ms))
var cols = 8 var cols = 9
var rows = 8 var rows = 9
let grid = new Array(cols); let grid = new Array(cols);
@ -12,6 +12,29 @@ let start;
let end; let end;
let path = []; 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) { function heuristic(position0, position1) {
let d1 = Math.abs(position1.x - position0.x); let d1 = Math.abs(position1.x - position0.x);
let d2 = Math.abs(position1.y - position0.y); let d2 = Math.abs(position1.y - position0.y);
@ -20,7 +43,8 @@ function heuristic(position0, position1) {
} }
function GridPoint(x, y) { class GridPoint {
constructor(x, y) {
this.x = x; this.x = x;
this.y = y; this.y = y;
this.f = 0; this.f = 0;
@ -28,9 +52,9 @@ function GridPoint(x, y) {
this.h = 0; this.h = 0;
this.neighbors = []; this.neighbors = [];
this.parent = undefined; this.parent = undefined;
}
updateNeighbors(grid) {
this.updateNeighbors = function(grid) {
let i = this.x; let i = this.x;
let j = this.y; let j = this.y;
var tmpNeighbor; var tmpNeighbor;
@ -84,8 +108,6 @@ function init(destX, destY) {
end = grid[destX][destY] end = grid[destX][destY]
openSet.push(start); openSet.push(start);
console.log(grid);
} }
@ -144,21 +166,67 @@ function search(destX, destY) {
} }
async function pathfind(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) var newPath = search(destX, destY)
for (let i = 0; i < newPath.length; i++) { 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' player.direction = 'right'
} else if (newPath[i].x < player.canvasX) { } else if (destX < player.canvasX) {
player.direction = 'left' player.direction = 'left'
} }
if (newPath[i].y > player.canvasY) { if (destY > player.canvasY) {
player.direction = 'down' player.direction = 'down'
} else if (newPath[i].y < player.canvasY) { } else if (destY < player.canvasY) {
player.direction = 'up' player.direction = 'up'
} }
player.canvasX = newPath[i].x
player.canvasY = newPath[i].y
await timer(100)
}
} }

7
assets/js/terminal.js
View file

@ -23,6 +23,13 @@ class Terminal {
} }
} }
terminalMode = true; terminalMode = true;
var self = this;
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
self.hide()
}
})
} }
hide () { hide () {

6
assets/js/window.js
View file

@ -7,6 +7,12 @@ class Window {
show() { show() {
this.resize() this.resize()
this.container.style.display = 'block' this.container.style.display = 'block'
var self = this;
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
self.hide()
}
})
} }
hide() { hide() {

80
index.html
View file

@ -58,6 +58,86 @@
<div class="enter-indicator" id="enter-indicator">PRESS ENTER</div> <div class="enter-indicator" id="enter-indicator">PRESS ENTER</div>
</div> </div>
<div class="click-map">
<img src="./assets/img/empty2.png" usemap="#click-map" alt="">
</div>
<map name="click-map" id="click-map"></map>
<!---->
<!-- <area shape="rect" href="#" onclick="console.log('hi'); pathfind(0, 0)" coords="0,0,80,80"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(0, 1)" coords="0,80,80,160"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(0, 2)" coords="0,160,80,240"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(0, 3)" coords="0,240,80,320"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(0, 4)" coords="0,320,80,400"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(0, 5)" coords="0,400,80,480"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(0, 6)" coords="0,480,80,560"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(0, 7)" coords="0,560,80,640"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(0, 8)" coords="0,640,80,720"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 0)" coords="80,0,160,80"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 1)" coords="80,80,160,160"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 2)" coords="80,160,160,240"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 3)" coords="80,240,160,320"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 4)" coords="80,320,160,400"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 5)" coords="80,400,160,480"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 6)" coords="80,480,160,560"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 7)" coords="80,560,160,640"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(1, 8)" coords="80,640,160,720"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 0)" coords="160,0,240,80"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 1)" coords="160,80,240,160"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 2)" coords="160,160,240,240"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 3)" coords="160,240,240,320"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 4)" coords="160,320,240,400"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 5)" coords="160,400,240,480"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 6)" coords="160,480,240,560"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 7)" coords="160,560,240,640"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(2, 8)" coords="160,640,240,720"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 0)" coords="240,0,320,80"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 1)" coords="240,80,320,160"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 2)" coords="240,160,320,240"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 3)" coords="240,240,320,320"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 4)" coords="240,320,320,400"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 5)" coords="240,400,320,480"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 6)" coords="240,480,320,560"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 7)" coords="240,560,320,640"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(3, 8)" coords="240,640,320,720"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 0)" coords="320,0,400,80"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 1)" coords="320,80,400,160"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 2)" coords="320,160,400,240"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 3)" coords="320,240,400,320"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 4)" coords="320,320,400,400"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 5)" coords="320,400,400,480"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 6)" coords="320,480,400,560"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 7)" coords="320,560,400,640"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(4, 8)" coords="320,640,400,720"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 0)" coords="400,0,480,80"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 1)" coords="400,80,480,160"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 2)" coords="400,160,480,240"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 3)" coords="400,240,480,320"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 4)" coords="400,320,480,400"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 5)" coords="400,400,480,480"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 6)" coords="400,480,480,560"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 7)" coords="400,560,480,640"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(5, 8)" coords="400,640,480,720"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 0)" coords="480,0,560,80"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 1)" coords="480,80,560,160"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 2)" coords="480,160,560,240"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 3)" coords="480,240,560,320"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 4)" coords="480,320,560,400"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 5)" coords="480,400,560,480"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 6)" coords="480,480,560,560"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 7)" coords="480,560,560,640"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(6, 8)" coords="480,640,560,720"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 0)" coords="560,0,640,80"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 1)" coords="560,80,640,160"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 2)" coords="560,160,640,240"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 3)" coords="560,240,640,320"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 4)" coords="560,320,640,400"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 5)" coords="560,400,640,480"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 6)" coords="560,480,640,560"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 7)" coords="560,560,640,640"/> -->
<!-- <area shape="rect" href="#" onclick="pathfind(7, 8)" coords="560,640,640,720" /> -->
<!---->
<!-- </map> -->
<div class="controls" id="controls"> <div class="controls" id="controls">
<img src="./assets/img/sprites/controls.png" alt="" usemap="#dpadmap"> <img src="./assets/img/sprites/controls.png" alt="" usemap="#dpadmap">
</div> </div>