Animation and Games CodeHS Flashcards

Questions and Answers

When will the function draw be called?

Every 20 milliseconds

Which statement will call a function animate every 50 milliseconds?

setTimer(animate, 50)

What does the program do?

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

Which statement would stop the timer in the following program?

stopTimer(draw) Signup and view all the answers

What does the Growing Circle program do?

It creates a circle that increases in radius and changes color every 10 units. Signup and view all the answers

Why do we want our code to be 'reusable'?

All of the above Signup and view all the answers

How can we make our code reusable?

All of the above Signup and view all the answers

Which function has better reusability?

function drawRectangle(x, y, width, height, color){} Signup and view all the answers

What is a callback function?

A function passed to an event handler that is called every time a certain event happens Signup and view all the answers

How can we calculate the x-coordinate of point A?

ball.getX() - ball.getRadius() Signup and view all the answers

Which statement should we use to determine if ball is hitting the left edge of the window?

if(ball.getX() - ball.getRadius() < 0) Signup and view all the answers

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

mouseMoveMethod(paint) Signup and view all the answers

How many times will the ball be moved before the animation stops?

25 Signup and view all the answers

Which function has better reusability?

function drawCircle(x, y, radius, color){} Signup and view all the answers

How many circles of radius 10 will fit vertically stacked in a window that has height 100?

5 Signup and view all the answers

What are the coordinates of point A?

ball.getX() + ball.getRadius(), ball.getY() Signup and view all the answers

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

if(ball.getY() + ball.getRadius() > getHeight()) Signup and view all the answers

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

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

What do we need to add to line 19 to have the ball bounce off the top of the window?

dy = -dy; Signup and view all the answers

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

mouseMoveMethod(paint); Signup and view all the answers

What is a callback function?

A function passed to an event handler that is called every time a certain event happens. Signup and view all the answers

In the statement mouseMoveMethod(draw), which part is the event handler?

mouseMoveMethod Signup and view all the answers

In the statement mouseMoveMethod(draw), which part is the callback function?

draw Signup and view all the answers

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

e is a parameter passed to the callback function paint that contains information about the Mouse Event. Signup and view all the answers

Which is the best implementation of the function removeShape to remove any shape the user clicks on?

function removeShape(e){ var shape = getElementAt(e.getX(), e.getY()); if(shape != null){ remove(shape); } } Signup and view all the answers

What is wrong with the following code? The local variable ball in down is different from the global variable ball in drag.

Line 4 declares a new local variable var ball. Signup and view all the answers

How can we fix the problem in the previous code?

Get rid of the word var in line 4. Signup and view all the answers

What happens when the line moveBall is included in the start function?

The function moveBall will be called every time any key on the keyboard is pressed down. Signup and view all the answers

How can a user move the square up on the screen in the given program?

Pressing down the 'R' key Signup and view all the answers

What happens if the user presses the spacebar in the program?

The square changes color to a random color. Signup and view all the answers

What should the value of xPosition be changed to so that the next column drawn is touching the right side of the previous column?

xPosition = xPosition + 2*RADIUS; Signup and view all the answers

What should the value of y be so that the first circle added is touching the top of the window?

var y = RADIUS + (2 * i * RADIUS); Signup and view all the answers

Study Notes

Animation Basics

A timer controls the frequency of a function call, such as setTimer(draw, 20) calling draw every 20 milliseconds.
Adding elements like circles to the canvas can be done using functions like add(circle) within the start function.

Function Callbacks and Mouse Events

Event handlers trigger functions on specific actions, e.g., mouseClickMethod(teleport) calls teleport function on mouse clicks.
Callback functions are defined to respond to events, providing access to event data through parameters like e.

Circle and Rectangle Manipulation

Circles can be manipulated using methods like setPosition, setColor, and setRadius.
Rectangles can be created similarly, defining properties such as WIDTH and HEIGHT.

Randomization and Animation Effects

Functions can generate random positions and colors using Randomizer.nextInt and Randomizer.nextColor.
The program can animate shapes, such as moving a ball and checking for boundary collisions within the drawing area.

Game Logic and Structure

In games, global variables hold important elements such as the ball position, direction, and animation state.
Collision detection is managed by comparing positions of shapes, using conditions to determine if one shape intersects another.

Reusability in Code

Code reusability is enhanced through the use of functions that handle multiple parameters, making the same logic applicable to different situations.
Constants should be used for fixed values to avoid "magic numbers," promoting clearer code.

User Interaction and Control

The program can respond to user inputs such as mouse clicks and keyboard presses to control animations and shapes.
Example functions like pause toggle animations based on user interactions.

Best Practices

Avoid declaring local variables if the intent is to affect global variables across multiple functions.
Organizing functions to handle small, individual tasks increases code clarity and maintainability.
Use informative naming conventions for functions and variables to enhance code readability.

Graphics and Coordinate Systems

Understanding the coordinate system of the canvas is crucial; the origin starts at the top-left corner.
Calculate edge positions of shapes using methods like getX, getY, and utilize the shape's dimensions for boundary checks.

Collision Handling

Use comparison logic to determine if shapes hit each other, adjusting speeds or directions as needed when collisions are detected.
Mechanisms like stopTimer(draw) halt animations based on user commands or conditions.### Shape Removal Function
removeShape(e) function removes a shape at the mouse click position.
Uses getElementAt(e.getX(), e.getY()) to identify the shape.
If a shape is detected, it is removed from the canvas.

Ball Creation and Dragging Issue

Code creates a circle that follows the mouse during a drag action.
Local variable ball in the down function is distinct from the global variable ball in drag.
Functions need to manipulate the same global ball for expected behavior.

Fixing the Ball Reference Issue

Remove the var keyword in line 4 to ensure they reference the same global ball variable.

Effect of moveBall Function

moveBall is triggered whenever a key is pressed, allowing for keyboard interactions.

Moving a Square with Keyboard

The square can be moved up by pressing the 'R' key.
down(e) function facilitates movement in different directions based on key input.

Spacebar Functionality

Pressing the spacebar changes the square's color to a random color.

Drawing Circles in Columns

Circles are drawn in alternating red and black colors.
Update xPosition to xPosition + 2 * RADIUS to ensure columns touch without gaps.

Positioning Circles Vertically

Set y = RADIUS + (2 * i * RADIUS) to stack circles without overlap and maintain contact at their edges.

Appropriate Global Variable Examples

Global variables should include:
- Ball in the game.
- Counter for spacebar presses.
Parameters (e) and loop counters should not be global due to scope and context limitations.

Blinking Rectangles Challenge

Use NUM_RECTANGLES_ACROSS and NUM_RECTANGLES_DOWN to determine rectangle dimensions.
drawRect(e) function creates rectangles based on mouse position and assigns random colors.

Increasing Number of Shapes Challenge

DELAY, CIRCLE_RADIUS, BUFFER, and RADIUS variables control shape creation.
drawCircle and drawSquare functions are called at 1-second intervals to generate and position new shapes randomly on the canvas.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Test your knowledge on animation concepts and game programming with these flashcards from CodeHS. This quiz covers timer functions, object movement, and other essential coding topics. Perfect for students and enthusiasts looking to enhance their understanding of game development.

Animation and Games CodeHS Flashcards

Questions and Answers

When will the function draw be called?

Which statement will call a function animate every 50 milliseconds?

What does the program do?

Which statement would stop the timer in the following program?

What does the Growing Circle program do?

Why do we want our code to be 'reusable'?

How can we make our code reusable?

Which function has better reusability?

What is a callback function?

How can we calculate the x-coordinate of point A?

Which statement should we use to determine if ball is hitting the left edge of the window?

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

How many times will the ball be moved before the animation stops?

Which function has better reusability?

How many circles of radius 10 will fit vertically stacked in a window that has height 100?

What are the coordinates of point A?

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

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

What do we need to add to line 19 to have the ball bounce off the top of the window?

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

What is a callback function?

In the statement mouseMoveMethod(draw), which part is the event handler?

In the statement mouseMoveMethod(draw), which part is the callback function?

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

Which is the best implementation of the function removeShape to remove any shape the user clicks on?

What is wrong with the following code? The local variable ball in down is different from the global variable ball in drag.

How can we fix the problem in the previous code?

What happens when the line moveBall is included in the start function?

How can a user move the square up on the screen in the given program?

What happens if the user presses the spacebar in the program?

What should the value of xPosition be changed to so that the next column drawn is touching the right side of the previous column?

What should the value of y be so that the first circle added is touching the top of the window?

Study Notes

Animation Basics

Function Callbacks and Mouse Events

Circle and Rectangle Manipulation

Randomization and Animation Effects

Game Logic and Structure

Reusability in Code

User Interaction and Control

Best Practices

Graphics and Coordinate Systems

Collision Handling

Ball Creation and Dragging Issue

Fixing the Ball Reference Issue

Effect of moveBall Function

Moving a Square with Keyboard

Spacebar Functionality

Drawing Circles in Columns

Positioning Circles Vertically

Appropriate Global Variable Examples

Blinking Rectangles Challenge

Increasing Number of Shapes Challenge

Studying That Suits You

Description

More Quizzes Like This

Fox Animation Domination Block History

Cat Sprite Animation Quiz

Unity Animator Controller

Introduction to Block-Based Programming and 3D Animation