Quia - Class Page - 0-Mini Golf: Interactions🏌️

Day 1 – Dragging & Rotating the Putter 🎯

Objective: Students will implement interactive behaviors (dragging and rotating the putter) and write pseudocode.

❓ Question of the Day (5-10 mins)

🤔 Think & Discuss:

"In video games, how do you think characters know when you're clicking or dragging them with your mouse?"

Students share ideas, then teacher connects to Boolean expressions and mouse interactions.

💻 Exercise 4.5.2: Dragging the Putter

What You're Building:

You'll make the putter follow your mouse when you drag it across the screen.

1 Copy the Starter Code

Copy and paste the starter code provided into CodeHS.

2 Find the draw() Function

Look for the draw() function. This function runs over and over (every frame) to animate your game.

3 Add the Dragging Code

Inside the draw() function, add this if/else statement:

// Controlling the putter and hitting the ball
if (putter.mouse.dragging()) {
    putter.moveTowards(mouse, 0.1);
} else {
    putter.speed = 0;
}

✅ Answer Key - Exercise 4.5.2

What this code does:

putter.mouse.dragging() checks if the mouse is dragging the putter (returns true or false)
If TRUE: putter.moveTowards(mouse, 0.1) makes the putter move toward the mouse position
If FALSE: putter.speed = 0 stops the putter from moving
The number 0.1 controls how fast the putter follows the mouse (smaller = slower)

Test your code! Click and drag the putter. It should follow your mouse smoothly.

💻 Exercise 4.5.3: Rotating the Putter

What You're Building:

You'll make the putter rotate when you press the 'r' key on your keyboard.

1 Copy Your Previous Code

Copy and paste your code from Exercise 4.5.2 (Dragging the Putter).

2 Add Rotation Code

In the draw() function, AFTER the dragging code, add this:

// Pressing r will rotate the putter
if (kb.presses('r')) {
    putter.rotate(45, 10);
}

✅ Answer Key - Exercise 4.5.3

What this code does:

kb.presses('r') checks if the 'r' key was just pressed (returns true or false)
putter.rotate(45, 10) rotates the putter by 45 degrees over 10 frames
First number (45) = how many degrees to rotate
Second number (10) = how many frames the rotation takes (higher = slower rotation)

Try changing 45 to different numbers like 90 or 180 to see different rotation amounts!

👥 Hands-On Closure: "Putter Showcase" (5-10 mins)

✍️ Pseudocode Practice:

Write pseudocode to create an if block that has a couch sprite rotate by 20 degrees at a rate of 10 degrees/sec when the user clicks on it.

✅ Pseudocode Answer:

if (user clicks on couch) {
    rotate couch by 20 degrees at 10 degrees/sec
}

💻 Code Practice:

Write code to create an if block that has a couch sprite rotate by 20 degrees at a rate of 10 degrees/sec when the user clicks on it. Use your pseudocode to help you!

✅ Code Answer:

if (couch.mouse.presses()) {
    couch.rotate(20, 10);
}

🤔 Reflection Questions:

How did you make the putter move and rotate?
What problem did you face, and how did you fix it?

Day 2 – Ball Movement & Slowing Mechanics ⚡

Objective: Students will control ball behavior using comparison operators and if/else statements to slow the ball.

❓ Question of the Day (5-10 mins)

🤔 Think & Discuss:

"When you roll a real golf ball on grass, it slows down and stops. What do you think causes this to happen? How could we recreate this effect in code?"

Students discuss friction and forces. Teacher introduces comparison operators and how to check if something is moving.

💻 Exercise 4.5.4: Slowing Down the Ball

What You're Building:

You'll add friction to make the ball slow down naturally when it rolls on the grass, just like in real mini golf!

1 Copy Your Previous Code

Copy and paste your code from Exercise 4.5.3 (Rotating the Putter).

2 Add Structure for New If Statement

At the END of your draw() function (after all other code), add an empty if statement structure:

if ( ) {
    
}

3 Write the Boolean Expression

In the parentheses, check if the ball's speed is greater than 0:

if (ball.speed > 0) {
    
}

4 Decrease the Ball's Speed

Inside the curly braces, subtract 0.01 from the ball's speed:

// Creating friction between the ball and grass
if (ball.speed > 0) {
    ball.speed -= 0.01;
}

✅ Answer Key - Exercise 4.5.4

What this code does:

ball.speed > 0 is a comparison operator that checks if the ball is moving
The > symbol means "greater than"
ball.speed -= 0.01 is shorthand for ball.speed = ball.speed - 0.01
This code runs every frame, so the ball slows down gradually
The number 0.01 is the friction amount (larger = more friction = faster slowdown)

Experiment! Try changing 0.01 to 0.1 to see the ball stop much faster. Try 0.001 to see it slow down very gradually.

👥 Hands-On Closure: "Slow-Mo Challenge" (5-10 mins)

✍️ Pseudocode Practice:

Write pseudocode to create an if block that checks if a car sprite's speed is greater than 5, and if so, decreases the speed by 0.5.

✅ Pseudocode Answer:

if (car speed is greater than 5) {
    car speed = car speed - 0.5
}

💻 Code Practice:

Write code to create an if block that checks if a car sprite's speed is greater than 5, and if so, decreases the speed by 0.5. Use your pseudocode to help you!

✅ Code Answer:

if (car.speed > 5) {
    car.speed -= 0.5;
}

Note: car.speed -= 0.5 is shorthand for car.speed = car.speed - 0.5

🤔 Reflection Questions:

How did you implement the slowing behavior?
Did the ball always slow down correctly? Why or why not?

Day 3 – Removing the Ball & Game Completion 🎉

Objective: Students will implement sprite removal logic to complete the game.

❓ Question of the Day (5-10 mins)

🤔 Think & Discuss:

"In mini golf, what happens when the ball goes into the hole? How do you think a computer game 'knows' when two objects are touching each other?"

Students share ideas about collision detection. Teacher connects to the overlaps() method and sprite removal.

💻 Exercise 4.5.5: Removing the Ball

What You're Building:

You'll make the ball disappear when it goes into the hole, just like scoring in real mini golf!

1 Write Pseudocode First!

Before coding, write pseudocode on paper or as a comment:

// If the ball overlaps with the hole, then remove the ball

2 Copy Your Previous Code

Copy and paste your code from Exercise 4.5.4 (Slowing Down the Ball).

3 Add Structure for New If Statement

At the END of your draw() function, add an empty if statement:

if ( ) {
    
}

4 Check if Ball Overlaps Hole

Use the overlaps() method to check collision:

if (ball.overlaps(hole)) {
    
}

5 Remove the Ball

Inside the if statement, use the remove() method:

// If ball touches hole, remove ball
if (ball.overlaps(hole)) {
    ball.remove();
}

When you use overlaps(), sprites will no longer collide with each other - they will overlap instead! This is what we want for the ball and hole.

✅ Answer Key - Exercise 4.5.5

What this code does:

ball.overlaps(hole) checks if the ball sprite is touching the hole sprite
Returns true when they touch, false when they don't
ball.remove() deletes the ball sprite from the canvas completely
This creates the effect of the ball "falling into" the hole

6 Add Comments to All If Statements

Make sure each if statement in your draw() function has a comment explaining what it does!

🏆 Complete Game Code

✅ Final Complete Code

Your final draw() function should look like this:

function draw() {
    clear();
    background('#79bef2');

    // Updating mouse coordinates
    coordinates.text = round(mouse.x, 1) + ', ' + round(mouse.y, 1);

    // Controlling the putter and hitting the ball
    if (putter.mouse.dragging()) {
        putter.moveTowards(mouse, 0.1);
    } else {
        putter.speed = 0;
    }

    // Pressing r will rotate the putter
    if (kb.presses('r')) {
        putter.rotate(45, 10);
    }

    // Creating friction between the ball and grass
    if (ball.speed > 0) {
        ball.speed -= 0.01;
    }

    // If ball touches hole, remove ball
    if (ball.overlaps(hole)) {
        ball.remove();
    }
}

👥 Hands-On Closure: "Hole-in-One Challenge" (5-10 mins)

✍️ Pseudocode Practice:

Write pseudocode to create an if block that removes a coin sprite when a player sprite overlaps with it.

✅ Pseudocode Answer:

if (player overlaps with coin) {
    remove coin
}

💻 Code Practice:

Write code to create an if block that removes a coin sprite when a player sprite overlaps with it. Use your pseudocode to help you!

✅ Code Answer:

if (player.overlaps(coin)) {
    coin.remove();
}

Remember: When using overlaps(), sprites will no longer collide - they will pass through each other!

🤔 Reflection Questions:

How does removing the ball affect gameplay?
Which interaction was the most challenging to implement and why?
How would you add a second hole or additional interactions?