Editing A Ball In A Box



<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 and the next x position
var dy=-1;   //dy is difference between the current x position and the next y position

var boxTop=130;  //the top left corner of the box is 130,200
var boxLeft=120;

var boxWidth=400;  
var boxHeight=300;

var boxBottom=boxTop+boxHeight;  //The bottom right corner of the box can be calculated by adding the width and height to the left and top values
var boxRight=boxLeft+boxWidth;

function move() {

  //adding the difference moves the ball
  cx+=dx; 
  cy+=dy;


  //check to see if cx has crossed the left or right edges of the box
  //         and if cy has crossed the top or bottom edges of the box
  if (cx<boxLeft) dx=1;
  if (cy<boxTop) dy=1;
  if (cx>boxRight) dx=-1;
  if (cy>boxBottom) dy=-1;

}

function draw() {
  clear();

  //draw the box
  drawRectangle(boxLeft,boxTop,boxWidth,boxHeight);

  //draw the ball 
  fillCircle(cx,cy,4);
}

run(move,draw);

</edcode>