🏌️‍♀️ CodeHS 4.2: Mini Golf Sprites

Interactive Teaching Guide & Complete Resource Package

👩‍🏫 Teacher: Mrs. Simmons-Fiawoo

📚 Course: 8th Grade Computer Science

⏱️ Duration: 50 minutes

💻 Platform: CodeHS.com

🎯 Standard: CSTA 2-AP-13

📥 Download & Print Options

📥 Student Handout Options

🎯 MAIN OBJECTIVE: We will be able to apply coding skills to construct a golf course environment by adding, positioning, and layering sprites on the game canvas.

📊 Standards & Success Criteria

CSTA 2-AP-13: Decompose problems and subproblems into parts to facilitate design, implementation, and review.

Success Criteria (I can...):

Add all five sprite elements to the canvas
Position sprites using x, y coordinates
Layer sprites in the correct visual order
Include comments that explain my code

🕐 50-Minute Lesson Timeline

5 min

Warm-Up & Hook

Discussion: What is a sprite? Why do games use them?

15 min

Direct Instruction

Live coding demonstration: setImage(), setPosition(), setSize(), add()

20 min

Scaffolded Practice

Students complete CodeHS 4.2.2-4.2.5 activities

5 min

Peer Review

Partner code review using checklist

5 min

Kahoot Quiz & Closure

Assessment and exit ticket

📐 Step-by-Step: Adding Sprites to Canvas

🎯 Goal: Create This Layout

Target Layout: Gray border (wall), green grass, black hole (top), purple ball (bottom)

STEP 1: Create the Grass Background

What to do: Add a green rectangle that fills the entire canvas

// ===== STEP 1: GRASS BACKGROUND =====
let grass = new Rectangle(getWidth(), getHeight());
grass.setPosition(0, 0);
grass.setColor("#5a9a7c"); // Golf course green
add(grass); // Add FIRST so it stays in back
                    

getWidth() and getHeight() make the grass fill the whole canvas
setPosition(0, 0) starts at top-left corner
add() makes it visible - always add background FIRST

STEP 2: Add the Golf Hole (Target)

What to do: Create a black circle near the top center

// ===== STEP 2: GOLF HOLE TARGET =====
let hole = new Circle(15); // Radius of 15 pixels
hole.setPosition(getWidth()/2, 100); // Center horizontally, near top
hole.setColor("black");
add(hole); // Appears above grass
                    

Circle(15) creates a circle with radius of 15 pixels
getWidth()/2 centers it horizontally
Position at y = 100 places it near the top

STEP 3: Add the Gray Border Walls

What to do: Create gray rectangles around all edges

// ===== STEP 3: BOUNDARY WALLS =====
let wallThickness = 30; // Width of border

// Top wall
let wallTop = new Rectangle(getWidth(), wallThickness);
wallTop.setPosition(0, 0);
wallTop.setColor("#888"); // Gray
add(wallTop);

// Bottom wall
let wallBottom = new Rectangle(getWidth(), wallThickness);
wallBottom.setPosition(0, getHeight() - wallThickness);
wallBottom.setColor("#888");
add(wallBottom);

// Left wall
let wallLeft = new Rectangle(wallThickness, getHeight());
wallLeft.setPosition(0, 0);
wallLeft.setColor("#888");
add(wallLeft);

// Right wall
let wallRight = new Rectangle(wallThickness, getHeight());
wallRight.setPosition(getWidth() - wallThickness, 0);
wallRight.setColor("#888");
add(wallRight);
                    

Four separate rectangles create border on all sides
getHeight() - wallThickness positions bottom wall at bottom edge
Walls added AFTER grass so they appear on top

STEP 4: Add the Golf Ball (Player)

What to do: Create a purple circle near the bottom center

// ===== STEP 4: GOLF BALL (player-controlled) =====
let ball = new Circle(10); // Smaller than hole
ball.setPosition(getWidth()/2, getHeight() - 100); // Center, near bottom
ball.setColor("purple");
add(ball); // Added LAST to appear on top
                    

Circle(10) makes ball smaller than hole (radius 10 vs 15)
getHeight() - 100 positions near bottom
Ball added LAST so it appears above everything else

STEP 5: Add the Putter (Optional)

What to do: Create a brown rectangle below the ball

// ===== STEP 5: PUTTER (control indicator) =====
let putter = new Rectangle(80, 15); // Horizontal putter
putter.setPosition(getWidth()/2 - 40, getHeight() - 50);
putter.setColor("#654321"); // Brown
add(putter);
                    

✅ Complete Code Example

// COMPLETE MINI GOLF SPRITE SETUP

// Background (add FIRST)
let grass = new Rectangle(getWidth(), getHeight());
grass.setColor("#5a9a7c");
add(grass);

// Hole target
let hole = new Circle(15);
hole.setPosition(getWidth()/2, 100);
hole.setColor("black");
add(hole);

// Walls (border)
let wallThickness = 30;

let wallTop = new Rectangle(getWidth(), wallThickness);
wallTop.setColor("#888");
add(wallTop);

let wallBottom = new Rectangle(getWidth(), wallThickness);
wallBottom.setPosition(0, getHeight() - wallThickness);
wallBottom.setColor("#888");
add(wallBottom);

let wallLeft = new Rectangle(wallThickness, getHeight());
wallLeft.setColor("#888");
add(wallLeft);

let wallRight = new Rectangle(wallThickness, getHeight());
wallRight.setPosition(getWidth() - wallThickness, 0);
wallRight.setColor("#888");
add(wallRight);

// Ball (add LAST to appear on top)
let ball = new Circle(10);
ball.setPosition(getWidth()/2, getHeight() - 100);
ball.setColor("purple");
add(ball);
                        

📋 Teacher Circulation Checklist

Check For	Success Looks Like
All 5 sprites visible	Grass, hole, walls, ball, putter all on canvas
Proper layering	Background first, game pieces on top
Logical positioning	Ball near putter, hole reachable
Descriptive comments	Each section explained clearly
No syntax errors	Code runs without console errors

🎓 Quick Reference: Key Methods

Method	Purpose	Example
`new Circle(radius)`	Creates a circular sprite	`new Circle(15)`
`new Rectangle(w, h)`	Creates a rectangular sprite	`new Rectangle(100, 50)`
`.setPosition(x, y)`	Places sprite at coordinates	`ball.setPosition(200, 300)`
`.setColor(color)`	Changes sprite color	`grass.setColor("green")`
`add(sprite)`	Displays sprite on canvas	`add(ball)`
`getWidth()`	Returns canvas width	`getWidth()/2` for center
`getHeight()`	Returns canvas height	`getHeight() - 100`

💡 Teaching Tips

Common Mistake: Students forget to call add() - sprite is created but not visible
Layering Confusion: Emphasize "first added = back layer, last added = front layer"
Positioning Help: Draw coordinate system on board with (0,0) at top-left
Color Options: Show students they can use color names ("purple") or hex codes ("#5a9a7c")
Centering Formula: getWidth()/2 centers horizontally, adjust for sprite width if needed

⚠️ Troubleshooting Common Issues

Problem	Likely Cause	Solution
Sprite doesn't appear	Forgot `add()`	Add `add(spriteName)` after setup
Sprite in wrong layer	Added in wrong order	Move `add()` calls - background first, foreground last
Sprite off-screen	Coordinates outside canvas	Check x < getWidth() and y < getHeight()
Sprite too small/large	Wrong radius or dimensions	Adjust Circle radius or Rectangle width/height

📝 CodeHS 4.2: Mini Golf Sprites - Student Handout

Name: _________________ Date: _________________

TODAY'S GOAL: I will apply coding skills to construct a golf course by adding, positioning, and layering sprites on the canvas.

🔥 Warm-Up (5 min)

1. What is a "sprite" in computer programming?

2. Why do games use sprites instead of drawing everything from scratch each time?

📚 Key Vocabulary

Term	Definition
Sprite	A graphic object in a program
Canvas	The drawing surface where graphics appear
Coordinates (x, y)	Position values (horizontal, vertical)
Layering	The order in which objects are added to the canvas

💻 Coding Practice Checklist

Complete each CodeHS activity and check off when done:

4.2.2 - Grass and Hole sprites added
4.2.3 - Wall boundaries created
4.2.4 - Ball and putter positioned
4.2.5 - Comments added to all sections

👥 Peer Review Protocol

Partner's Name: _________________

✓ Check each item in your partner's code:

All 5 sprite elements present (grass, hole, walls, ball, putter)
Comments are clear and descriptive
Code is organized with spacing between sections
Layout looks like a playable golf course

One GLOW (something they did well):

One GROW (something to improve):

🎯 Exit Ticket

1. Name two reasons why adding comments helps in programming:

2. Which sprite was most difficult to position and why?

3. PREDICT: What will we do next to turn this into a playable game?

✅ Self-Assessment Checklist

Before submitting your code, check that you have:

✓ Background Layer

□ Green grass rectangle fills canvas
□ Grass is added FIRST
□ Uses getWidth() and getHeight()

✓ Game Elements

□ Black hole circle at top
□ Purple ball circle at bottom
□ Both centered horizontally

✓ Walls/Borders

□ Gray rectangles on all 4 sides
□ Walls cover edges completely
□ All walls same color

✓ Code Quality

□ Comments explain each section
□ Proper spacing between sections
□ No console errors

🎯 Success Criteria

Your canvas should look like this when complete:

✓ Gray border visible ✓ Green grass background ✓ Black hole at top ✓ Purple ball at bottom ✓ All elements visible

🎯 Kahoot-Style Quiz: Mini Golf Sprites

Use after students complete CodeHS activities 4.2.2-4.2.5

Question 1: What is a sprite?

A) A type of soda pop
B) A graphic object used in a program 🟢
C) A programming language
D) A type of comment

Answer: B - A sprite is a graphic object (like an image) that represents game elements.

Question 2: Which method do we use to place a sprite at a specific location?

A) setSize()
B) setColor()
C) setPosition() 🟢
D) setLocation()

Answer: C - setPosition(x, y) places a sprite at specific coordinates.

Question 3: If you want the grass background to stay BEHIND all other sprites, when should you add it?

A) Last, after all other sprites
B) First, before all other sprites 🟢
C) It doesn't matter
D) In the middle

Answer: B - Sprites added first appear in the back. This is called layering order.

Question 4: What does this code do? `ball.setSize(30, 30);`

A) Moves the ball to position (30, 30)
B) Creates 30 ball sprites
C) Makes the ball 30 pixels wide and 30 pixels tall 🟢
D) Changes the ball's color

Answer: C - setSize(width, height) changes the dimensions of a sprite.

Question 5: Why are comments important in code?

A) They make the program run faster
B) They help explain what the code does 🟢
C) They are required for code to work
D) They change the sprite colors

Answer: B - Comments document code and help programmers understand it later.

Question 6: What does getWidth() return?

A) The width of a sprite
B) The width of the entire canvas 🟢
C) The width of the hole
D) The number of sprites

Answer: B - getWidth() returns the total width of the canvas in pixels.

Question 7: Which sprite should be added LAST to appear on top of everything?

A) Grass background
B) Hole
C) Walls
D) Ball or putter 🟢

Answer: D - The last sprite added appears on top (foreground).

Question 8: What happens if you forget to call add(sprite)?

A) The sprite appears in the wrong spot
B) The sprite never appears on the canvas 🟢
C) The sprite appears twice
D) You get a syntax error

Answer: B - add() is required to make a sprite visible on the canvas.

Question 9: In canvas coordinates, where is (0, 0)?

A) Center of the canvas
B) Top-left corner 🟢
C) Bottom-right corner
D) Top-right corner

Answer: B - Canvas coordinates start at (0, 0) in the top-left corner.

Question 10: What's the best way to organize your code?

A) Write everything on one line
B) Use comments and group related code together 🟢
C) Never use spaces
D) Delete all comments before submitting

Answer: B - Good organization includes comments, spacing, and logical grouping.

🎮 How to Create This Quiz in Kahoot

Step-by-Step Instructions:

Go to: create.kahoot.it
Click: "Create new kahoot" button
Select: "Quiz" format
Copy: Each question above into Kahoot editor
Set time: 30-45 seconds per question (recommended)
Add points: 1000 points per question (standard)
Mark correct answer: Click the checkmark on the right answer
Save & Play: Share game PIN with students!

💡 Kahoot Tips

Timer: 30 seconds for easier questions (1-5), 45 seconds for application questions (6-10)
Images: Consider adding the canvas image to Questions 3, 7, and 9 for visual support
Music: Enable "lobby music" to build excitement while students join
Teams: Use "Team mode" for collaborative learning
Pacing: Show questions on screen during review for students without devices

🎯 Ready to Play!

Use this quiz after students complete CodeHS activities 4.2.2 - 4.2.5

📄 Mini Golf Sprites Quiz (Printable Version)

Name: ______________________ Date: ____________ Period: ____

Directions: Circle the letter of the best answer.

1. What is a sprite?

A) A type of soda pop

B) A graphic object used in a program

C) A programming language

D) A type of comment

2. Which method do we use to place a sprite at a specific location?

A) setSize()

B) setColor()

C) setPosition()

D) setLocation()

3. If you want the grass background to stay BEHIND all other sprites, when should you add it?

A) Last, after all other sprites

B) First, before all other sprites

C) It doesn't matter

D) In the middle

4. What does this code do? ball.setSize(30, 30);

A) Moves the ball to position (30, 30)

B) Creates 30 ball sprites

C) Makes the ball 30 pixels wide and 30 pixels tall

D) Changes the ball's color

5. Why are comments important in code?

A) They make the program run faster

B) They help explain what the code does

C) They are required for code to work

D) They change the sprite colors

6. What does getWidth() return?

A) The width of a sprite

B) The width of the entire canvas

C) The width of the hole

D) The number of sprites

7. Which sprite should be added LAST to appear on top of everything?

A) Grass background

B) Hole

C) Walls

D) Ball or putter

8. What happens if you forget to call add(sprite)?

A) The sprite appears in the wrong spot

B) The sprite never appears on the canvas

C) The sprite appears twice

D) You get a syntax error

9. In canvas coordinates, where is (0, 0)?

A) Center of the canvas

B) Top-left corner

C) Bottom-right corner

D) Top-right corner

10. What's the best way to organize your code?

A) Write everything on one line

B) Use comments and group related code together

C) Never use spaces

D) Delete all comments before submitting

✂️ TEACHER ANSWER KEY (Cut Below) ✂️

Answer Key

Question	Answer	Explanation
1	B	A sprite is a graphic object used in programs
2	C	setPosition(x, y) places sprites at coordinates
3	B	First sprites added appear in back (layering)
4	C	setSize() changes width and height in pixels
5	B	Comments document and explain code purpose
6	B	getWidth() returns total canvas width
7	D	Last sprites added appear on top (foreground)
8	B	add() is required to display sprites on canvas
9	B	Canvas origin (0,0) is at top-left corner
10	B	Good organization uses comments and grouping

Grading Scale

10 points: A (100%)

9 points: A (90%)

8 points: B (80%)

7 points: C (70%)

6 points: D (60%)

Below 6: Needs review and retake

📝 Assessment Options

Choose the format that works best for your classroom

💡 Teaching Resources & Extensions

🎥 Video Resources

📺 CodeHS Introduction to Sprites
Embed from CodeHS or create your own explanation video

🧩 Differentiation Strategies

For Struggling Learners:

Coordinate reference sheet showing canvas quadrants
Code starter templates with TODO comments
Strategic pair programming partnerships
Visual diagram of correct layering order
Step-by-step checklist with examples

For Advanced Students:

Add decorative sprites (flag, sand trap, tree)
Create a two-hole course with different layouts
Implement conditional logic for overlap detection
Research sprite sheets and optimization
Design a scoring system display

ELL Support:

Vocabulary anchor chart with visuals
Bilingual glossary of programming terms
Color-coded code examples by function
Sentence frames for peer review feedback

📊 Assessment Rubric

Criteria	Developing (1-2)	Proficient (3)	Advanced (4)
Sprite Creation	0-3 sprites present	All 5 sprites present	5+ sprites with extras
Positioning	Sprites off-screen or overlapping incorrectly	All sprites positioned logically	Perfect positioning with dynamic sizing
Layering	Incorrect layer order	Correct background-to-foreground order	Intentional layering for visual effect
Comments	No comments or unclear	Comments present and descriptive	Detailed, organized documentation
Code Quality	Syntax errors, won't run	Runs without errors	Clean, efficient, organized code

🔗 Additional Resources

CodeHS Teacher Forum: Share strategies and get support
Computer Science Teachers Association (CSTA): Professional development
Code.org: Supplementary sprite activities
Khan Academy: JavaScript graphics tutorials
Scratch: Visual sprite programming for concept reinforcement

📝 Reflection Questions for Teachers

After teaching this lesson, consider:

Which concept required the most re-teaching?
What instructional strategy was most effective?
How did peer review impact student understanding?
What should be adjusted for next time?
How will today's challenges inform tomorrow's lesson?
Which students need additional support or enrichment?

📥 Downloadable Materials

All materials in this teaching guide are designed to be:

🖨️

Printable

Use Print buttons throughout

✏️

Editable

Copy to Google Docs or Word

📺

Projectable

Display in classroom

♿

Accessible

Screen reader friendly

🎓 Professional Development Resources

Resource	Description	Link
CodeHS PD	Professional development courses for teachers	Visit Site
CSTA	Computer Science Teachers Association resources	Visit Site
Code.org	Supplementary CS education materials	Visit Site
Khan Academy	JavaScript and graphics tutorials	Visit Site

✨ What's Next?

📚 Lesson 4.3

Mouse Click Events

Students will add interactivity by responding to mouse clicks

🎮 Lesson 4.4

Ball Movement

Animate the ball using timers and velocity

💥 Lesson 4.5

Collision Detection

Detect when ball hits walls or enters hole

🎉 Complete Teaching Package Ready!

Everything you need to teach CodeHS 4.2 Mini Golf Sprites

Created for Mrs. Simmons-Fiawoo | 8th Grade Computer Science

🏌️‍♀️ CodeHS 4.2: Mini Golf Sprites

📥 Download & Print Options

📥 Student Handout Options

📊 Standards & Success Criteria

🕐 50-Minute Lesson Timeline

📐 Step-by-Step: Adding Sprites to Canvas

🎯 Goal: Create This Layout

STEP 1: Create the Grass Background

STEP 2: Add the Golf Hole (Target)

STEP 3: Add the Gray Border Walls

STEP 4: Add the Golf Ball (Player)

STEP 5: Add the Putter (Optional)

✅ Complete Code Example

📋 Teacher Circulation Checklist

🎓 Quick Reference: Key Methods

💡 Teaching Tips

⚠️ Troubleshooting Common Issues

📝 CodeHS 4.2: Mini Golf Sprites - Student Handout

🔥 Warm-Up (5 min)

📚 Key Vocabulary

💻 Coding Practice Checklist

👥 Peer Review Protocol

🎯 Exit Ticket

✅ Self-Assessment Checklist

✓ Background Layer

✓ Game Elements

✓ Walls/Borders

✓ Code Quality

🎯 Success Criteria

🎯 Kahoot-Style Quiz: Mini Golf Sprites

Question 1: What is a sprite?

Question 2: Which method do we use to place a sprite at a specific location?

Question 3: If you want the grass background to stay BEHIND all other sprites, when should you add it?

Question 4: What does this code do? ball.setSize(30, 30);

Question 5: Why are comments important in code?

Question 6: What does getWidth() return?

Question 7: Which sprite should be added LAST to appear on top of everything?

Question 8: What happens if you forget to call add(sprite)?

Question 9: In canvas coordinates, where is (0, 0)?

Question 10: What's the best way to organize your code?

🎮 How to Create This Quiz in Kahoot

Step-by-Step Instructions:

💡 Kahoot Tips

🎯 Ready to Play!

📄 Mini Golf Sprites Quiz (Printable Version)

✂️ TEACHER ANSWER KEY (Cut Below) ✂️

Answer Key

Grading Scale

📝 Assessment Options

💡 Teaching Resources & Extensions

🎥 Video Resources

🧩 Differentiation Strategies

For Struggling Learners:

For Advanced Students:

ELL Support:

📊 Assessment Rubric

🔗 Additional Resources

📝 Reflection Questions for Teachers

📥 Downloadable Materials

🎓 Professional Development Resources

✨ What's Next?

📚 Lesson 4.3

🎮 Lesson 4.4

💥 Lesson 4.5

🎉 Complete Teaching Package Ready!

Question 4: What does this code do? `ball.setSize(30, 30);`