HTML and CSS Reference
In-Depth Information
ball2
.
nextx
=
(
ball2
.
nextx
+=
ball2
.
velocityx
);
ball2
.
nexty
=
(
ball2
.
nexty
+=
ball2
.
velocityy
);
}
NOTE
If this is confusing to you, you are not alone. It took some serious effort for us to translate this code
from other sources into a working example on HTML5 Canvas. The code here is based on
Flash Lite
Effort: Embedded Systems and Pervasive Computing Lab
by Felipe Sampaio
.
It is also partly based
on Jobe Makar and Ben Winiarczyk's work in
Macromedia Flash MX 2004 Game Design Demysti-
fied
, and Keith Peters' topics on ActionScript animation.
Here is the full code listing for
Example 5-7
.
Example 5-7. Balls with simple interactions
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH5EX7: Balls With Simple Interactions
</title>
</title>
<
script src
=
"modernizr.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
() {
context
.
fillStyle
=
'#EEEEEE'
;
context
.
fillRect
(
0
,
0
,
theCanvas
.
width
,
theCanvas
.
height
);
//Box
context
.
strokeStyle
=
'#000000'
;
