Difference between revisions of "A Ball In A Box"
(Created page with " <edcode> var cx=320; //cx,cy is the position of the ball var cy=240; // 320,240 is the starting position var dx=1; //dx is difference between the current x position a...") |
|||
| (3 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
| + | This program shows a ball bouncing within the confines of a rectangle. | ||
| + | The ball position is stored in the variables cx and cy. The motion of the ball is stored in the dx and dy. dx represents the horizontal speed of the ball and dy represents the vertical speed. | ||
| − | <edcode> | + | dx gets added to cx each move cycle moving it sideways and dy gets added to cy to move up or down. |
| − | var cx=320; //cx,cy is the position of the ball | + | |
| + | The move cycle also has to make sure the ball does not leave the rectangle. | ||
| + | because the rectangle has four sides, it must do four checks looking at each side in turn. | ||
| + | |||
| + | cy is checked to see if it is higher than the top or lower than the bottom. | ||
| + | cx is compared with the left and right edges of the rectangle. | ||
| + | |||
| + | Try adding the line | ||
| + | dy+=0.1; | ||
| + | Think about what might happen when you run it, then run the program to see if you guessed right. | ||
| + | |||
| + | <edcode>var cx=320; //cx,cy is the position of the ball | ||
var cy=240; // 320,240 is the starting position | var cy=240; // 320,240 is the starting position | ||
| − | var dx= | + | var dx=3; //dx is difference between the current x position and the next x position |
| − | var dy=- | + | var dy=-3; //dy is difference between the current y position and the next y position |
| − | var boxTop=130; //the top left corner of the box is 130, | + | var boxTop=130; //the top left corner of the box is 130,120 |
var boxLeft=120; | var boxLeft=120; | ||
| Line 18: | Line 31: | ||
function move() { | function move() { | ||
| − | |||
//adding the difference moves the ball | //adding the difference moves the ball | ||
cx+=dx; | cx+=dx; | ||
cy+=dy; | cy+=dy; | ||
| − | |||
//check to see if cx has crossed the left or right edges of the box | //check to see if cx has crossed the left or right edges of the box | ||
| + | if (cx<boxLeft) dx=3; | ||
| + | if (cx>boxRight) dx=-3; | ||
// and if cy has crossed the top or bottom edges of the box | // and if cy has crossed the top or bottom edges of the box | ||
| − | + | if (cy<boxTop) dy=3; | |
| − | if (cy<boxTop) dy= | + | if (cy>boxBottom) dy=-3; |
| − | + | ||
| − | if (cy>boxBottom) dy=- | + | |
| − | + | ||
} | } | ||
function draw() { | function draw() { | ||
clear(); | clear(); | ||
| − | |||
| − | |||
| − | |||
//draw the ball | //draw the ball | ||
fillCircle(cx,cy,4); | fillCircle(cx,cy,4); | ||
| + | |||
| + | //draw the box | ||
| + | setColour('red'); | ||
| + | drawRectangle(boxLeft,boxTop,boxWidth,boxHeight); | ||
} | } | ||
run(move,draw); | run(move,draw); | ||
| − | |||
</edcode> | </edcode> | ||
Latest revision as of 09:29, 3 February 2012
This program shows a ball bouncing within the confines of a rectangle.
The ball position is stored in the variables cx and cy. The motion of the ball is stored in the dx and dy. dx represents the horizontal speed of the ball and dy represents the vertical speed.
dx gets added to cx each move cycle moving it sideways and dy gets added to cy to move up or down.
The move cycle also has to make sure the ball does not leave the rectangle. because the rectangle has four sides, it must do four checks looking at each side in turn.
cy is checked to see if it is higher than the top or lower than the bottom. cx is compared with the left and right edges of the rectangle.
Try adding the line
dy+=0.1;
Think about what might happen when you run it, then run the program to see if you guessed right.
