finalizing pathfinding
This commit is contained in:
parent
bf9289c359
commit
8b0a0ed271
9 changed files with 205 additions and 23 deletions
|
|
@ -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;
|
||||
|
|
|
|||
BIN
assets/img/empty2.png
Normal file
BIN
assets/img/empty2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 383 B |
|
|
@ -32,6 +32,8 @@ window.addEventListener("resize", function() {
|
|||
games.resize();
|
||||
})
|
||||
|
||||
|
||||
|
||||
function renderRoom() {
|
||||
// render wall
|
||||
for (let i = 0; i < canvasOffset; i++) {
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ class Dialog {
|
|||
this.dialogOrder = ['resume']
|
||||
|
||||
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>',
|
||||
// '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>',
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,13 @@ class Terminal {
|
|||
}
|
||||
}
|
||||
terminalMode = true;
|
||||
|
||||
var self = this;
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Escape') {
|
||||
self.hide()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
hide () {
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
80
index.html
80
index.html
|
|
@ -58,6 +58,86 @@
|
|||
<div class="enter-indicator" id="enter-indicator">PRESS ENTER</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">
|
||||
<img src="./assets/img/sprites/controls.png" alt="" usemap="#dpadmap">
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue