Animation and Games CodeHS Part 3
This deck covers key concepts and code snippets from the Animation and Games module in CodeHS, focusing on mouse and keyboard interactions, drawing, and object movement.
Which statement will call the function paint every time the mouse is moved?
Key Terms
9.6.5: Coordinates
var coors;
function start(){
mouseMoveMethod(newCoor);
}
function newCoor(e){
remove(coors);
coors = new Text ("("+ e.getX() + ",...
9.6.6: Target
This program creates a simple target system where moving the mouse draws crosshair lines and clicking adds a red ball. G...
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 }
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 thes...
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 }
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.
Related Flashcard Decks
Study Tips
- Press F to enter focus mode for distraction-free studying
- Review cards regularly to improve retention
- Try to recall the answer before flipping the card
- Share this deck with friends to study together
| Term | Definition |
|---|---|
Which statement will call the function paint every time the mouse is moved? | mouseMoveMethod(paint); |
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);
} |
9.6.5: Coordinates | var coors; |
9.6.6: Target | This program creates a simple target system where moving the mouse draws crosshair lines and clicking adds a red ball. Global variables store the mouse coordinates and the horizontal and vertical lines. The start() function sets up event listeners for mouse clicks and movements. The target(e) function removes old lines, updates the mouse position, and draws new crosshairs at the cursor. The addBall(e) function creates a red circle at the click location. Each line is set with a width of 1.5 for visibility. The crosshairs move dynamically with the mouse, providing a targeting effect. Clicking multiple times adds multiple red balls without affecting the crosshairs. |
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? | 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 |
How do we fix this problem? The same code is shown again for reference: | 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. |
9.7.4: Leash | This program creates a “leash” effect where a yellow ball follows the mouse connected by a black line. A constant BALL_RADIUS sets the size of the ball. The start() function initializes the ball at the center of the canvas and draws the line starting from the same point. The ball and line are added to the canvas with the specified colors. The mouseMoveMethod(endPoint) tracks mouse movement. The endPoint(e) function updates the ball’s position to the current mouse coordinates. The line’s endpoint also moves with the ball, creating a dynamic leash effect. The result is a ball that follows the mouse while staying connected to the center by the line. |
We've written a function animate that moves a ball across the screen like this: | function start(){ |
9.8.4: Basic Snake | This program creates a basic snake that moves on the screen using arrow keys. Constants define the snake’s size, color, and possible directions: EAST, SOUTH, WEST, and NORTH. The start() function creates a green rectangle centered on the canvas and sets a timer to repeatedly call the move() function. The move() function updates the rectangle’s position based on the current direction. The keyDownMethod(changeDirection) listens for arrow key presses. The changeDirection(e) function changes the snake’s direction according to the key pressed. The snake moves continuously while responding to user input. This sets up the basic mechanics of a simple snake game. |
We want to write a function changeBall that moves a ball to a random location on the screen and changes its color. | var x = Randomizer.nextInt(ball.getRadius(), |