StudyXY
RegisterLog in
Back to AI Flashcard MakerEducation /Animation and Games CodeHS Part 3

Animation and Games CodeHS Part 3

Education10 CardsCreated 4 months ago

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.

PrintEmbedImportReport

Which statement will call the function paint every time the mouse is moved?

mouseMoveMethod(paint);
Tap or swipe ↕ to flip
Swipe ←→Navigate
1/10

Key Terms

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;
function start(){
mouseMoveMethod(newCoor);
}
function newCoor(e){
remove(coors);
coors = new Text ("("+ e.getX() + ",...

9.6.6: Target

var x;
var horizontalLine;
var verticalLine;
var y;
function start(){
mouseClickMethod(addBall);
mouseMoveMethod(target);
}

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.

Log in to view all terms

Related Flashcard Decks

Education

A-LEVEL PE (OCR): PAPER 1 - Preparation and Training Method Part 2

This set of flashcards explains the concept of periodisation in training — the structured division of a training program into macro-, meso-, and micro-cycles. It also outlines tapering and the focus of Preparatory Phase 1, helping athletes optimise performance and recovery throughout the training year.

62 cards
View Deck
Education

A-LEVEL PE (OCR): PAPER 1 - Preparation and Training Method Part 1

This set of flashcards explains the concept of periodisation in training — the structured division of a training program into macro-, meso-, and micro-cycles. It also outlines tapering and the focus of Preparatory Phase 1, helping athletes optimise performance and recovery throughout the training year.

75 cards
View Deck
Education

A-LEVEL PE (OCR): PAPER 3 - Routes to Sporting Excellence in the UK

These flashcards explain the role of UK Sport, an organization funded by the government and National Lottery to develop elite athletes. They cover how UK Sport identifies talent, supports athletes’ lifestyles and coaching, and runs the World Class Programme, which has two stages—Podium for athletes with immediate medal potential and Podium Potential for those aiming for future success.

22 cards
View Deck
Education

A-LEVEL PE (OCR): PAPER 3 - Global sporting events

These flashcards outline the origins and philosophy of the Modern Olympic Games, first established in 1896. They explain the Games’ core aims—to promote physical and moral development, unite athletes worldwide, spread Olympic values, and educate young people to foster peace through healthy international competition.

23 cards
View Deck
Education

A-LEVEL PE (OCR): PAPER 2 - Leadership in Sport

These flashcards explore key aspects of leadership in sport, including the characteristics of an effective leader such as communication, motivation, enthusiasm, and clear vision. They also define emergent leaders—those chosen from within a team—and discuss their advantages, such as relatability and system knowledge, along with the potential disadvantages that may arise.

19 cards
View Deck
Education

A-LEVEL PE (OCR): PAPER 2 - Memory Models

This deck covers key concepts of memory models, including definitions of encoding, storage, retrieval, and more, as outlined in the A-LEVEL PE curriculum.

15 cards
View Deck

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
Animation and Games CodeHS Part 3
TermDefinition
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;
function start(){
mouseMoveMethod(newCoor);
}
function newCoor(e){
remove(coors);
coors = new Text ("("+ e.getX() + ", " + e.getY()+")");
coors.setPosition(150, getHeight()/2);
add(coors);
}

9.6.6: Target

var x;
var horizontalLine;
var verticalLine;
var y;
function start(){
mouseClickMethod(addBall);
mouseMoveMethod(target);
}
function target (e){
remove(horizontalLine);
remove(verticalLine);
x = e.getX();
y = e.getY();
horizontalLine = new Line(0,y,getWidth(),y);
horizontalLine.setLineWidth(1.5);
add(horizontalLine);
verticalLine = new Line(x,0,x,getHeight());
verticalLine.setLineWidth(1.5);
add(verticalLine);
}
function addBall(e){
var ball = new Circle(10);
ball.setPosition(e.getX(),e.getY());
ball.setColor(Color.red);
add(ball);
}

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 these functions to be affecting the same line

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.

9.7.4: Leash

var BALL_RADIUS = 30;
var ball;
var line;
function start(){
line = new Line(getWidth()/2, getHeight()/2,getWidth()/2, getHeight()/2);
line.setColor(Color.black);
add(line);
ball = new Circle(BALL_RADIUS);
ball.setPosition(getWidth()/2, getHeight()/2);
ball.setColor(Color.yellow);
add(ball);

mouseMoveMethod(endPoint);

}
function endPoint(e){
ball.setPosition(e.getX(), e.getY());
line.setEndpoint(e.getX(), e.getY());
}

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(animate);
}

9.8.4: Basic Snake

var SNAKE_WIDTH = 40;
var SNAKE_HEIGHT = 40;
var SNAKE_COLOR = Color.green;
// Constants to represent the directions
var EAST = 0;
var SOUTH = 1;
var WEST = 2;
var NORTH = 3;
var direction = EAST;
var rect;
function start(){
rect = new Rectangle(SNAKE_WIDTH,SNAKE_HEIGHT);
rect.setColor(Color.green);
rect.setPosition(getWidth()/2-SNAKE_WIDTH/2, getHeight()/2-SNAKE_HEIGHT/2);
add(rect);
setTimer(move, 40);
keyDownMethod(changeDirection);
}
function move(){
if(direction EAST){
rect.move(5,0);
}else if(direction WEST){
rect.move(-5,0);
}else if(direction NORTH){
rect.move(0,-5);
}else if(direction SOUTH){
rect.move(0,5);
}
}
function changeDirection(e){
if(e.keyCode == Keyboard.LEFT){
direction = WEST;
}
if (e.keyCode == Keyboard.RIGHT){
direction = EAST;
}
if(e.keyCode == Keyboard.UP){
direction = NORTH;
}
if(e.keyCode == Keyboard.DOWN){
direction = SOUTH;
}
}

We want to write a function changeBall that moves a ball to a random location on the screen and changes its color.

Which instructions can we insert at the //YOUR CODE HERE comment to change the position of ball to a random location, while still keeping the entire ball on screen?

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