Lesson 5 of 5 — Final Lesson! 🎉

🎮 Functions & Your First Game

Put it all together to build a complete, playable game!

🏁 The Finish Line

You've learned so much! Drawing, animation, conditionals, loops... Now let's combine everything to build a real game.

But first, one more powerful tool: functions.

A function is a named block of code you can use over and over. You've already used functions like circle()!

function drawStar(x, y, size) {
  // Code to draw a star at x, y with given size
}

// Use it:
drawStar(100, 100, 50);
drawStar(200, 150, 30);

p5.js gives you the mouse position automatically:

function mousePressed() {
  // Runs when clicked
}

To know if two objects touch, we calculate the distance between them. p5.js has a dist() function!

let d = dist(x1, y1, x2, y2);

// If distance is less than the sum of radii, they're touching!
if (d < radius1 + radius2) {
  // Collision!
}

Use a variable to track the score and text() to display it.

Let's build a complete game where you catch falling objects with a paddle!

Here's the full game with multiple falling objects, lives, and game over! Study this code — you wrote everything in it!

Congratulations! You've completed all 5 lessons and built a real game! Here are some ideas to keep learning:

🏆

You completed all 5 coding lessons!

You are now a JavaScript Game Developer