HTML and CSS Reference
In-Depth Information
ball
.
velocityx
=
ball
.
velocityx
-
(
ball
.
velocityx
*
friction
);
ball
.
velocityy
=
ball
.
velocityy
-
(
ball
.
velocityy
*
friction
);
ball
.
nextx
=
(
ball
.
x
+=
ball
.
velocityx
);
ball
.
nexty
=
(
ball
.
y
+=
ball
.
velocityy
);
}
}
You can see the full version of this code by executing
CH5EX8.html
from the code distribu-
tion, or by typing in
Example 5-8
. You should notice that the smaller balls have less of an
effect on the larger balls when they collide, and vice versa. Also, the balls slow down as they
move, due to the applied friction.
Example 5-8. Balls with friction
<!doctype html>
<html
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH5EX8: Balls With Friction
</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'
;
context
.
strokeRect
(
1
,
1
,
theCanvas
.
width
-
2
,
theCanvas
.
height
-
2
);
