JavaScript Animation and Games

Which statement will call the function paint every time the mouse is moved? mouseDragMethod(paint); mouseDownMethod(paint); mouseMoveMethod(paint); mouseMoveMethod(paint(e));

mouseMoveMethod(paint);

Which statement will call a function animate every 50 milliseconds? setTimer(animate, 50); setTimer(animate(), 50); for(var i = 0; i < 50; i++){ animate(); } timer.animate(50);

setTimer(animate, 50);

In the following code: var ball; function start(){ ball = new Circle(20); add(ball); setTimer(draw, 20); } function draw(){ ball.move(2, 2); } When will the function draw be called? Once, inside of start Never Every 20 milliseconds Every 20 seconds

Every 20 milliseconds

This is a Circle object on our canvas named ball. Point A is on the far left edge of the circle. How can we calculate the x-coordinate of point A? ball.getX(); ball.getX() + ball.getRadius(); ball.getY() + ball.getRadius(); ball.getX() - ball.getRadius();

ball.getX() - ball.getRadius();

What is a callback function? A function passed to an event handler that is called every time a certain event happens A function called at the bottom of the start function A function that is never called A function called every 20 milliseconds

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

Why do we want our code to be "reusable"? To avoid writing similar code multiple times To avoid solving the same problem over and over again To save time All of the above

All of above

How can we make our code reusable? Use constants instead of magic numbers Use parameters in our functions instead of specific values Write multiple functions that solve small subproblems rather than one function that solves the entire problem. All of the above

All of the above

What does this program do? function drawCircle(x, y, radius, color){ var circle = new Circle(radius); circle.setPosition(x, y); circle.setColor(color); add(circle); } function start(){ setTimer(draw, 50); } function draw(){ var color = Randomizer.nextColor(); var centerX = getWidth()/2; var centerY = getHeight()/2; var radius = 100; drawCircle(centerX, centerY, radius, color); } Draws 1 randomly sized circle at a random place on the canvas. Draws several randomly sized circles at random places on the canvas by drawing 1 every 50 milliseconds. Draws 1 randomly colored circle at the center of the canvas. Draws several randomly colored circles at the center of the canvas by drawing 1 every 50 milliseconds.

Draws several randomly colored circles at the center of the canvas by drawing 1 every 50 milliseconds.

Which of the following are good examples of things that should be stored as global variables? I - A ball for a game that is used in multiple functions II - A counter that keeps track of how many times the user has clicked the mouse III - A for loop counter variable IV - The color of a rectangle that is only used in one function I and II only III and IV only I only I, II, III, and IV

I and II only

Which function has better reusability? function drawRectangle(x, y, width, height, color){ //Draw a rectangle using the parameters as properties ... } function drawAGreenRectangleInTheTopLeftCorner(){ //Draw a green rectangle in the top left corner of the //canvas ... }

function drawRectangle(x, y, width, height, color){ //Draw a rectangle using the parameters as properties ... }

How do we fix this problem? The same code is shown again for reference: 1 var line; 2 3 function down(e){ 4 var line = new Line(e.getX(), e.getY(), e.getX(), e.getY()); 5 add(line); 6 } 7 function drag(e){ 8 line.setEndpoint(e.getX(), e.getY()); 9 10 } 11 12 function start(){ 13 14 mouseDownMethod(down); 15 mouseDragMethod(drag); 16 } Change Line 14 to mouseDownMethod(down(e)); and change Line 15 to mouseDragMethod(drag(e)); Get rid of the var in Line 4 so that the line in down refers to the same global line in drag rather than a local variable. Move Line 5 to Line 13 so the line object is added before any mouse events happen. No fix needed, there is no problem

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

This code from the video draws lines on the canvas when the mouse is pressed down and dragged. But there is one problem. What is wrong with the following code? 1 var line; 2 3 function down(e){ 4 var line = new Line(e.getX(), e.getY(), e.getX(), e.getY()); 5 add(line); 6 } 7 function drag(e){ 8 line.setEndpoint(e.getX(), e.getY()); 9 10 } 11 12 function start(){ 13 14 mouseDownMethod(down); 15 mouseDragMethod(drag); 16 } Lines 14 and 15 are registering the mouse events incorrectly Line 5 adds a line to the screen every time the mouse is down, but we need a line added before any mouse events Line 4 declares a new local variable var line. The local variable line in down is different from the global variable line in drag, but we need these functions to be affecting the same line None, there is no problem

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

Suppose we have a callback function paint that is called every time the mouse is moved. Which version of paint will draw a circle at the mouse's location? function paint(e){ var circle = new Circle(20); circle.setPosition(e.getX(), e.getY()); add(circle); } function paint(){ var circle = new Circle(20); circle.setPosition(mouse.getPosition()); add(circle); } function paint(e){ var circle = new Circle(20); circle.setPosition(e.getPosition()); add(circle); } function paint(e){ var circle = new Circle(20); circle.setPosition(e.X, e.Y) add(circle); }

function paint(e){ var circle = new Circle(20); circle.setPosition(e.getX(), e.getY()); add(circle); }

We've written a function animate that moves a ball across the screen like this: function start(){ //add code here } function animate(e){ ball.move(5, 5); } How can we set up animate to be called every time a key on the keyboard is pressed down? function start(){ keyDownMethod(callback=animate); } function start(){ keyDownMethod(animate); } function start(){ keyDownMethod(animate, e); } function start(){ keyDownMethod(animate(e)); }

function start(){ keyDownMethod(animate); }

Which statement should we use to determine if ball is hitting the left edge of the window? if(ball.getX() - ball.getRadius() <= 0){ //ball is hitting left edge } if(ball.getY() >= getHeight()){ //ball is hitting left edge } if(ball.getX() - ball.getRadius() >= getWidth()){ //ball is hitting left edge } if(ball.getY() <= 0){ //ball is hitting left edge }

if(ball.getX() - ball.getRadius() <= 0){ //ball is hitting left edge }

Suppose we've written a function drawCircle that we want to call every time the mouse is clicked. How can we do this? mouseClickMethod(drawCircle(e)); if(mouseClickMethod){ drawCircle(); } mouseClickMethod(drawCircle); mouseClickMethod(drawCircle());

mouseClickMethod(drawCircle);

Which statement would stop the timer in the following program? function drawCircle(x, y, radius, color){ var circle = new Circle(radius); circle.setPosition(x, y); circle.setColor(color); add(circle); } function start(){ setTimer(draw, 50); } function draw(){ var color = Randomizer.nextColor(); var centerX = getWidth()/2; var centerY = getHeight()/2; var radius = 100; drawCircle(centerX, centerY, radius, color); }

stopTimer(draw);

In the following code function start(){ mouseClickMethod(clickHandler); } function clickHandler(e){ //your code here } How can we get the graphical element at the location of the user click? var elem = e.getElement(); var elem = getElementAt(e); var elem = getElementAt(e.getX(), e.getY()); var elem = e.getElementAtClick();

var elem = getElementAt(e.getX(), e.getY());

We want to write a function changeBall that moves a ball to a random location on the screen and changes its color. var ball; var RADIUS = 20; var DELAY = 50; function start(){ ball = new Circle(RADIUS); ball.setPosition(getWidth()/2, getHeight()/2); ball.setColor(Color.red); add(ball); setTimer(changeBall, DELAY); } function changeBall(){ //move ball to a random location //YOUR CODE HERE //change the ball color var choice = Randomizer.nextInt(0, 2); if(choice == 0){ ball.setColor(Color.red); } else if (choice == 1){ ball.setColor(Color.yellow); } else { ball.setColor(Color.green); } }

var x = Randomizer.nextInt(ball.getRadius(), getWidth() - ball.getRadius()); var y = Randomizer.nextInt(ball.getRadius(), getHeight() - ball.getRadius()); ball.setPosition(x, y);