Common P5.js Elements
This section provides reference guides for the most commonly needed elements in p5.js game development. Each guide includes clear examples, explanations, and practical usage tips.
What's Covered
These guides focus on the essential building blocks you'll use in almost every game:
🖱️ Input & Interaction
- Mouse & Click - Detecting clicks, mouse position, and hover effects
- Keyboard - Responding to key presses and creating controls
🎨 Visual Elements
- Images & Sprites - Loading and displaying images
- Colors & Shapes - Drawing and styling visual elements
- Text & Fonts - Displaying text and custom fonts
🔊 Audio
- Sound Effects - Adding audio to your games
🎯 Game Mechanics
- Collision Detection - Detecting when objects overlap
- Random & Noise - Creating randomness and variation
- Saving & Loading Data - Storing progress so players can return later
How to Use These Guides
These are reference pages, not full tutorials. Use them to:
- Look up syntax and examples quickly
- Understand how specific features work
- Copy code snippets into your projects
- Learn best practices for common tasks
Quick Reference Format
Each guide includes:
- Basic usage - Simple examples to get started
- Common patterns - How it's typically used in games
- Code examples - Copy-paste ready snippets
- Tips & tricks - Best practices and gotchas
- Related functions - Connected p5.js features
Using with Tutorials
These reference guides complement the full tutorials:
- Start with a tutorial (Cookie Clicker or Worm)
- Reference these guides when you need specific features
- Combine techniques to create your own unique games
p5.js Web Editor
All examples work in the p5.js Web Editor at https://editor.p5js.org/
Ready to explore? Pick a topic from the sidebar! 👈