HTML and CSS Reference
In-Depth Information
//Draw points to illustrate path
points
.
push
({
x
:
xt
,
y
:
yt
});
for
for
(
var
var
i
=
0
;
i
<
points
.
length
;
i
++
) {
context
.
drawImage
(
pointImage
,
points
[
i
].
x
,
points
[
i
].
y
,
1
,
1
);
}
context
.
closePath
();
player
.
x
=
xt
-
bullseye
.
width
/
2
;
player
.
y
=
yt
-
bullseye
.
height
/
2
;
context
.
drawImage
(
bullseye
,
player
.
x
,
player
.
y
);
}
var
var
p0
=
{
x
:
60
,
y
:
10
};
var
var
p1
=
{
x
:
150
,
y
:
350
};
var
var
p2
=
{
x
:
300
,
y
:
375
};
var
var
p3
=
{
x
:
400
,
y
:
20
};
var
var
player
=
{
x
:
0
,
y
:
0
,
speed
:
.
01
,
t
:
0
};
var
var
points
=
new
new
Array
();
theCanvas
=
document
.
getElementById
(
"canvasOne"
);
context
=
theCanvas
.
getContext
(
"2d"
);
function
function
gameLoop
() {
window
.
setTimeout
(
gameLoop
,
20
);
drawScreen
()
}
gameLoop
();
}
<
/script>
</head>
</head>
<body>
<body>
<div
<div style=
"position: absolute; top: 50px; left: 50px;"
>
<canvas
<canvas id=
"canvasOne"
width=
"500"
height=
"500"
>
Your browser does not support HTML5 Canvas.
</canvas>
</canvas>
</div>
</div>
</body>
</body>
</html>
</html>
