Click the falling circles to score. Fix a catch that works backwards, add lives and a game over, then add a power-up of your own.
Everything you have learned in one game: a list of objects, a loop, a function, a decision, and a click.
Your game has falling circles. When you click one, you score and it starts again at the top. If one reaches the bottom, it starts again too.
Two new ideas:
mousePressed() each time the mouse is clicked, and keyPressed() each time a key is pressed. You never call them yourself.+: "Score: " + score.The hard part is "close". Two things touch when the distance between them is small: dist(...) < 20. It is easy to write > and have the game score for every click that misses.
Make your prediction first. Help opens once you've locked it in.
function setup() {
console.log(dist(10, 10, 13, 14));
}
dist gives the straight distance between two points.
Click the circles before they fall off the bottom.
let balls = [];
let score = 0;
function setup() {
createCanvas(300, 200);
for (let i = 0; i < 4; i++) {
balls.push({ x: random(20, 280), y: random(-100, 0), speed: random(1, 2.5) });
}
}
function draw() {
background(20, 30, 60);
fill(255, 210, 0);
for (let ball of balls) {
circle(ball.x, ball.y, 24);
ball.y = ball.y + ball.speed;
if (ball.y > 210) {
restart(ball);
}
}
fill(255);
text("Score: " + score, 10, 20);
}
function restart(ball) {
ball.x = random(20, 280);
ball.y = -10;
}
function mousePressed() {
for (let ball of balls) {
if (dist(mouseX, mouseY, ball.x, ball.y) < 20) {
score = score + 1;
restart(ball);
}
}
}
let balls = [];
let score = 0;
function setup() {
createCanvas(300, 200);
for (let i = 0; i < 4; i++) {
balls.push({ x: random(20, 280), y: random(-100, 0), speed: random(1, 2.5) });
}
}
function draw() {
background(20, 30, 60);
fill(255, 210, 0);
for (let ball of balls) {
circle(ball.x, ball.y, 24);
ball.y = ball.y + ball.speed;
if (ball.y > 210) {
restart(ball);
}
}
fill(255);
text("Score: " + score, 10, 20);
}
function restart(ball) {
ball.x = random(20, 280);
ball.y = -10;
}
function mousePressed() {
for (let ball of balls) {
if (dist(mouseX, mouseY, ball.x, ball.y) < 20) {
score = score + 1;
restart(ball);
}
}
}
Match code with meaning.
One place for it.
Every miss scores.
Match each piece with what it does.
In this game every click that misses scores. Click the line that is wrong.
Give the player 3 lives and a GAME OVER screen. Start from the game above.
Make let lives = 3; at the top. When a ball falls off the bottom, take one away.
In draw(), only move and draw the balls if (lives > 0); otherwise show GAME OVER with text().
Press R after GAME OVER to start again.
Add a keyPressed() function. p5 gives you key, the key that was pressed.
if (key === "r" && lives === 0) { score = 0; lives = 3; }
Add lives: lose one when a ball falls off the bottom, and show GAME OVER at zero.
Run your program. This ticks when your code does all of the above.
Press R to play again after the game is over.
Run your program. This ticks when your code does all of the above.
Add a power-up: a different kind of ball (fast, small, gold) that is worth more points. Give it a property such as gold: true, draw it in its own colour, and score more when it is clicked. Finish by asking a friend to play it and change one thing because of what you saw.
You have built a game from lists, objects, decisions, functions and events. That is a real programme: games bigger than this are the same pieces in more places.
Students play a click-to-catch game, learn that mousePressed runs on its own and that touching means a small distance, fix a catch that scores for every miss, add lives with a game over and a restart key, and make a power-up ball. About 60 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
Read the unit primer first. This is the Python Catch the turtle challenge in JavaScript, and it completes the course. Everything has been taught except events and joining text: mousePressed() and keyPressed() are functions p5 calls for you. Click coordinates are the sketch's mouseX and mouseY. The common slip is > where < belongs, so the bug task is a logic error with no red line: students must read the condition and play. The game needs the sketch to be clicked first for keys to work. This lesson marks "Challenge complete".
Close means a small distance. Play the buggy version and say what is happening before reading the code.
Stretch: Make the balls get faster as the score rises, or add a high score kept in a variable.
Support: Give the lives code and ask only for the restart key, or give the gold ball and ask for a second power-up.
Optional next lesson: moving art with sin, cos and map.