Skip to main content

Getting Started

What is This Tutorial?​

This is a beginner-friendly, step-by-step tutorial that teaches you how to build a Cookie Clicker game using p5.js. You'll learn fundamental game development concepts including:

  • User interaction and mouse input
  • Animation and visual effects
  • Game economy and upgrade systems
  • Particle effects and visual feedback
  • Score tracking and progression

By the end of this tutorial, you'll have a fully functional idle clicker game that you can play, share, and customize!

Important Note

This is a basic introductory tutorial. It's designed to teach core concepts and give you a foundation to build upon. Once you complete it, you should use what you've learned as a starting point for your own projects. Experiment, add features, and make it your own!

How to Use This Tutorial​

Tutorial Structure​

This tutorial is divided into 5 progressive steps:

  1. Basic Setup - Create the canvas and display the cookie
  2. Click Detection - Make the cookie interactive
  3. Visual Feedback - Add floating text effects
  4. Auto-Clickers - Implement an upgrade system
  5. Polish - Add particles and final touches

Learning Approach​

  • Follow along in order - Each step builds on the previous one
  • Type the code yourself - Don't just copy/paste; you'll learn better by typing
  • Experiment - Try changing values and see what happens
  • Read the explanations - Each code section has detailed breakdowns
  • Test frequently - Run your code after each step to see progress

Getting Help​

  • Each step includes "Breaking it down" sections that explain the code
  • Look for 💡 tips and ℹ️ info boxes for extra guidance
  • The complete final code is available in the "Complete Code" section

Knowledge Requirements​

Essential Skills​

  • Basic JavaScript: Understanding of variables, functions, conditionals, and loops

Helpful (But Not Required)​

  • p5.js Fundamentals: Familiarity with setup(), draw(), and basic drawing functions
  • Events: Basic understanding of mouse interactions in p5.js
  • Object-oriented programming concepts
  • Arrays and array manipulation
  • Basic game development concepts

Coding Environment​

Using the p5.js Web Editor​

We'll be using the p5.js Web Editor for this tutorial, which you can access at: 🔗 https://editor.p5js.org/

Why the Web Editor?​

  • No installation required - code directly in your browser
  • Instant preview of your sketch
  • Easy sharing and saving of projects
  • Built-in p5.js library
  • Great for learning and prototyping

Getting Started with the Editor​

  1. Navigate to https://editor.p5js.org/
  2. You'll see a default sketch with setup() and draw() functions
  3. Click the ▶️ Play button to run your sketch
  4. Changes are reflected in real-time
tip

Make a free account to save your projects! Click "Sign Up" in the top right corner.

Verify p5.js is Working​

The p5.js Web Editor comes with p5.js already loaded, so you're ready to start coding immediately!

Test Your Setup​

Add this simple test to your sketch:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  fill(255, 0, 0);
  circle(200, 200, 100);
}

If you see a red circle in the center of a gray canvas, everything is working correctly! ✅

Optional: Keyboard Shortcuts​

Useful shortcuts in the p5.js Web Editor:

  • Cmd/Ctrl + Enter: Run your sketch
  • Cmd/Ctrl + S: Save your project (if logged in)
  • Cmd/Ctrl + ]: Auto-indent code
  • Cmd/Ctrl + /: Toggle comment

What's Next?​

Once you have:

  • ✅ Basic JavaScript and p5.js knowledge
  • ✅ The p5.js Web Editor open (https://editor.p5js.org/)
  • ✅ Verified that your sketch runs

You're ready to start building your Cookie Clicker game! 🍪

Head to the next section to begin coding.