HTML and CSS Reference
In-Depth Information
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>
Now, when you execute
Example 5-7
(
CH5EX7.html
), you will see a bunch of balls of the
same size and mass bumping off of each other and the walls of the canvas, as shown in
Fig-
ure 5-10
. When you look at this demo, imagine all the ways you could modify it to do differ-
ent things. You could create balls with different masses and different speeds, or even create
balls that don'tmove butsimply alter the direction ofother balls that hit them. In
Figure 5-11
,
we will take a slightly different look at this same code and add some new properties to make
it more interesting.