pathfinding1

assets/css/style.css

@@ -276,10 +276,10 @@ tr:nth-child(even) {
 }
 
 @keyframes glow {
-  0% { box-shadow: 0 0 -28px 13px #ff0000; }
-  40% { box-shadow: 0 0 15px 13px #ff0000; }
-  60% { box-shadow: 0 0 15px 13px #ff0000; }
-  100% { box-shadow: 0 0 -28px 13px #ff0000; }
+  0% { box-shadow: 0 0 -28px 13px #00ff00; }
+  40% { box-shadow: 0 0 15px 13px #00ff00; }
+  60% { box-shadow: 0 0 15px 13px #00ff00; }
+  100% { box-shadow: 0 0 -28px 13px #00ff00; }
 }
 
 .indicator {
@@ -373,7 +373,7 @@ button:hover {
 	border-left: white;
 	margin-right: 2px;
 	position: absolute;
-	top: -35px;
+	bottom: -28px;
 	right: 0px;
 }
 

assets/js/app.js

@@ -159,8 +159,10 @@ function gameLoop() {
 	document.removeEventListener("keydown", _listener);
 	if (terminalMode) {
 		terminal.getKeystroke();
-	} else if (!dialogMode) {
-		this.getKeystroke();
+	} else if (dialogMode) {
+		this.getKeystroke(ignoreEnter=true);
+	} else {
+		this.getKeystroke()
 	}
 
 }

assets/js/dialog.js

@@ -5,12 +5,12 @@ class Dialog {
 		this.controlsElem = document.getElementById('controls')
 		
 		this.currentDialogIndex = 0
-		this.dialogOrder = ['intro', 'controls', 'resume']
+		this.dialogOrder = ['resume']
 
 		this.dialogMap = {
-			'intro': 'Hello! Welcome to my Interactive Portfolio!<br>Press <b>ENTER</b> to continue, or click the links below for quick access to my Resume & Projects.',
+			'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>',
 			'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>',
 			'other': 'Now that you have looked through my Porfolio, go explore the rest of the site! <ul><li>Click on the <b>GUITAR</b> to hear my music.</li><li>Mess around on the Terminal on the <b>COMPUTER</b></li><li>And before you leave, go to the <b>TV</b> and play some of the games I have made!</li></ul> Thanks for stopping by!'
 		}

assets/js/keystroke.js

@@ -1,4 +1,4 @@
-function getKeystroke() {
+function getKeystroke(ignoreEnter=false) {
 	_listener = function (event) {
 		if (
 			["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(
@@ -18,7 +18,9 @@ function getKeystroke() {
 			player.move('right')
 		} else if (
 			event.key === "Enter" &&
-			!terminal.active
+			!terminal.active &&
+			!dialogMode &&
+			!ignoreEnter
 		) {
 			onEnter();
 		}

assets/js/pathfinder.js

@@ -0,0 +1,164 @@
+const timer = ms => new Promise(res => setTimeout(res, ms))
+
+var cols = 8
+var rows = 8
+
+let grid = new Array(cols); 
+
+let openSet = []; 
+let closedSet = []; 
+
+let start; 
+let end; 
+let path = [];
+
+function heuristic(position0, position1) {
+	let d1 = Math.abs(position1.x - position0.x);
+	let d2 = Math.abs(position1.y - position0.y);
+
+	return d1 + d2;
+}
+
+
+function GridPoint(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) {
+		let i = this.x;
+		let j = this.y;
+		var tmpNeighbor;
+		if (i < cols - 1) {
+			tmpNeighbor = grid[i + 1][j]
+			if (!player.isBoundary([tmpNeighbor.x, tmpNeighbor.y])) {
+				this.neighbors.push(tmpNeighbor);
+			}
+		}
+		if (i > 0) {
+			tmpNeighbor = grid[i - 1][j]
+			if (!player.isBoundary([tmpNeighbor.x, tmpNeighbor.y])) {
+				this.neighbors.push(tmpNeighbor);
+			}
+		}
+		if (j < rows - 1) {
+			tmpNeighbor = grid[i][j + 1]
+			if (!player.isBoundary([tmpNeighbor.x, tmpNeighbor.y])) {
+				this.neighbors.push(tmpNeighbor);
+			}
+		}
+		if (j > 0) {
+			tmpNeighbor = grid[i][j - 1]
+			if (!player.isBoundary([tmpNeighbor.x, tmpNeighbor.y])) {
+				this.neighbors.push(tmpNeighbor);
+			}
+		}
+	};
+}
+
+
+function init(destX, destY) {
+	
+	for (let i = 0; i < cols; i++) {
+		grid[i] = new Array(rows);
+	}
+
+	for (let i = 0; i < cols; i++) {
+		for (let j = 0; j < rows; j++) {
+			grid[i][j] = new GridPoint(i, j);
+		}
+	}
+
+	for (let i = 0; i < cols; i++) {
+		for (let j = 0; j < rows; j++) {
+			grid[i][j].updateNeighbors(grid);
+		}
+	}
+
+	start = grid[player.canvasX][player.canvasY];
+	end = grid[destX][destY]
+
+	openSet.push(start);
+
+	console.log(grid);
+}
+
+
+function search(destX, destY) {
+	path = [];
+	init(destX, destY);
+	while (openSet.length > 0) {
+		
+		let lowestIndex = 0;
+		for (let i = 0; i < openSet.length; i++) {
+			if (openSet[i].f < openSet[lowestIndex].f) {
+				lowestIndex = i;
+			}
+		}
+		let current = openSet[lowestIndex];
+
+		if (current === end) {
+			let temp = current;
+			path.push(temp);
+			while (temp.parent) {
+				path.push(temp.parent);
+				temp = temp.parent;
+			}
+
+			return path.reverse()
+		}
+
+		
+		openSet.splice(lowestIndex, 1);
+		
+		closedSet.push(current);
+
+		let neighbors = current.neighbors;
+
+		for (let i = 0; i < neighbors.length; i++) {
+			let neighbor = neighbors[i];
+
+			if (!closedSet.includes(neighbor)) {
+				let possibleG = current.g + 1;
+
+				if (!openSet.includes(neighbor)) {
+					openSet.push(neighbor);
+				} else if (possibleG >= neighbor.g) {
+					continue;
+				}
+
+				neighbor.g = possibleG;
+				neighbor.h = heuristic(neighbor, end);
+				neighbor.f = neighbor.g + neighbor.h;
+				neighbor.parent = current;
+			}
+		}
+	}
+
+	return [];
+}
+
+async function pathfind(destX, destY) {
+	var newPath = search(destX, destY)
+	for (let i = 0; i < newPath.length; i++) {
+		if (newPath[i].x > player.canvasX) {
+			player.direction = 'right'
+		} else if (newPath[i].x < player.canvasX) {
+			player.direction = 'left'
+		}
+
+		if (newPath[i].y > player.canvasY) {
+			player.direction = 'down'
+		} else if (newPath[i].y < player.canvasY) {
+			player.direction = 'up'
+		}
+		player.canvasX = newPath[i].x
+		player.canvasY = newPath[i].y
+		await timer(100)
+	}
+}

index.html

@@ -21,6 +21,7 @@
 		<script type="text/javascript" src="./assets/js/indicator.js" defer></script>
 		<script type="text/javascript" src="./assets/js/keystroke.js" defer></script>
 		<script type="text/javascript" src="./assets/js/app.js" defer></script>
+		<script type="text/javascript" src="./assets/js/pathfinder.js" defer></script>
   </head>
 
   <body>
@@ -29,6 +30,18 @@
 				<h1 style="margin-bottom: -3px;">Dominic DiTaranto</h1>
 				Software Developer & Architect
 			</div>
+			
+			<div class="container" style="margin-bottom: 4px;">
+				<div class="nav-bar">
+					<center>
+						<button onclick="contact.hide(); resume.hide(); games.hide(); portfolio.show(); dialog.hide()">💼 View Portfolio</button>
+						<button onclick="contact.hide(); portfolio.hide(); games.hide(); resume.show();dialog.hide();">📄 Download Resume</button>
+						<button onclick="resume.hide(); games.hide(); portfolio.hide(); contact.show(); dialog.hide();">📧 Contact Me</button>
+						<button onclick="contact.hide(); resume.hide(); portfolio.hide(); games.show(); dialog.hide()">🕹️ Play Games</button>
+					</center>
+				</div>
+
+			</div>
 			<div class="container">
 
 				<canvas id="canvas"></canvas>
@@ -558,17 +571,6 @@
 					</div>
 				</div>
 
-			</div>
-			<div class="container">
-				<div class="nav-bar">
-					<center>
-						<button onclick="contact.hide(); resume.hide(); games.hide(); portfolio.show(); dialog.hide()">💼 View Portfolio</button>
-						<button onclick="contact.hide(); portfolio.hide(); games.hide(); resume.show();dialog.hide();">📄 Download Resume</button>
-						<button onclick="resume.hide(); games.hide(); portfolio.hide(); contact.show(); dialog.hide();">📧 Contact Me</button>
-						<button onclick="contact.hide(); resume.hide(); portfolio.hide(); games.show(); dialog.hide()">🕹️ Play Games</button>
-					</center>
-			</div>
-
 			</div>
 		</div>