So, what are we building in Scratch?
The project this tutorial is based on
clicker-game
What you'll build
- Build a system where clicking makes cakes increase
- Implement click upgrade and auto baker upgrades
- Show a clear effect when the player reaches 1,000 cakes
#1Stage: Setting up the game
when clicked kicks things off when the green flag is clicked. This is the starting point for everything.
We switch the backdrop to "Party" with switch backdrop to ( ) to give it a shop-like vibe.
After that, set ( ) to ( ) sets "★Cakes" to 0 and "★Click Power" to 1. The trick is to wipe the numbers back to a clean slate every time the game starts.
#2Cake: Placing the cake
Start with when clicked, then switch to the "Cake-a" costume with switch costume to ( ). It's the plain, uneaten cake—this is the default look.
Place it near the center of the screen at (0, 30) with go to x: ( ) y: ( ). The size is a big, bold 150.
We deliberately gave it a large stance so it's easy to click. Since it's the star, it earns the right to stand out.
#3Cake: Showing the cake
clear graphic effects resets any effects left over from the last run. On top of that, go to ( ) layer brings it all the way to the front.
Then show displays it. The order of clearing effects before showing it quietly matters—skip it and leftover transparency from before can stick around.
#4Cake: Click to add more
when this sprite clicked catches the click, and change ( ) by ( ) increases "★Cakes" by the amount of "★Click Power." How much a single click adds is held in a variable.
The moment it goes up, start sound ( ) plays a coin sound and broadcast ( ) fires off the "Star Effect" signal.
The sound and the stars together create that "I clicked it!" feedback. That satisfying feel is the lifeblood of a clicker.
#5Cake: Click pop animation
First shrink the size down to 132, then repeat 6 times with repeat ( ), using change size by ( ) to grow it back little by little. It finishes by landing exactly back at 150.
Shrink it small, then gradually grow it back—this motion is what creates the feel of pressing it. It's only a few frames, but having it versus not makes a world of difference.
#6Stage: Setting up the prices
set ( ) to ( ) resets "★Auto Bakers" to 0. This is the starting value, so it begins at 0.
Next, set "★Upgrade Cost" to 10 and "★Auto Baker Cost" to 50.
The 10 and 50 we set here become the starting prices when you go shopping later. Finally, show variable ( ) puts "★Cakes" on the screen so the player can see it.
#7Stage: Showing the remaining numbers
show variable ( ) shows "★Click Power" and "★Auto Bakers." Now you can tell your current upgrade level at a glance.
When the numbers are visible, the player can think, "Which one should I upgrade next?" It's subtle, but it's an important part that supports a clicker's strategy.
#8Upgrade Button: Placing the upgrade button
Start with when clicked, then set its look to "Button1" with switch costume to ( ).
Place it at the bottom-left of the screen (-150, -130) with go to x: ( ) y: ( ). The size is 80, kept more modest than the cake.
The button is a supporting player, so we balance it to stand out less than the star cake. This lead-and-support relationship is subtle, but it really helps the screen stay easy to read.
#9Upgrade Button: Keep showing the price
After showing it with show, keep a loop running forever with forever, and the say ( ) inside keeps announcing the price.
The text it shows is built by joining "Upgrade" and "★Upgrade Cost" with join ( ) ( ). The price changes every time you buy, so we rebuild it every frame to keep it up to date.
#10Upgrade Button: Checking if you can buy
Using if ( ) thenelse, we split the behavior into two based on a condition. The condition combines not ( ) and ( ) < ( ) to express "★Cakes is not less than the price"—meaning "you have enough."
Using "not less than" to mean "greater than or equal to" is a neat little trick. Scratch has no "≥" block, so we flip "less than" around to build the same meaning.
#11Upgrade Button: Showing affordability visually
When you have enough, set ( ) effect to ( ) sets the "ghost" effect to 0, making it crisp and opaque. When you don't, the same effect goes to 50, making it half-transparent. Ghost 50 instantly conveys a "can't press this" feel, doesn't it?
Normally you'd handle a button's enabled/disabled state by preparing two costumes and switching between them. But this project pulls it off just by changing the ghost effect's number. Since you don't add extra costumes, it's easier to fix later too.
#12Upgrade Button: Buying the upgrade
when this sprite clicked catches the click, and if ( ) then checks "do you have enough?" one more time. Even if it looks half-transparent, whether you can actually buy is confirmed for real right here.
If the condition is met, change ( ) by ( ) reduces "★Cakes" by the price. Then it raises "★Click Power" by 1.
It's a simple trade: pay and get stronger. As these moves stack up, the weight of a single click keeps growing.
#13Upgrade Button: Raising the price
set ( ) to ( ) writes "★Upgrade Cost" back as the current price × 1.5. The key is rounding it to a whole number with round ( ). Finally, start sound ( ) plays a purchase sound and we're done.
#14Auto Baker Button: Placing the auto button
The flow is almost the same as the upgrade button. Start with when clicked, then set its look to "Button2-a" with switch costume to ( ).
Place it at the bottom-right of the screen (150, -130) with go to x: ( ) y: ( ), size 80.
We line it up symmetrically with the upgrade button on the left to keep the UI consistent. When two identical shapes sit side by side, the controls become predictable and less confusing.
#15Auto Baker Button: Keep showing the price
Show it with show, then inside a forever loop, use join ( ) ( ) to join "Auto Baker" and "★Auto Baker Cost" and keep announcing it.
What it's doing is exactly the same as the upgrade button. Being able to reuse the same mechanism on a different button is the strength of variables and loops.
#16Auto Baker Button: Checking if you can buy
Split the behavior with if ( ) thenelse, and use not ( ) and ( ) < ( ) to check "is ★Cakes greater than or equal to the price?" It's exactly the same idea as the upgrade button.
The only change is that what you compare against is now "★Auto Baker Cost." A check pattern you build once can be reused all over like this.
#17Auto Baker Button: Showing affordability visually
When you have enough, set ( ) effect to ( ) sets the "ghost" effect to 0; when you don't, it goes to 50. Same as the upgrade button—the strategy of showing on/off with the ghost effect.
Keeping the same look across both buttons means the player won't get confused. Once they learn "half-transparent = can't buy yet," it applies to either button.
#18Auto Baker Button: Buying an auto baker
when this sprite clicked catches the click, and if ( ) then does a final check on whether you have enough. If the condition is met, change ( ) by ( ) reduces "★Cakes" by the price and raises "★Auto Bakers" by 1.
Each additional auto baker increases the automatic production we'll build later by that much.
A single purchase is like an investment that keeps paying off. If the click upgrade is "working out," this feels like buying "passive income."
#19Auto Baker Button: Raising the price
set ( ) to ( ) sets "★Auto Baker Cost" to the current price × 1.6, and round ( ) rounds it to a whole number. Whereas the upgrade button was ×1.5, the auto baker is set to a slightly steeper ×1.6.
Because the auto baker, which grows cakes automatically, is more powerful, its price climbs a bit more sharply. This dial of the multiplier is the knob that decides the game's balance.
#20Stage: Growing cakes automatically
Start with when clicked, and put a 1-second wait with wait ( ) seconds inside a forever. The code below runs once every one of those seconds.
Only when "★Auto Bakers" is greater than 0, if ( ) then lets change ( ) by ( ) add that many cakes. Once per second, it grows by the number of autos—that's what automatic production really is.
The more autos you add, the bigger the per-second gain, so early investment slowly pays off later on. Cakes grow even when you leave it alone—that's the joy of a clicker.
#21Star Particle: Keeping the star hidden
As soon as it starts with when clicked, immediately hide it with hide. The strategy is to keep the star's original out of sight and only show the clones we'll make later.
Hide the original and only move the copies—that's the basic form of clone effects. If the original stays visible, an extra star gets left sitting alone on the screen.
#22Star Particle: Creating star clones
when I receive ( ) receives the "Star Effect" signal—the one that flies over when you click the cake. On receiving it, create clone of ( ) makes one copy of itself.
This signal flies over every time you click, so rapid-fire clicking makes more and more stars. Combining signals with clones makes it easy to write effects that "mass-produce something in response to an event."
#23Star Particle: The star's initial setup
when I start as a clone is the cue for a clone's birth. switch costume to ( ) sets its look to "Star," and go to x: ( ) y: ( ) sets where it appears.
The clever bit is using pick random ( ) to ( ) for these coordinates. By making x a random number from -70 to 70 and y from 40 to 110, the stars scatter to a slightly different spot each time. So even rapid clicking doesn't pile them up in the same place, and it looks lively.
#24Star Particle: The star floats up
First, set ( ) effect to ( ) resets the "ghost" effect to 0 to make it visible. From there, repeat 10 times with repeat ( ): change y by ( ) nudges it upward while shrinking its size and adding 10 to the "ghost" effect each time. It's a motion that gets smaller and fainter as it rises.
#25Star Particle: Removing the star
delete this clone has the clone delete itself once its motion is finished. This makes the star that's done its job disappear from the screen.
Cleaning up clones is unglamorous but hugely important. Scratch has a limit of only 300 clones at once, and if you leave them around without deleting, you hit the cap fast and no new stars appear.
#26Stage: Clear check
Start with when clicked, and use wait until ( ) to wait patiently until "★Cakes" becomes greater than 999. It won't move past this point until the condition is met.
Once achieved, switch backdrop to ( ) switches the backdrop to "Rays" and start sound ( ) plays a fanfare. The backdrop and sound change completely—we're going for that "I did it!" feeling in this moment.
#27Stage: Stopping after the clear
broadcast ( ) fires off the "Game Clear" signal. The cake, which receives this signal, will handle the clear effect afterward.
After that, wait ( ) seconds leaves just 2.5 seconds of afterglow, then stop stops everything. This order of showing the effect before stopping works well—it ends more satisfyingly than stopping abruptly.
#28Cake: The cake's clear effect
When when I receive ( ) catches the signal, switch costume to ( ) changes its look to "Cake-b." It's like it turns into a cake that's ready to eat.
Finally, say ( ) for ( ) seconds has it say "Clear! 1000 cakes reached!" for 2 seconds, and it's happily complete. It turned out to be a project that layers the fun of collecting cakes with the satisfaction of reaching a goal.
Wrap-up
You should now feel how a simple click-the-cake action, combined with just variables and conditionals, creates that genuine "growth" feeling. The design where prices double up over and over is a technique you can reuse in any other clicker or idle game. Combine it with clone-based effects like the star burst, and try arranging your own custom clicker game.