A standalone reference for every concept used across the 50-game tutorial series. Each concept has its own page with explanation, visual examples, code snippets, and links to the games where it's applied.
Use this as: a companion to the tutorials, a revision guide, or standalone learning material for your YouTube series.
| # | Concept | File | First Used In |
|---|---|---|---|
| C1 | Canvas Setup & Sizing | Element, context, DPR, resize | Game 1: Reaction Timer |
| C2 | Shapes & Paths | Rectangles, lines, custom polygons | Game 1: Reaction Timer |
| C3 | Circles & Arcs | Full circles, partial arcs, pie slices | Game 11: Pong |
| C4 | Colors & Gradients | Solid, hex, rgba, linear/radial gradients | Game 1: Reaction Timer |
| C5 | Text Rendering | Fonts, alignment, measurement | Game 1: Reaction Timer |
| C6 | Transforms | translate, rotate, scale, save/restore | Game 22: Asteroids |
| C7 | Transparency & Compositing | globalAlpha, composite operations | Game 23: Pac-Man |
| C8 | Shadows & Glow | shadowColor, shadowBlur | Game 2: Lights Out |
| C9 | Clipping | clip() with paths | Game 8: Whack-a-Mole |
| C10 | Image Data (Pixels) | createImageData, putImageData | Game 39: Particle Sand |
| C11 | Rounded Rectangles | roundRect() method | Game 3: Memory Match |
| C12 | Animation Loop | requestAnimationFrame, delta time | Every game |
| C13 | Coordinate Systems | Mouse-to-canvas mapping, grid cells | Game 2: Lights Out |
| C14 | Layered Rendering | Painter's algorithm, draw order | Game 47: Tower Defense |
| C15 | Responsive Canvas | Resize, aspect ratio, scaling | Every game |
| # | Concept | File | First Used In |
|---|---|---|---|
| M1 | Trigonometry (sin, cos, atan2) | Angles, rotation, direction vectors | Game 22: Asteroids |
| M2 | Vector Math | Add, subtract, normalize, dot product, magnitude | Game 11: Pong |
| M3 | Distance & Pythagorean Theorem | Circle collision, range checking | Game 9: Balloon Pop |
| M4 | Linear Interpolation (Lerp) | Smooth animation, camera follow, easing | Game 3: Memory Match |
| M5 | Parametric Equations | Trajectory preview, arc simulation | Game 16: Basketball |
| M6 | Angle Reflection | Ball bounce off surfaces | Game 11: Pong |
| M7 | Modular Arithmetic | Rotation states, wrapping values | Game 24: Tetris |
| M8 | Quadratic Formula | Line-circle intersection | Game 25: Fruit Ninja |
| M9 | Probability & Weighted Random | Rarity systems, spawn weights | Game 48: Fishing |
| M10 | Matrix Rotation | Piece rotation with offset tables | Game 24: Tetris |
| M11 | Exponential Growth | Cost scaling, difficulty curves | Game 49: Idle Clicker |
| M12 | Sine Wave Oscillation | Bobbing, pulsing, wave surfaces | Game 13: Flappy Bird |
| # | Concept | File | First Used In |
|---|---|---|---|
| A1 | Flood Fill (BFS/DFS) | Reveal areas, fill tool, flow | Game 30: Minesweeper |
| A2 | Minimax with Alpha-Beta Pruning | Unbeatable game AI | Game 4: Tic-Tac-Toe |
| A3 | Backtracking | Puzzle generation, constraint solving | Game 31: Sudoku |
| A4 | Maze Generation (Recursive Backtracker) | Perfect maze creation | Game 34: Maze Runner |
| A5 | Fisher-Yates Shuffle | Fair randomization | Game 3: Memory Match |
| A6 | AABB Collision Detection | Rectangle overlap testing | Game 12: Breakout |
| A7 | Circle-Rectangle Collision | Ball vs brick, ball vs rim | Game 12: Breakout |
| A8 | Circle-Circle Collision | Ship vs asteroid, click vs balloon | Game 22: Asteroids |
| A9 | Line-Segment Intersection | Slice detection, wall collision | Game 25: Fruit Ninja |
| A10 | Greedy Pathfinding | Ghost AI at intersections | Game 23: Pac-Man |
| A11 | Cellular Automata | Sand/water/fire simulation | Game 39: Particle Sand |
| A12 | State Machines | Game phases, entity behavior | Every game |
| A13 | Delta-Time Game Loop | Frame-rate independent physics | Every game |
| A14 | Weighted Random Selection | Rarity systems, type distribution | Game 48: Fishing |
| A15 | Stack & Queue Data Structures | Undo system, spawn scheduling | Game 29: Sokoban |
| # | Concept | File | First Used In |
|---|---|---|---|
| D1 | SOLID Principles Overview | Code organization | All games |
| D2 | Adapter Pattern | Platform bridge | All games |
| D3 | Observer / Callback Pattern | Event-driven input | All games |
| D4 | State Pattern | Phase-based behavior | Game 23: Pac-Man |
| D5 | Factory Pattern | State creation, level building | Game 31: Sudoku |
| D6 | Strategy Pattern | Interchangeable AI behaviors | Game 23: Pac-Man |
| D7 | Component / ECS Pattern | Systems + Renderers separation | All games |
| D8 | Registry Pattern | Central game collection | Platform |
| D9 | Template Method Pattern | Fixed loop, varying systems | All engines |
| # | Concept | File | First Used In |
|---|---|---|---|
| P1 | Gravity (Constant Acceleration) | Objects fall | Game 13: Flappy Bird |
| P2 | Velocity & Acceleration | Movement basics | Game 10: Snake |
| P3 | Friction & Drag | Deceleration | Game 17: Golf |
| P4 | Momentum & Inertia | Objects keep moving | Game 22: Asteroids |
| P5 | Elastic Collision (Bounce) | Velocity reflection | Game 11: Pong |
| P6 | Terminal Velocity | Max fall speed | Game 13: Flappy Bird |
| P7 | Screen Wrapping | Teleport to opposite edge | Game 22: Asteroids |
| P8 | One-Way Platforms | Collide only when falling | Game 15: Doodle Jump |
| P9 | Projectile Motion | Parabolic arc | Game 16: Basketball |
| # | Concept | File | First Used In |
|---|---|---|---|
| G1 | Wave / Spawn System | Timed enemy spawning | Game 47: Tower Defense |
| G2 | Economy System | Earn/spend currency | Game 47: Tower Defense |
| G3 | Combo System | Consecutive hit multiplier | Game 8: Whack-a-Mole |
| G4 | Level Progression | Advance to harder content | Game 12: Breakout |
| G5 | Camera System | Viewport follows player | Game 41: Platformer |
| G6 | Particle System | Visual effects | Game 22: Asteroids |
| G7 | Day/Night Cycle | Time-based phases | Game 44: Zombie Survival |
| G8 | Fog of War | Limited visibility | Game 34: Maze Runner |
| G9 | Pheromone / Trail System | Emergent pathfinding | Game 46: Ant Colony |
| G10 | DAS (Delayed Auto Shift) | Held-key repeat input | Game 24: Tetris |
| # | Concept | File | First Used In |
|---|---|---|---|
| E1 | Event Listener Lifecycle | Attach/detach, prevent leaks | Every game |
| E2 | requestAnimationFrame Loop | 60fps rendering | Every game |
| E3 | localStorage Persistence | Save data across sessions | Game 1: Reaction Timer |
| E4 | Path Aliases (TypeScript) | Clean imports | Project-wide |
| E5 | Module Bundling (Vite) | Dev server, production build | Project setup |
| E6 | Canvas API Essentials | Drawing, transforms, text | Game 1: Reaction Timer |
- Before a tutorial — Read the concept pages listed in that game's "Concepts" section
- During a tutorial — Click concept links when you need a deeper explanation
- For revision — Browse by category to refresh your knowledge
- For YouTube — Each concept page can be a standalone explainer episode
Each concept file follows this structure:
# Concept Name
## What Is It?
Plain-English explanation with real-world analogy.
## The Math / The Algorithm / The Pattern
Formal definition with formulas or pseudocode.
## Visual Example
ASCII diagram or step-by-step walkthrough.
## Code Example
Minimal TypeScript snippet demonstrating the concept.
## Used In These Games
Links to tutorials where this concept appears.
## Common Pitfalls
Mistakes beginners make and how to avoid them.
## Further Reading
Optional links to deeper resources.