4.9.1 Animation and Games Quiz

We extend our draw function to include: 1 var ball; 2 var moveCounter = 0; 3 function draw(){ 4 5 ball.move(2, 2); 6 moveCounter++; 7 8 if(moveCounter == 25){ 9 stopTimer(draw); 10 } 11 } 12 13 function start(){ 14 ball = new Circle(40); 15 add(ball); 14 setTimer(draw, 20); 15 } How many times will the ball be moved before the animation stops?

25

How many circles of radius 10 will fit vertically stacked in a window that has height 100? The circles should not overlap, the bottom of one circle should touch the top of the next circle.

5

What is a callback function?

A function passed to an event handler that is called every time a certain event happens

What does this program do? var ball; function start(){ ball = new Circle(40); add(ball); setTimer(draw, 20); } function draw(){ ball.move(2, 2); }

Animates a ball by moving it down and to the right once every 20 milliseconds.

How can we fix the problem in this code from question 18? The same code is shown again for reference. 1 var ball; 2 3 function down(e){ 4 var ball = new Circle(40); 5 ball.setPosition(e.getX(), e.getY()); 6 add(ball); 7 } 8 function drag(e){ 9 ball.setPosition(e.getX(), e.getY()); 10 11 } 12 13 function start(){ 14 15 mouseDownMethod(down); 16 mouseDragMethod(drag); 17 }

Get rid of the word var in line 4 so that the ball in down refers to the same global ball in drag rather than a local variable.

Which of the following are techniques that make our code more reusable? I - Using constants instead of magic numbers II - Using specific values in our functions rather than using parameters III - Writing multiple functions that solve small subproblems rather than one function that solves the entire problem. IV - Writing as few lines of code as possible

I and III

Which of the following are good examples of things that should be stored as global variables? I - The parameter e to a callback function II - The ball in the game the user is playing III - A counter keeping track of how many times the user has pressed the spacebar IV - A for loop counter V - The color of a rectangle that is only used in one function

II and III

In the following code: var ball; function start(){ ball = new Circle(40); add(ball); setTimer(draw, 20); } function draw(){ ball.move(2, 2); } Which of the following statements are true about ball? I - ball is a local variable II - the ball variable in draw is different from the ball variable in start III - ball is a global variable IV - ball's scope includes both start and draw

III and IV

This code creates a new circle on the canvas every time the mouse is pressed down and the circle follows the mouse when the mouse is dragged. The result should look like this: But there is one problem. What is wrong with the following code? 1 var ball; 2 3 function down(e){ 4 var ball = new Circle(40); 5 ball.setPosition(e.getX(), e.getY()); 6 add(ball); 7 } 8 function drag(e){ 9 ball.setPosition(e.getX(), e.getY()); 10 11 } 12 13 function start(){ 14 15 mouseDownMethod(down); 16 mouseDragMethod(drag); 17 }

Line 4 declares a new local variable var ball. The local variable ball in down is different from the global variable ball in drag, but we need these functions to be affecting the same ball

In the following program: var STEP = 5; var SQUARE_SIZE = 20; var square; function start(){ square = new Rectangle(SQUARE_SIZE, SQUARE_SIZE); square.setPosition(getWidth() / 2, getHeight() / 2); keyDownMethod(down); } function down(e){ if(e.keyCode == Keyboard.LEFT){ square.move(-STEP, 0); } else if(e.keyCode == Keyboard.RIGHT){ square.move(STEP, 0); } else if(e.keyCode == Keyboard.letter('R')){ square.move(0, -STEP); } else if(e.keyCode == Keyboard.letter('F')){ square.move(0, STEP); } else{ square.setColor(Randomizer.nextColor()); } } How can a user move the square up on the screen

Pressing down the 'R' key

Describe the result of the following line of code. What will happen in our program when this line is in our start function? keyDownMethod(moveBall);

The function moveBall will be called every time any key on the keyboard is pressed down.

In the same program as before: var STEP = 5; var SQUARE_SIZE = 20; var square; function start(){ square = new Rectangle(SQUARE_SIZE, SQUARE_SIZE); square.setPosition(getWidth() / 2, getHeight() / 2); keyDownMethod(down); } function down(e){ if(e.keyCode == Keyboard.LEFT){ square.move(-STEP, 0); } else if(e.keyCode == Keyboard.RIGHT){ square.move(STEP, 0); } else if(e.keyCode == Keyboard.letter('R')){ square.move(0, -STEP); } else if(e.keyCode == Keyboard.letter('F')){ square.move(0, STEP); } else{ square.setColor(Randomizer.nextColor()); } } What happens if the user presses the spacebar?

The square changes color to a random color

This is a circle on our canvas named ball. What are the coordinates of point A?

ball.getX() + ball.getRadius(), ball.getY()

In the following statement: mouseMoveMethod(draw); Which part is the callback function?

draw

The following code moves a ball across the screen at a rate of dx in the x direction and dy in the y direction. 1 var RADIUS = 20; 2 var DELAY = 50; 3 var ball; 4 var dy = -5; 5 var dx = 3; 6 function start(){ 7 ball = new Circle(RADIUS); 8 ball.setPosition(getWidth() / 2, getHeight() / 2); 9 add(ball); 10 setTimer(draw, DELAY); 11 } 12 13 function draw(){ 14 ball.move(dx, dy); 15 16 if(isHittingTop()){ 17 //bounce off the top 18 //your code here 19 ... 20 } 21 } 22 23 function isHittingTop(){ 24 //returns true if ball is hitting the top of the window, false otherwise 25 return ball.getY() - ball.getRadius() < 0; 27 } What do we need to add to line 19 to have the ball bounce off the top of the window like this:

dy = -dy;

In the following code: function start(){ mouseUpMethod(paint); } function paint(e){ //code to paint something on the canvas ... } What is the meaning of e?

e is a parameter passed to the callback function paint that contains information about the Mouse Event, such as where on the window it occurred.

Which function has better reusability? 2. function drawCircle(x, y, radius, color){ 3. var circle = new Circle(radius); 4. circle.setPosition(x, y); 5. circle.setColor(color); 6. add(circle); } 8. function drawGreenCircleInCenter(radius){ 9. var circle = new Circle(radius); 10. circle.setPosition(getWidth() / 2, getHeight() / 2); 11. circle.setColor(Color.green); 12. add(circle); }

function drawCircle(x, y, radius, color){ var circle = new Circle(radius); circle.setPosition(x, y); circle.setColor(color); add(circle); }

The following program adds several shapes to the screen. function addShapes(){ //code that fills the screen with shapes //don't worry about how it's implemented ... } function start(){ addShapes(); mouseClickMethod(removeShape); } We want to write a function that will remove any shape the user clicks on. Which of the following is the best implementation of the function removeShape?

function removeShape(e){ var shape = getElementAt(e.getX(), e.getY()); if(shape != null){ remove(shape); } }

What statement should we use to determine if ball is hitting the bottom edge of the window?

if(ball.getY() + ball.getRadius() > getHeight()){ //ball is hitting bottom edge }

In the following statement: mouseMoveMethod(draw); Which part is the event handler?

mouseMoveMethod

Which of the following statements will call the function paint every time the mouse is moved?

mouseMoveMethod(paint);

The following program animates a ball by setting a timer to move the ball across the screen. We want the animation to stop whenever the user clicks the mouse: var ball; function start(){ ball = new Circle(40); add(ball); setTimer(draw, 20); mouseClickMethod(stopAnimation); } function draw(){ ball.move(2, 2); } function stopAnimation(e){ //your code here ... } Which statement would stop the animation in this program?

stopTimer(draw);

How can we determine if ball's left edge is hitting a different shape on our canvas named box?

var elem = getElementAt(ball.getX() - ball.getRadius() - 1, ball.getY()); if(elem == box){ //ball's left edge is hitting box }

In the code from the last question that draws columns of red and black circles across the window: 1 var DELAY = 50; 2 var RADIUS = 20; 3 var NUM_CIRCLES = getHeight() / (2*RADIUS); 4 5 function start(){ 6 setTimer(draw, DELAY); 7 } 8 9 function draw(){ 10 drawColumn(xPosition); 11 12 //your code from question 23 here 13 xPosition = ... 14 } 15 16 //draws a column of alternating red and black circles centered at "x" 17 function drawColumn(x){ 18 for(var i = 0; i < NUM_CIRCLES; i++){ 19 var circle = new Circle(RADIUS); 20 if(i % 2 == 0){ 21 circle.setColor(Color.red); 22 } else { 23 circle.setColor(Color.black); 24 } 25 26 //your code goes here 27 var y = ... 28 29 circle.setPosition(x, y); 30 add(circle); 31 } 32 } What should the value of y be on line 27 so that the first circle added is touching the top of the window, and each subsequent circle is touching the bottom of the previous circle. The circles should not overlap and there should be no space in between circles: After first call to draw ...................... After second call to draw

var y = RADIUS + (2 * i * RADIUS);

The following code draws stacks of alternating red and black circles across the window one at a time, filling the window from left to right. Example: After first call to draw ...................... After second call to draw Code: 1 var DELAY = 50; 2 var RADIUS = 20; 3 var NUM_CIRCLES = getHeight() / (2*RADIUS); 4 5 var xPosition; 6 7 function start(){ 8 xPosition = RADIUS; 9 setTimer(draw, DELAY); 10 } 11 12 function draw(){ 13 drawColumn(xPosition); 14 15 //your code goes here 16 xPosition = ... 17 } 18 19 function drawColumn(x){ 20 //draws a column of alternating red and black circles centered at "x" 21 //don't worry about how it's implemented yet 22 ... 23 } What should the value of xPosition be changed to on line 16 so that the next column drawn is touching the right side of the previous column?

xPosition = xPosition + 2*RADIUS;