Whether you're looking to learn fundamental p5.js concepts or build classic arcade games, these new tutorials have you covered. From essential building blocks to complete game projects, there's something for everyone.

What's New?​

🎯 Common Elements Reference​

The Common Elements section is a comprehensive reference guide covering the most frequently used p5.js features in game development. Think of it as your quick-lookup handbook!

What's included:

• Mouse & Click - Detecting clicks, tracking mouse position, and creating interactive elements
• Keyboard Input - Responding to key presses and creating controls
• Images & Sprites - Loading and displaying images for your games
• Colors & Shapes - Drawing and styling visual elements
• Text & Fonts - Displaying text and custom fonts
• Sound Effects - Adding audio to enhance your games
• Collision Detection - Detecting when objects overlap or touch
• Random & Noise - Creating randomness and natural variation
• Saving & Loading Data - Storing progress and game state

These aren't full tutorials—they're quick reference guides you can use while building your own projects. Perfect for looking up syntax, finding examples, or learning best practices!

Explore Common Elements →

🏓 Pong Tutorial​

Build the legendary arcade classic! Create a two-player tennis-style game with paddles, a bouncing ball, and score tracking.

What you'll learn:

• Game physics and velocity
• Collision detection between objects
• Two-player input handling (W/S keys and arrow keys)
• Score systems and win conditions
• Game restart functionality

Tutorial includes:

• 7 progressive steps from setup to polished game
• Paddle movement with boundary checking
• Realistic ball physics and bouncing
• Complete scoring system
• Game over detection

Start Pong Tutorial →

❌⭕ Tic Tac Toe Tutorial​

Create the classic strategy game where two players compete to get three in a row!

What you'll learn:

• Grid-based game boards
• Click detection and player turns
• Game state management
• Win condition checking (rows, columns, diagonals)
• Draw detection

Tutorial includes:

• 5 step-by-step lessons
• Interactive grid system
• Turn-based gameplay
• Complete win detection logic
• Visual feedback for moves

Start Tic Tac Toe Tutorial →

🃏 Matching Game Tutorial​

Build a memory card-matching game! Flip cards to find matching pairs in this engaging puzzle game.

What you'll learn:

• Card state management (hidden, revealed, matched)
• Array manipulation and shuffling
• Click detection on grid items
• Pair matching logic
• Animation timing and delays

Tutorial includes:

• 4 detailed steps
• Card flipping mechanics
• Matching pair detection
• Complete game logic
• Timer and move counter ideas

Start Matching Game Tutorial →

This is Just the Beginning!​

These new tutorials are part of my ongoing commitment to help you learn game development with p5.js. Each tutorial teaches different concepts and techniques that you can mix and match in your own projects.

More tutorials are on the way! I'm already working on additional games and concepts to add to this collection. Future tutorials will cover:

• Advanced game mechanics
• More arcade classics
• Creative coding projects
• Multiplayer concepts
• And much more!

How to Use These Resources​

Here's my recommended approach:

1. Start with the basics - If you're new, check out the intro tutorial first
2. Reference as needed - Use the Common Elements guides while building
3. Pick a project - Choose Pong, Tic Tac Toe, or Matching based on what interests you
4. Build and experiment - Follow the steps, but don't be afraid to customize and explore
5. Combine concepts - Mix techniques from different tutorials to create something unique

Learning Tips​

To get the most out of these tutorials:

• Type, don't copy - Typing code helps build muscle memory and understanding
• Test frequently - Run your code after adding each section
• Experiment often - Change values, break things, fix them—that's how you learn!
• Start simple - Complete the basic version first, then add your own features
• Have patience - Everyone makes mistakes. Debugging is part of learning!

What Makes These Different?​

Like all tutorials on this site, these new additions feature:

• No prerequisites beyond basics - Start with minimal p5.js knowledge
• Detailed explanations - Understand why code works, not just what it does
• Progressive structure - Build complexity gradually with each step
• Complete code provided - Reference when needed, but try typing first
• Customization suggestions - Ideas for making each project your own

Quick Links​

Jump right in:

• 🎯 Common Elements Reference
• 🏓 Pong Tutorial
• ❌⭕ Tic Tac Toe Tutorial
• 🃏 Matching Game Tutorial

Or review the original tutorials:

• 🍪 Cookie Clicker Tutorial
• 🐛 Worm Tutorial

Feedback Welcome!​

I'm always looking to improve and expand these tutorials. If you have:

• Questions about any tutorial
• Suggestions for new games or topics
• Ideas for improvements
• Bugs or issues to report

Feel free to reach out through my website!

Let's Keep Building!​

Game development is an incredible journey. With six complete tutorials and a comprehensive reference guide, you now have plenty of material to learn from and build upon.

Remember: every expert was once a beginner. Start small, experiment often, and most importantly—have fun creating! 🎮

Ready to try something new? Pick a tutorial and start building!

Happy coding!
Colby

New tutorials:

• Common Elements Reference →
• Pong Tutorial →
• Tic Tac Toe Tutorial →
• Matching Game Tutorial →

I'm excited to launch this documentation site with our first two complete game tutorials. Whether you're a beginner just learning to code or looking to build your first games, these step-by-step guides will help you create fun, playable games from scratch.

What is This Site?​

Custom P5.js Docs provides beginner-friendly, step-by-step tutorials for building games using p5.js. Each tutorial is designed to teach fundamental game development concepts while creating something fun and interactive.

Why I Created This​

I originally built this site to help my classmates with our class project. We were all learning to create games with p5.js, and I noticed many of us were struggling with the same concepts. The official p5.js documentation is great for reference, but it doesn't provide step-by-step guidance for building complete games.

So I decided to create detailed tutorials that explain not just what the code does, but why it works that way. What started as notes for my class has grown into a full documentation site that I hope will help many more beginners learn game development!

First Release: Two Complete Game Tutorials! 🚀​

I'm launching with two complete game tutorials, each broken down into easy-to-follow steps with detailed explanations of every line of code.

🍪 Cookie Clicker Tutorial​

Build an idle clicker game where players click a cookie to earn points and buy auto-clickers that generate cookies automatically!

What you'll learn:

• Mouse click detection
• Animation and visual effects (bouncing, floating text, particles)
• Upgrade systems with exponential cost scaling
• Button interactions and hover effects
• Score tracking and game economy

Tutorial includes:

• 5 progressive steps from basic setup to polished game
• Complete working code you can customize
• Visual feedback systems
• Milestone celebrations

Start Cookie Clicker Tutorial →

🐛 Worm Tutorial​

Create the classic arcade game where a worm moves around the screen, eats food to grow, and must avoid hitting walls or itself!

What you'll learn:

• Grid-based movement systems
• Keyboard controls (arrow keys)
• Arrays and data structures
• Collision detection (walls and self-collision)
• Game over and restart systems
• Random food placement

Tutorial includes:

• 5 step-by-step lessons
• Complete collision detection logic
• Game state management
• Restart functionality

Start Worm Tutorial →

Tutorial Philosophy 💡​

These tutorials are designed with a specific approach:

Detailed Explanations​

Every code section includes "Breaking it down" explanations. You won't just copy code - you'll understand why it works and how to modify it.

Progressive Learning​

Each step builds on the previous one. Start with the basics and gradually add features, seeing your game grow with each step.

Starting Points, Not Endpoints​

These are basic tutorials meant to teach fundamentals. Once you complete them, use what you've learned as a foundation to:

• Add your own features
• Change the visuals
• Create something completely new
• Combine concepts from multiple tutorials

Type, Don't Copy​

For best learning results, type the code yourself instead of copy-pasting. This helps build muscle memory and deeper understanding.

What Makes These Tutorials Different?​

• No prior experience needed - Start from zero
• Every line explained - Understand what each part does
• Visual examples - See concepts illustrated
• Complete code provided - Reference when you need it
• Customization ideas - Suggestions for making it your own
• "What You Learned" summaries - Reinforce key concepts

Getting Started​

Ready to build your first game? Here's how:

1. No installation needed - Just open https://editor.p5js.org/
2. Pick a tutorial - Choose Cookie Clicker or Worm
3. Follow along - Work through each step at your own pace
4. Experiment - Change values, add features, break things and fix them
5. Share - Show off your creation!

What's Next?​

This is just the beginning! I plan to add more game tutorials covering different concepts:

• Platformer games
• Puzzle games
• Arcade classics
• Drawing and art tools
• And more!

Each new tutorial will teach different programming concepts and game development techniques.

Feedback Welcome!​

This site is designed to help you learn. If you have:

• Questions about the tutorials
• Suggestions for new games to cover
• Ideas for improvements
• Bugs or issues to report

I'd love to hear from you! Check out my website to contact me.

Let's Build Something!​

Game development is incredibly rewarding. There's nothing quite like seeing something you created come to life on screen and actually being able to play it.

Don't worry about making mistakes - that's how we learn. Start small, experiment often, and most importantly, have fun!

Ready to create your first game? Pick a tutorial and let's get started! 🎮

Happy coding!
Colby

Check out the tutorials:

• Cookie Clicker Tutorial →
• Worm Tutorial →