👨💻 Load the Code Template
Keyboard Guide
Loading the Code Template
Copy & Paste the Code into Repl.it or VS Code
#Add import statements here #This code sets up our img directory for easy access img_dir = path.join(path.dirname(__file__), 'img') #Set screen WIDTH and HEIGHT here #Initialize PyGame here #This code sets up the screen and gives the game a title screen = pygame.display.set_mode((WIDTH, HEIGHT)) pygame.display.set_caption('PUT TITLE HERE') #Start Clock #Set Starting clicks #Set starting click amount #This code makes selecting our font easier fn = pygame.font.match_font("dejavusansmono") #This code loads our background image background = pygame.image.load(path.join(img_dir, 'INSERT FILENAME HERE')).convert() #Write code to scale background to correct size #Create BG Rect #This code loads the image we will be clicking clicker_img = pygame.image.load(path.join(img_dir, 'INSERT FILENAME HERE')).convert() #This code loads the image for our store item store1_img = pygame.image.load(path.join(img_dir, 'INSERT FILENAME HERE')).convert() #This function helps to draw the text on screen def draw_text(surf, text, size, x, y): #Set the font here #Set the text surface here #Create a text rect here text_rect.midtop = (x, y) #Use blit to update the surface #This function creates our Clicker object class Clicker(pygame.sprite.Sprite): def __init__(self): pygame.sprite.Sprite.__init__(self) self.image = pygame.transform.scale(clicker_img, (300, 100)) self.image.set_colorkey((0, 0, 0)) #Create image rect here self.rect = self.image.get_rect() #Position image rect using centerx and bottom here #This function sets up our Store object where #x = the x Position #y = the y Position #cost = the item cost #bonus = the bonus modifier #image is the image file class Store(pygame.sprite.Sprite): def __init__(self, x, y, cost, bonus, image): pygame.sprite.Sprite.__init__(self) self.image = pygame.transform.scale(image, (60, 60)) #Create store rect here #Position store rect using centerx and bottom here #Set item cost and bonus here #Create list of all_sprites here using Group() #Create an instance of Clicker here and add it to all_sprites #Create list of store_sprites here using Group() #This code creates two item instances and adds them to store_sprites and all_sprites store1 = Store(40, 65, 50, 1, store1_img) store_sprites.add(store1) all_sprites.add(store1) store2 = Store(40, 125, 500, 10, store1_img) store_sprites.add(store2) all_sprites.add(store2) #This code starts the main game loop running = True while running: #Set the FPS using clock.tick here #This loop checks to see what event has been triggered for event in pygame.event.get(): #Use the following if statement to check to see if the window is closed and stop the game if event.type == #Use the following if statment to check to see if the click event happens if event.type == #If the click does happen get its position pos = pygame.mouse.get_pos() #Check to see if the click was on the clicker if c.rect.collidepoint(pos): #Write code to say what happens when the clicker is clicked #Check to see if any store sprites are clicked for s in store_sprites: if s.rect.collidepoint(pos): #Write code to say what happens if store item is clicked screen.fill((154, 0, 250)) #Use blit and draw to update the screen #The following 5 lines update text on screen draw_text(screen, "Score: " + str(clicks), 32, WIDTH / 2, HEIGHT - 80) draw_text(screen, "+" + str(click_amount), 28, WIDTH / 2, HEIGHT - 40) draw_text(screen, "Cost: " + str(store1.cost) + ", Bonus: +1 per click", 18, 235, 30) draw_text(screen, "Cost: " + str(store2.cost) + ", Bonus: +10 per click", 18, 247, 85) #Use flip() to update screen fully #Quit PyGame
The Code Explained
Commenting is a way for programmers to explain what lines of code do without being part of the code themselves. Think of it like opening a book and seeing scribbled notes in the margins!
To create a comment in Python, use the hashtag # symbol.
📝 Quick Guide!
The template below is almost fully completed. Copy and paste this into Repl.it or VS Code and keep reading below. If you’re having trouble with the next steps, come back to this template and use it to fix your code.
#Add import statements here
import pygame
from os import path
#This code sets up our img directory for easy access
img_dir = path.join(path.dirname(__file__), 'img')
#Set screen WIDTH and HEIGHT here
WIDTH = 800
HEIGHT = 600
#Initialize PyGame here
pygame.init()
#This code sets up the screen and gives the game a title
screen = pygame.display.set_mode((WIDTH, HEIGHT))
pygame.display.set_caption('PUT TITLE HERE')
#Start Clock
clock = pygame.time.Clock()
#Set Starting clicks
clicks = 0
#Set starting click amount
click_amount = 1
#This code makes selecting our font easier
fn = pygame.font.match_font("dejavusansmono")
#This code loads our background image
background = pygame.image.load(path.join(img_dir, 'INSERT FILENAME 1')).convert()
#Write code to scale background to correct size
background = pygame.transform.scale(background, (800, 600))
#Create BG Rect
bg_rect = background.get_rect()
#This code loads the image we will be clicking
clicker_img = pygame.image.load(path.join(img_dir, 'INSERT FILENAME 2')).convert()
#This code loads the image for our store item
store1_img = pygame.image.load(path.join(img_dir, 'INSERT FILENAME 3')).convert()
#This function helps to draw the text on screen
def draw_text(surf, text, size, x, y):
#Set the font here
font = pygame.font.Font(fn, size)
#Set the text surface here
text_surface = font.render(text, True, (255, 255, 255))
#Create a text rect here
(0, 0, 0) # creates black
(255, 255, 255) # creates white
text_rect = text_surface.get_rect()
text_rect.midtop = (x, y)
#Use blit to update the surface
surf.blit(text_surface, text_rect)
#This function creates our Clicker object
class Clicker(pygame.sprite.Sprite):
def __init__(self):
pygame.sprite.Sprite.__init__(self)
self.image = pygame.transform.scale(clicker_img, (300, 300))
self.image.set_colorkey((0, 0, 0))
#Create image rect here
self.rect = self.image.get_rect()
#Position image rect using centerx and bottom here
self.rect.centerx = int(WIDTH / 2)
self.rect.centery = int(HEIGHT / 2)
#This function sets up our Store object where
image = pygame.transform.scale(clicker_img, (300, 300))
#x = the x Position
#y = the y Position
#cost = the item cost
#bonus = the bonus modifier
#image is the image file
class Store(pygame.sprite.Sprite):
def __init__(self, x, y, cost, bonus, image):
pygame.sprite.Sprite.__init__(self)
self.image = pygame.transform.scale(image, (60, 60))
#Create store rect here
self.rect = self.image.get_rect()
#Position store rect using centerx and bottom here
self.centerx = x
self.rect.bottom = y
#Set item cost and bonus here
self.cost = cost
self.bonus = bonus
#Create list of all_sprites here using Group()
all_sprites = pygame.sprite.Group()
#Create an instance of Clicker here and add it to all_sprites
c = Clicker()
all_sprites.add(c)
#Create list of store_sprites here using Group()
store_sprites = pygame.sprite.Group()
#This code creates two item instances and adds them to store_sprites and all_sprites
store1 = Store(40, 65, 50, 1, store1_img)
store_sprites.add(store1)
all_sprites.add(store1)
store2 = Store(40, 125, 500, 10, store1_img)
store_sprites.add(store2)
all_sprites.add(store2)
#This code starts the main game loop
running = True
while running:
#Set the FPS using clock.tick here
clock.tick(60)
#This loop checks to see what event has been triggered
for event in pygame.event.get():
#Use the following if statement to check to see if the window is closed and stop the game
if event.type == pygame.QUIT:
running = False
#Use the following if statment to check to see if the click event happens
if event.type == pygame.MOUSEBUTTONDOWN:
#If the click does happen get its position
pos = pygame.mouse.get_pos()
#Check to see if the click was on the clicker
if c.rect.collidepoint(pos):
#Write code to say what happens when the clicker is clicked
clicks += click_amount
#Check to see if any store sprites are clicked
for s in store_sprites:
if s.rect.collidepoint(pos):
#Write code to say what happens if store item is clicked
if clicks >= s.cost:
clicks -= s.cost
click_amount += s.bonus
s.cost = int(s.cost * 1.75)
screen.fill((154, 0, 250))
#Use blit and draw to update the screen
screen.blit(background, bg_rect)
all_sprites.draw(screen)
#The following 5 lines update text on screen
draw_text(screen, "Score: " + str(clicks), 32, WIDTH / 2, HEIGHT - 80)
draw_text(screen, "+" + str(click_amount), 28, WIDTH / 2, HEIGHT - 40)
draw_text(screen, "Cost: " + str(store1.cost) + ", Bonus: +1 per click", 18, 235, 30)
draw_text(screen, "Cost: " + str(store2.cost) + ", Bonus: +10 per click", 18, 247, 85)
#Use flip() to update screen fully
pygame.display.flip()
#Quit PyGame
pygame.quit()
Using the Quick Guide
When you copy and paste this code, make changes to the following lines:
🌟 If you’d like to change the title of your game, replace the words PUT TITLE HERE in this string between the quotation marks.
pygame.display.set_caption('PUT TITLE HERE')
🌟 Making a cookie clicker means we need to find a picture of a cookie to be clicked, as well as a background and the store items, like this example below:
Once you’ve found and uploaded all your images, replace all instances of INSERT FILENAME #
background = pygame.image.load(path.join(img_dir, 'INSERT FILENAME 1')).convert()
clicker_img = pygame.image.load(path.join(img_dir, 'INSERT FILENAME 2')).convert()
store1_img = pygame.image.load(path.join(img_dir, 'INSERT FILENAME 3')).convert()
Watch the video below for a quick guide to uploading images from our sprite library: