pathfinding1
This commit is contained in:
parent
71fa29fd4b
commit
bf9289c359
8 changed files with 193 additions and 23 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
BIN
assets/img/sprites/controls.ase
Normal file
BIN
assets/img/sprites/controls.ase
Normal file
Binary file not shown.
Binary file not shown.
|
|
@ -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()
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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!'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
164
assets/js/pathfinder.js
Normal file
164
assets/js/pathfinder.js
Normal file
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
24
index.html
24
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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue