Cookie Clicker | Custom P5.js Docs

📄️ Getting Started

What is This Tutorial?

📄️ 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.

📄️ Step 2 - Add Click Detection

Now let's make the cookie interactive! We'll detect when the player clicks on it and increase the score.

📄️ Step 3 - Add Visual Feedback

Let's make the game more satisfying by adding floating "+1" text that appears when you click the cookie!

📄️ Step 4 - Add AutoClickers

Now let's add a way to earn cookies automatically! Players can buy "auto-clickers" that generate cookies every second, creating an idle game mechanic.

📄️ Step 5 - Add Upgrades

Let's expand the upgrade system! Instead of just auto-clickers, we'll add multiple types of upgrades that enhance your clicking power or generate cookies in different ways.

📄️ Step 6 - Polish

Let's add the final touches to make our game look and feel amazing! We'll add particles, improve visuals, and display helpful stats.

📄️ Complete Code

Here's the complete working code with all features including the upgrades system. Copy this into your p5.js Web Editor at https://editor.p5js.org/

📄️ Using Cookie Images

Instead of drawing the cookie as a brown circle with an emoji, you can use an actual cookie image file. This guide shows you how to load and display images in p5.js!