Step 1: Basic Setup

Let's build the foundation for our cookie clicker game. We'll create the canvas, set up our cookie, and display the score.

Global Variables

First, declare your variables at the top of your sketch (outside any functions):

let score = 0;

What this does:

• score - Tracks how many times the player has clicked the cookie
• We initialize it to 0 because the player starts with no points
• It's declared with let at the top so we can access it in both setup() and draw()

The setup() Function

The setup() function runs once when your program starts. This is where we create the canvas:

function setup() {
  createCanvas(800, 600);
}

Breaking it down:

• createCanvas(800, 600) - Creates an 800 pixel wide by 600 pixel tall canvas
• This only runs once, so the canvas size stays the same throughout the game
• You can adjust these numbers to make your game bigger or smaller

The draw() Function

The draw() function runs continuously (about 60 times per second by default), creating the animation loop:

function draw() {
  background(240);
  
  // Draw the cookie
  fill('#D2691E');
  circle(width/2, height/2, 150);
  
  // Display score
  fill(0);
  textSize(32);
  textAlign(CENTER);
  text('Score: ' + score, width/2, 50);
}

Breaking it down:

Background

background(240);

• Sets the background to light gray (240 is a grayscale value where 0=black, 255=white)
• This clears the canvas each frame, preventing trails from previous frames

Drawing the Cookie

fill('#D2691E');
circle(width/2, height/2, 150);

• fill('#D2691E') - Sets the color to a brown/tan color (like a cookie!)
• circle(width/2, height/2, 150) - Draws a circle at:
  • X position: width/2 (horizontal center of the canvas)
  • Y position: height/2 (vertical center of the canvas)
  • Diameter: 150 pixels

tip

width and height are special p5.js variables that always hold the canvas dimensions. Using width/2 and height/2 centers things automatically, even if you change your canvas size!

Displaying the Score

fill(0);
textSize(32);
textAlign(CENTER);
text('Score: ' + score, width/2, 50);

• fill(0) - Sets the text color to black
• textSize(32) - Makes the text 32 pixels tall
• textAlign(CENTER) - Centers the text horizontally at the given position
• text('Score: ' + score, width/2, 50) - Displays the text:
  • 'Score: ' + score combines the word "Score: " with the current score value
  • width/2 positions it at the horizontal center
  • 50 positions it 50 pixels from the top

Complete Code

Here's everything together:

let score = 0;

function setup() {
  createCanvas(800, 600);
}

function draw() {
  background(240);
  
  // Draw the cookie
  fill('#D2691E');
  circle(width/2, height/2, 150);
  
  // Display score
  fill(0);
  textSize(32);
  textAlign(CENTER);
  text('Score: ' + score, width/2, 50);
}

Test It Out!

Run this code in the p5.js Web Editor. You should see:

• ✅ A gray background
• ✅ A brown circle in the center (your cookie!)
• ✅ "Score: 0" displayed at the top

Right now, the score won't change when you click - we'll add that functionality in the next step!

What You Learned

• How to declare global variables that persist across frames
• The difference between setup() (runs once) and draw() (runs continuously)
• How to draw shapes and text in p5.js
• How to position elements using width and height
• How to combine text with variables using +