HTML and CSS Reference
In-Depth Information
var speed = 5;
var p1 = {x:20,y:20};
var angle = 45;
var radians = angle * Math.PI/ 180;
var xunits = Math.cos(radians) * speed;
var yunits = Math.sin(radians) * speed;
var ball = {x:p1.x, y:p1.y};
var points = new Array();
theCanvas = document.getElementById("canvasOne");
context = theCanvas.getContext("2d");
setInterval(drawScreen, 33);
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
Bouncing Off Walls
While it's neat that we can create a vector with magnitude and direction and then move
an object along it infinitely, it's probably not something you will need to do all that
often. Most of the time, you will want to see that object react to the world around it by
bouncing off horizontal and vertical walls, for example.
To help you understand how to do this, there is a simple rule in physics. Although this
rule is usually applied to rays of light, it can be very useful when animating 2D objects—
especially when they are bouncing off horizontal and vertical walls. This rule is known
as
the angle of reflection
:
The angle of incidence is equal to the angle of reflection.
The
angle of incidence
is the angle an object is traveling when it hits the walls, and the
angle of reflection
is the angle it travels after it bounces off the wall.
Figure 5-4
illustrates that when an object hits a wall on a line that forms a 45-degree
angle with a perpendicular line drawn to the point of impact, it will bounce off (reflect)
at a similar 45-degree angle.
