Step 1
What is Pygame?
Pygame is a Python library that makes it easy to build 2D games and interactive programs. It handles drawing to the screen, playing sounds, detecting keypresses, and tracking collisions — all with straightforward Python code.
Games like space shooters, platformers, puzzle games, and even simulations are built with Pygame every day. Best of all, you don't need to be an expert — if you know the basics of Python, you're ready.
Step 2
Open the Editor
Instead of installing anything, use the Hackingtons Pygame Editor — it runs real Pygame code directly in your browser. No Python install, no terminal, no setup.
Open it in a new tab, then come back here and follow along. For each step, just paste the code into the editor and click the green Run button.
Step 3
Your First Window
Every Pygame project follows the same basic skeleton: initialize Pygame, create a window, run a game loop, and finally quit. Let's build that now.
Paste the following into the editor and click Run:
import pygame
pygame.init()
# Create a 600×400 window
screen = pygame.display.set_mode((600, 400))
pygame.display.set_caption("My First Game")
clock = pygame.time.Clock()
running = True
while running:
# 1. Handle events
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
# 2. Fill the background
screen.fill((30, 30, 46)) # dark navy color
# 3. Update the display
pygame.display.flip()
clock.tick(60) # 60 frames per second
pygame.quit()Click Run. You should see a dark window appear in the canvas panel on the right.
while running loop runs ~60 times per second. Each "frame" it checks for
events, redraws everything, then calls flip() to show the new frame.
This is the heartbeat of every Pygame game.
Step 4
Draw Shapes & Colors
Pygame uses RGB color tuples — three numbers (0–255) for red, green, and blue.
Add these lines inside your game loop in the editor, after screen.fill():
# Colors
WHITE = (255, 255, 255)
ORANGE = (225, 81, 10)
BLUE = ( 46, 168, 255)
GREEN = ( 61, 220, 132)
# Rectangle (surface, color, x, y, width, height)
pygame.draw.rect(screen, ORANGE, (50, 50, 120, 80))
# Circle (surface, color, center, radius)
pygame.draw.circle(screen, BLUE, (300, 200), 60)
# Line (surface, color, start_point, end_point, thickness)
pygame.draw.line(screen, GREEN, (0, 380), (600, 380), 3)
# Ellipse (surface, color, rect)
pygame.draw.ellipse(screen, WHITE, (420, 120, 140, 80))(255,0,0) · Green = (0,255,0) · Blue = (0,0,255)
· Yellow = (255,255,0) · Purple = (128,0,128) · White = (255,255,255)
· Black = (0,0,0)
Step 5
Handle Events & Keyboard Input
Pygame fires events for everything the user does — pressing a key, moving
the mouse, clicking a button, or closing the window. You read them inside the game loop
with pygame.event.get().
for event in pygame.event.get():
if event.type == pygame.QUIT: # window X button
running = False
if event.type == pygame.KEYDOWN: # key was pressed
if event.key == pygame.K_ESCAPE:
running = False
if event.key == pygame.K_SPACE:
print('Space pressed!')
if event.type == pygame.MOUSEBUTTONDOWN: # mouse click
print('Clicked at', event.pos)For smooth held-key movement (rather than one-shot keypresses) use pygame.key.get_pressed() — which returns all keys currently held down:
keys = pygame.key.get_pressed()
if keys[pygame.K_LEFT]:
player_x -= 5
if keys[pygame.K_RIGHT]:
player_x += 5
if keys[pygame.K_UP]:
player_y -= 5
if keys[pygame.K_DOWN]:
player_y += 5KEYDOWN events for things that happen once (like jumping or shooting).
Use get_pressed() for things that happen continuously while held (like walking).
Step 6
Move a Character
Now let's put it all together. Here's a complete mini-game where you control an orange square with the arrow keys. Paste this into the editor and click Run!
import pygame
pygame.init()
WIDTH, HEIGHT = 600, 400
screen = pygame.display.set_mode((WIDTH, HEIGHT))
pygame.display.set_caption('Move the Square!')
clock = pygame.time.Clock()
# Player starting position
player_x = 280
player_y = 180
SPEED = 4
ORANGE = (225, 81, 10)
NAVY = ( 30, 30, 46)
WHITE = (255, 255, 255)
font = pygame.font.SysFont('monospace', 14)
running = True
while running:
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
if event.type == pygame.KEYDOWN:
if event.key == pygame.K_ESCAPE:
running = False
# Move with arrow keys
keys = pygame.key.get_pressed()
if keys[pygame.K_LEFT] and player_x > 0:
player_x -= SPEED
if keys[pygame.K_RIGHT] and player_x < WIDTH - 40:
player_x += SPEED
if keys[pygame.K_UP] and player_y > 0:
player_y -= SPEED
if keys[pygame.K_DOWN] and player_y < HEIGHT - 40:
player_y += SPEED
# Draw
screen.fill(NAVY)
pygame.draw.rect(screen, ORANGE, (player_x, player_y, 40, 40))
label = font.render('Arrow keys to move | ESC to quit', True, WHITE)
screen.blit(label, (10, 10))
pygame.display.flip()
clock.tick(60)
pygame.quit()SPEED = 4 to a higher number to move faster. Change the ORANGE
color tuple to make your player a different color. Try making the player a circle instead
of a rectangle using pygame.draw.circle().
Step 7
Next Steps
Congrats — you just built your first Pygame program! Here's what to explore next to level up your game-building skills:
- Sprites & images — load PNG art with
pygame.image.load()and usepygame.sprite.Spriteto manage objects. - Collision detection — use
pygame.Rect.colliderect()to check if two objects overlap. - Sound effects — play sounds with
pygame.mixer.Sound('boom.wav').play(). - Score & text — render custom text with
pygame.font.Font()andsurface.blit(). - Game states — add a title screen, pause screen, and game-over screen using a state variable.
- Gravity & jumping — add a
velocity_yvariable and increase it each frame to simulate gravity.