HTML and CSS Reference
In-Depth Information
iif
(
!
canvasSupport
()) {
return
return
;
}
else
else
{
var
var
theCanvas
=
document
.
getElementById
(
'canvas'
);
var
var
context
=
theCanvas
.
getContext
(
'2d'
);
}
//set up tile map
var
var
mapRows
=
15
;
var
var
mapCols
=
15
;
var
var
tileMap
=
[
[
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
]
,[
0
,
1
,
1
,
1
,
1
,
1
,
1
,
1
,
1
,
1
,
1
,
1
,
1
,
1
,
0
]
,[
0
,
1
,
0
,
1
,
0
,
0
,
1
,
0
,
1
,
0
,
0
,
1
,
0
,
1
,
0
]
,[
0
,
1
,
0
,
1
,
0
,
0
,
1
,
0
,
1
,
0
,
0
,
1
,
0
,
1
,
0
]
,[
0
,
1
,
0
,
1
,
0
,
0
,
1
,
1
,
1
,
0
,
0
,
1
,
0
,
1
,
0
]
,[
0
,
1
,
1
,
1
,
1
,
1
,
0
,
0
,
0
,
1
,
1
,
1
,
1
,
1
,
0
]
,[
0
,
1
,
0
,
0
,
0
,
1
,
0
,
0
,
0
,
1
,
0
,
0
,
0
,
1
,
0
]
,[
0
,
1
,
1
,
1
,
1
,
1
,
0
,
0
,
0
,
1
,
1
,
1
,
1
,
1
,
0
]
,[
0
,
0
,
0
,
0
,
0
,
1
,
1
,
1
,
1
,
1
,
0
,
0
,
0
,
0
,
0
]
,[
0
,
1
,
1
,
1
,
1
,
1
,
0
,
0
,
0
,
1
,
1
,
1
,
1
,
1
,
0
]
,[
0
,
1
,
0
,
1
,
0
,
0
,
1
,
1
,
1
,
0
,
0
,
1
,
0
,
1
,
0
]
,[
0
,
1
,
0
,
1
,
0
,
0
,
1
,
0
,
1
,
0
,
0
,
1
,
0
,
1
,
0
]
,[
0
,
1
,
0
,
1
,
0
,
0
,
1
,
0
,
1
,
0
,
0
,
1
,
0
,
1
,
0
]
,[
0
,
1
,
1
,
1
,
1
,
1
,
1
,
1
,
1
,
1
,
1
,
1
,
1
,
1
,
0
]
,[
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
,
0
]
];
console
.
log
(
"tileMap.length="
,
tileMap
.
length
);
//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
,
false
false
);
//load in tile sheet image
var
var
tileSheet
=
new
new
Image
();
tileSheet
.
addEventListener
(
'load'
,
eventSheetLoaded
,
false
false
);
tileSheet
.
src
=
"tiles.png"
;