HTML and CSS Reference
In-Depth Information
Calculating a new position and collision detection
Now that we know how to draw, and how to clear and redraw, and we know how to do something at fixed
intervals, the challenge is how to calculate the new positions and how to do collision detection. Well do
this by declaring variables
ballx
and
bally
to hold the
x
and
y
coordinates of the ball's center;
ballvx
and
ballvy
to hold the amount by which the ball position is to be changed, and
ballboundx
,
inboxboundx
,
ballboundy
and
inboxboundy
to indicate a box slightly smaller than the actual box for the
collision calculation. The amounts by which the ball position is to be changed are initialized to 4 and 8
(totally arbitrarily) and are changed if and when a player makes a valid change (see next section) and
clicks on the change button. These amounts are termed displacements or deltas and, less formally,
velocities or speeds.
The change in direction is pretty simple in this situation. If the ball “hits” a vertical wall, the horizontal
displacement must change sign; i.e., if the ball was moving 4 units to the right and we hit a wall, we add -4
to its position, which starts it moving to the left. The vertical displacement stays the same. The hit is
determined by comparing the
next
horizontal value with the boundary. Similarly, if the ball “hits” a
horizontal wall as determined by comparing the vertical position with the appropriate boundary, the vertical
displacement changes sign while the horizontal displacement remains the same. The change is for the
next iteration. The check for collisions is done four times, that is, for each of the 4 walls. The calculation
consists of comparing the proposed new x or y value, as appropriate, with the boundary condition for the
particular wall. The tentative new position is adjusted if the ball center goes past one of the four walls to be
exactly at the boundary. This has the effect of making the ball go slightly behind each wall or appear to be
squeezed by each wall. The boundary values are set up to be just inside the box with the upper corner at
boxx
,
boxy,
a width of
boxwidth
, and a height of
boxheight
. I could use a more complex calculation to
compare any point on the circle with any point on the walls. However, there is a more fundamental principle
involved here. There are no walls and no ball. This is a simulation based on calculations. The calculations
are done at intervals. If the ball is moving fast enough and the walls are thin enough, thinner than the
ballrad
specified here, the ball can escape the box. This is why I do the calculation in terms of the next
move and a slightly smaller box.
var boxboundx = boxwidth+boxx-ballrad;
var boxboundy = boxheight+boxy-ballrad;
var inboxboundx = boxx+ballrad;
var inboxboundy = boxy+ballrad;
Here is the code for the
moveandcheck
function, the function that checks for collisions and reposition the
ball:
function moveandcheck() {
var nballx = ballx + ballvx;
var nbally = bally +ballvy;
if (nballx > boxboundx) {
ballvx =-ballvx;
nballx = boxboundx;
}
if (nballx < inboxboundx) {
nballx = inboxboundx
ballvx = -ballvx;
}
if (nbally > boxboundy) {
nbally = boxboundy;
