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 0000000..01b6a25
Binary files /dev/null and b/assets/img/empty2.png differ
diff --git a/assets/js/app.js b/assets/js/app.js
index e705ffc..65573ad 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -32,6 +32,8 @@ window.addEventListener("resize", function() {
games.resize();
})
+
+
function renderRoom() {
// render wall
for (let i = 0; i < canvasOffset; i++) {
diff --git a/assets/js/constants.js b/assets/js/constants.js
index f4107c0..c485fef 100644
--- a/assets/js/constants.js
+++ b/assets/js/constants.js
@@ -11,6 +11,19 @@ var boundaries = [
[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 = [
[2, 4],
[3, 4]
diff --git a/assets/js/dialog.js b/assets/js/dialog.js
index 63ba4d5..fc6f079 100644
--- a/assets/js/dialog.js
+++ b/assets/js/dialog.js
@@ -8,7 +8,7 @@ class Dialog {
this.dialogOrder = ['resume']
this.dialogMap = {
- '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)
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
+
+
+
