HTML and CSS Reference
In-Depth Information
//set up a* graph
var
var
graph
=
new
new
Graph
(
tileMap
);
var
var
startNode
=
{
x
:
4
,
y
:
1
};
// use values of map turned on side
var
var
endNode
=
{
x
:
13
,
y
:
10
};
//create node list
var
var
start
=
graph
.
nodes
[
startNode
.
x
][
startNode
.
y
];
var
var
end
=
graph
.
nodes
[
endNode
.
x
][
endNode
.
y
];
var
var
result
=
astar
.
search
(
graph
.
nodes
,
start
,
end
,
true
true
);
console
.
log
(
"result"
,
result
);
//load in tile sheet image
var
var
tileSheet
=
new
new
Image
();
tileSheet
.
addEventListener
(
'load'
,
eventSheetLoaded
,
false
false
);
tileSheet
.
src
=
"tiles.png"
;
const
const
FRAME_RATE
=
40
;
var
var
intervalTime
=
1000
/
FRAME_RATE
;
function
function
eventSheetLoaded
() {
gameLoop
();
}
function
function
gameLoop
() {
drawScreen
()
window
.
setTimeout
(
gameLoop
,
intervalTime
);
}
function
function
drawScreen
() {
for
for
(
var
var
rowCtr
=
0
;
rowCtr
<
mapRows
;
rowCtr
++
) {
for
for
(
var
var
colCtr
=
0
;
colCtr
<
mapCols
;
colCtr
++
){
var
var
tileId
=
tileMap
[
rowCtr
][
colCtr
];
var
var
sourceX
=
Math
.
floor
(
tileId
%
5
)
*
32
;
var
var
sourceY
=
Math
.
floor
(
tileId
/
5
)
*
32
;
context
.
drawImage
(
tileSheet
,
sourceX
,
sourceY
,
32
,
32
,
colCtr
*
32
,
rowCtr
*
32
,
32
,
32
);
}
}
//draw green circle at start node
context
.
beginPath
();
context
.
strokeStyle
=
"green"
;
context
.
lineWidth
=
5
;
context
.
arc
((
startNode
.
y
*
32
)
+
16
, (
startNode
.
x
*
32
)
+
16
,
10
,
0
,
(
Math
.
PI
/
180
)
*
360
,
false
false
);
context
.
stroke
();