HTML and CSS Reference
In-Depth Information
context
.
arc
(
position
.
x
*
scaleFactor
,
position
.
y
*
scaleFactor
,
shape
.
GetRadius
()
*
scaleFactor
,
0
,
Math
.
PI
*
2
,
true
true
);
context
.
closePath
();
context
.
fill
();
}
Those are all the changes we need to make to convert the stacked boxes example
(
CH5EX23.html
) into an interactive experience when the user shoots balls to knock down
boxes. Load
CH5EX24.html
from the code distribution into your web browser, and check it
out! The full code listing is provided in
Example 5-21
.
Example 5-21. Box2dWeb box battle
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH5EX24: Box2dWeb Box Battle
</title>
</title>
<
script src
=
"modernizr.js"
><
/script>
<
script type
=
"text/javascript"
src
=
"Box2dWeb-2.1.a.3.js"
><
/script>
<
script type
=
"text/javascript"
>
window
.
addEventListener
(
'load'
,
eventWindowLoaded
,
false
false
);
function
function
eventWindowLoaded
() {
canvasApp
();
}
function
function
canvasSupport
() {
return
return
Modernizr
.
canvas
;
}
function
function
canvasApp
() {
iif
(
!
canvasSupport
()) {
return
return
;
}
function
function
drawScreen
() {
world
.
Step
(
1
/
60
,
10
,
10
);
world
.
DrawDebugData
();
world
.
ClearForces
();
