HTML and CSS Reference
In-Depth Information
Code
Explanation
<canvas id="canvas" width="600"
height="400">
Your browser doesn't support the
HTML5 element canvas.
</canvas>
<br/>
<form name="f" id="f" onSubmit=
"return fire();">
Set velocity, angle and fire
cannonball. <br/>
Velocity out of cannon <input name=
"vo" id="vo" value="10" type=
"number" min="-100" max="100" />
Label indicating that this is the velocity out of
mouth of cannon
<br>
Angle <input name="ang" id="ang"
value="0" type="number" min=
"0" max="80"/>
Label indicating that this is the angle of the
cannon
<input type="submit" value="FIRE"/>
</form>
</body>
</html>
This application provides many possibilities for you to make it your own. You can change the cannon, the
ball, the ground, and the target. If you don't want to use images, you can use drawings for the target and
the hit target. You can draw other things on the canvas. You just need to make sure that the cannonball
(or whatever you set your projectile to be) is on top or wherever you want it to be. You could, for example,
make the ground cover up the ball. You can use an animated gif for any Image object, including the
htarget
. You could also use images for the cannon and the ball. One possibility is to use an animated gif
file to represent a spinning cannonball. Remember that all image files referenced in the code must be in the
same folder as the uploaded HTML file. If they are in a different place on the Web, make sure the reference
is correct.
