Chapter 2.2: Setting Up Pygame & Your First Window

From Zero to Game Window in Minutes!

🎮 PROJECT 2.2 | Difficulty: Intermediate | Time: 15 minutes

💻 Interactive Options:

• 📓 Open in JupyterLite
• 📥 Download Notebook (Challenge) - For use in local Jupyter or Google Colab
• 💡 Note: Pygame requires a display, so run these examples locally!

Note

Special Note: This project is designed for students who have completed the first chapter of CS Quests and are familiar with Python basics. If you’re new to programming, consider starting with the earlier lessons before diving into this project.

Another Special Note: This project requires a local Python environment for full functionality. While we provide examples and code snippets here, some features may not run directly in the browser. For the best experience, consider setting up the project on your own computer.

🚀 Installing Pygame with UV

Using UV makes installation super simple:

# Create a new game project
mkdir my-pygame-project
cd my-pygame-project

# Initialize UV
uv init

# Add pygame
uv add pygame

# That's it! Pygame is installed.

Verify installation:

uv run python -c "import pygame; print(pygame.version.ver)"

🎮 Your First Pygame Window

Let’s create a basic game window:

# game_window.py
import pygame
import sys

# Initialize Pygame
pygame.init()

# Constants
SCREEN_WIDTH = 800
SCREEN_HEIGHT = 600
FPS = 60

# Colors
WHITE = (255, 255, 255)
BLACK = (0, 0, 0)
BLUE = (0, 100, 255)

# Create the game window
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
pygame.display.set_caption("My First Pygame Window!")

# Clock for controlling frame rate
clock = pygame.time.Clock()

# Game loop
running = True
while running:
    # Handle events
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
    
    # Fill the screen with a color
    screen.fill(BLUE)
    
    # Update the display
    pygame.display.flip()
    
    # Control frame rate
    clock.tick(FPS)

# Quit
pygame.quit()
sys.exit()

Run it:

uv run python game_window.py

🎨 Drawing Shapes

# drawing_shapes.py
import pygame
import sys

pygame.init()

SCREEN_WIDTH = 800
SCREEN_HEIGHT = 600
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
pygame.display.set_caption("Drawing Shapes")

# Colors
WHITE = (255, 255, 255)
RED = (255, 0, 0)
GREEN = (0, 255, 0)
BLUE = (0, 0, 255)
YELLOW = (255, 255, 0)

clock = pygame.time.Clock()
running = True

while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
    
    # Fill background
    screen.fill(WHITE)
    
    # Draw shapes
    # Rectangle: pygame.draw.rect(surface, color, (x, y, width, height))
    pygame.draw.rect(screen, RED, (50, 50, 100, 80))
    
    # Circle: pygame.draw.circle(surface, color, (x, y), radius)
    pygame.draw.circle(screen, GREEN, (400, 300), 50)
    
    # Line: pygame.draw.line(surface, color, start_pos, end_pos, width)
    pygame.draw.line(screen, BLUE, (600, 100), (700, 200), 5)
    
    # Polygon: pygame.draw.polygon(surface, color, points_list)
    points = [(300, 500), (350, 400), (400, 500)]
    pygame.draw.polygon(screen, YELLOW, points)
    
    pygame.display.flip()
    clock.tick(60)

pygame.quit()
sys.exit()

🎯 Adding Movement

# moving_square.py
import pygame
import sys

pygame.init()

SCREEN_WIDTH = 800
SCREEN_HEIGHT = 600
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
pygame.display.set_caption("Moving Square")

WHITE = (255, 255, 255)
RED = (255, 0, 0)
SPEED = 5

# Square position
x = 400
y = 300
size = 50

clock = pygame.time.Clock()
running = True

while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
    
    # Get pressed keys
    keys = pygame.key.get_pressed()
    if keys[pygame.K_LEFT]:
        x -= SPEED
    if keys[pygame.K_RIGHT]:
        x += SPEED
    if keys[pygame.K_UP]:
        y -= SPEED
    if keys[pygame.K_DOWN]:
        y += SPEED
    
    # Keep square on screen
    x = max(0, min(x, SCREEN_WIDTH - size))
    y = max(0, min(y, SCREEN_HEIGHT - size))
    
    # Draw
    screen.fill(WHITE)
    pygame.draw.rect(screen, RED, (x, y, size, size))
    
    pygame.display.flip()
    clock.tick(60)

pygame.quit()
sys.exit()

🎮 Key Concepts Explained

Event Handling

# Events tell you what's happening
event_types = {
    "pygame.QUIT": "User closed the window",
    "pygame.KEYDOWN": "A key was pressed",
    "pygame.KEYUP": "A key was released",
    "pygame.MOUSEBUTTONDOWN": "Mouse button clicked",
    "pygame.MOUSEMOTION": "Mouse moved"
}

print("🎮 Common Pygame Events:")
for event, description in event_types.items():
    print(f"  {event}: {description}")

The Clock

# Clock controls how fast your game runs
print("⏰ Frame Rate Examples:")
print("  30 FPS = 30 frames/second = ~33ms per frame")
print("  60 FPS = 60 frames/second = ~16ms per frame")
print("  120 FPS = 120 frames/second = ~8ms per frame")
print("\nHigher FPS = smoother motion!")

🏆 Practice Challenge

Challenge: Bouncing Ball

Create a program where:

1. A ball starts at the center
2. It moves diagonally
3. It bounces off the walls
4. Bonus: Change color on each bounce!

Hints:

• Use variables for x_speed and y_speed
• When x hits 0 or SCREEN_WIDTH, reverse x_speed
• When y hits 0 or SCREEN_HEIGHT, reverse y_speed

🚀 What’s Next?

Now that you can create windows and handle input, we’ll build our first game: Snake!

---

Previous: 2.1 Intro to Pygame | Next: 2.3 Building Snake - Part 1