HTML and CSS Reference
In-Depth Information
Code
Explanation
<body onLoad="init();">
<canvas id="canvas" width="400" height="300">
Your browser doesn't support the HTML5 element canvas.
</canvas>
<br/>
<form name="f" id="f" onSubmit="return change();">
Horizontal velocity <input name="hv" id=
"hv" value="4" type="number" min="-10" max="10" />
<br>
Vertical velocity <input name="vv" id=
"vv" value="8" type="number" min="-10" max="10"/>
<input type="submit" value="CHANGE"/>
</form>
</body>
</html>
There are many ways you can make this application your own. You can select your own image for the ball
and experiment with the colors for the walls, with or without the gradients. You can change the position
and the dimensions of each wall. You can add text and HTML markup to the page. You can change the
look of the form.
You can include more than one ball, keeping track of the positions of each. If you decide to use two balls,
you need two sets of variables and two lines of code for each one line you had before. One systematic
way to do this is to use the search function in the editor to find all instances of
ball
and, for each line,
substitute two lines, so in place of
ballx
, you have
ball1x
and
ball2x
, and in place of the
var ballx =
50;
use
var ball1x = 50;
var ball2x = 250;
This puts the second ball 200 pixels over on the canvas.
You would also need a second set of all the comparisons for the walls.
