Lesson 20: Scoring HUD — Font Rendering (Matthes Ch 14 §3-4)
Learning Intentions
- Add a score that goes up when you hit aliens, rendered in the top-right corner using pygame.
- font.
Success Criteria
- Each alien kill awards +50 points.
- The current score displays in the top-right.
- I can explain the 3-step pygame.font pipeline (font → render → blit).
📍 Do Now — Error of the Day
Open any arcade game on your phone. Screenshot the HUD (score, lives, level). What pieces does it show? In what corners?
👁 I Do — Teacher Demo
Live-code the Scoreboard class. Walk through the 3-step font pipeline: SysFont → render (returns Surface) → blit. Build prep_score() + show_score().
🤝 We Do — Build Together
Class adds scoring. Alien kill → self.stats.score += self.settings.alien_points * len(aliens). Call self.sb.prep_score(). Watch the score climb in the top-right.
🚀 You Do — Your Turn
Round the score to nearest 10 with round(score, -1). Tune font size + text colour. Arcade quests cover pygame.font.
- Create scoreboard.py with class Scoreboard
- __init__: store screen + stats + settings + font
- prep_score(): render rounded score to a Surface; store score_image + score_rect
- show_score(): blit score_image at score_rect
- Add self.stats.score += self.settings.alien_points * len(aliens) in the collision check + self.sb.prep_score()
🎮 Practice Quests — work through these
Loading practice quests for this lesson...
Three tiers — pick yours
Support
Scoreboard skeleton with prep_score pre-written
Core
build from scratch
Extension
comma-thousands formatting
Extensions
- Round score to nearest 10 using round(score, -1) for a cleaner HUD.
- Use rect.right alignment so the score stays anchored even as digits grow.
📝 Exit Ticket — Coding Journal
Journal: explain the 3 steps of rendering text in Pygame (SysFont → render → blit).
Evidence of Learning
Score updates every alien kill. Visible in top-right corner of screen.