The Ultimate Guide to Scratch Programming: Create Your First Game
ℹ️ Why Scratch? The Perfect Gateway to Coding
Before diving into languages like Python, Java, or C++, many of the world's best programmers start with a simple, powerful tool: Scratch. Developed by the MIT Media Lab, Scratch is a visual programming language designed to be the most accessible entry point into the world of software development. Instead of typing complex syntax, you snap together colorful, labeled blocks, much like digital LEGOs. Each block represents a real coding concept—a loop, a conditional statement, a variable—but removes the intimidating barrier of syntax errors.
This approach is revolutionary because it allows you to focus 100% on the logic of your program. You're not fighting with typos or forgotten semicolons; you're focused on the creative process of making something happen. What do you want your character to do? How should the game keep score? How does the game know when it's over? Scratch lets you answer these questions by thinking like a programmer, making it an unparalleled tool for building foundational knowledge.
🖥️ The Scratch Interface: Your Digital Playground
When you first open the Scratch editor (available for free online at scratch.mit.edu), you're presented with a colorful and inviting workspace. Let's break it down into its key components:
- The Stage: Located in the top-right, this is where your creation comes to life. It's the performance area where your characters (called Sprites) will move, talk, and interact. The green flag starts the main script, and the red stop sign ends it.
- Sprite List: Below the Stage is a panel that lists all the Sprites in your project. You can click on a Sprite here to select it, see its properties (like size, direction, and position), and, most importantly, view and edit its scripts.
- Block Palette: On the far left is your toolbox. This is a scrollable list of all the code blocks available in Scratch, neatly organized into color-coded categories.
- Motion: Blocks for moving sprites.
- Looks: Change costumes, show/hide, display text.
- Sound: Play sounds and music.
- Events: The starting blocks that trigger scripts (e.g., "when green flag clicked").
- Control: The logic blocks! Loops, if-statements, and pauses.
- Sensing: Allows sprites to detect things, like touching another sprite or a color.
- Operators: Math, logic (and/or), and text manipulation.
- Variables: Create and manage data like a score or timer.
- Scripting Area: This large, central area is your main canvas. You build your programs here by dragging blocks from the Palette and snapping them together into stacks called "scripts." Each script tells a sprite what to do. The magic of Scratch is that blocks are shaped to only fit where they make logical sense!
- Backdrops Tab: Next to the "Code" tab is a tab for "Backdrops." Here, you can change the background image of the Stage to set the scene for your game or animation.
🧠 Core Coding Concepts in Scratch
Every programming language, from Scratch to Python, is built on the same set of fundamental ideas. Let's see what these concepts look like as Scratch blocks.
⚡ 1. Events: The Starting Gun
Programs don't just start running on their own. Something has to trigger them. This "something" is an **event**. In Scratch, event blocks are the curved-top blocks from the yellow Events category. They are always the first block in any script.
The most common event block is when green flag clicked. This is the main starting point for most projects. Think of it as the `main()` function in Python. Other events can be a key press (when [space] key pressed) or the mouse clicking on a sprite (when this sprite clicked). This concept is known as **event-driven programming**, where different scripts lie dormant, waiting for their specific trigger event to happen.
📜 2. Sequencing: Order Matters
A script is just a sequence of instructions. The computer executes these instructions in order, from top to bottom. The order in which you snap your blocks together is critical. If you want a sprite to move and then say something, you must put the move block first.
(This is a script for a Sprite)
1. START with an Event block:
[Events] when green flag clicked
2. SNAP a Motion block underneath:
[Motion] move (100) steps
3. SNAP a Looks block underneath that:
[Looks] say [Hello!] for (2) seconds
Result: The sprite will instantly move 100 steps to the right,
and then a speech bubble with "Hello!" will appear for 2 seconds.
If you swapped blocks 2 and 3, it would talk first, then move.
🔄 3. Loops: Doing it Again (and Again)
Computers are fantastic at performing repetitive tasks. **Loops** are how we tell them to do so. In Scratch, the main loop blocks are found in the orange Control category. The forever block is the most powerful: any blocks you place inside its C-shaped mouth will repeat endlessly until the program is stopped.
This is essential for animations and for constantly checking for game conditions (like "is the player touching an enemy?"). The repeat (10) block is similar, but only runs the code inside a specific number of times.
(A script for a spinning animation)
[Events] when green flag clicked
[Control] forever
[Motion] turn right (15) degrees
[Control] wait (0.1) seconds
Result: The sprite will continuously turn 15 degrees, wait a tiny
fraction of a second, and then repeat, creating a smooth spinning animation.
Without the 'forever' loop, it would only turn once.
🔀 4. Conditionals: Making Choices
**Conditionals** (or "if-statements") allow a program to make decisions. They let a sprite react to its environment. The main blocks are if < > then and if < > then, else. These C-shaped blocks have a diamond-shaped slot in them.
This diamond slot accepts any block that returns a `True` or `False` value, which are typically found in the light-blue Sensing or green Operators categories. The code inside the `if` block will *only* run if the condition in the diamond slot is true.
(A script to make a sprite bounce off the edge of the stage)
[Events] when green flag clicked
[Control] forever
[Motion] move (5) steps
[Control] if < [Sensing] touching [edge v] ? > then
[Motion] turn right (180) degrees
Result: The sprite moves forward forever. In each frame of the loop,
it checks IF it is touching the edge. If that condition is true,
it runs the code inside: turning around. Otherwise, it skips the turn block.
💾 5. Variables: Remembering Things
A **variable** is a container for storing information. A game needs to remember things like the player's score, the number of lives left, or a timer. You can create your own variables in the dark-orange Variables category by clicking "Make a Variable."
Once created, you get a set of blocks for that variable. The set [my variable v] to (0) block gives the variable its initial value. The change [my variable v] by (1) block is used to modify its value, which is perfect for increasing a score.
🎮 Project: Let's Build "Cat and Mouse"!
Now it's time to put all these concepts together! We will build a complete, simple game where the player controls a cat, trying to catch a mouse that moves randomly. We will keep score. Let's begin!
🔧 Part 1: Setting Up the Stage & Sprites
- Start a New Project: Go to the Scratch website and click "Create" to open a new project. You will see the default Cat sprite. We'll use that!
- Choose a Backdrop: Click on the "Choose a Backdrop" button in the bottom-right corner. Find a backdrop you like. A simple one like "Blue Sky" or a grid like "Grid" works well.
- Add the Mouse Sprite: Click the "Choose a Sprite" button (the cat face icon) next to the backdrops button. In the library, search for "Mouse" and add the Mouse sprite to your project.
- Resize the Sprites: The sprites might be a bit big. Click on the Cat sprite in the Sprite List below the stage. In the properties area above, change its "Size" from 100 to 70. Do the same for the Mouse sprite, perhaps making it even smaller, like 50.
Your stage is now set! You should have a Cat and a smaller Mouse on your chosen background.
🐱 Part 2: Making the Cat Player-Controlled
We want to move the cat with the arrow keys. This requires four separate scripts for the Cat sprite—one for each arrow key. Make sure you have the Cat selected in the Sprite List before you start building these scripts.
SCRIPT 1: Move Right
[Events] when [right arrow v] key pressed
[Motion] change x by (10)
SCRIPT 2: Move Left
[Events] when [left arrow v] key pressed
[Motion] change x by (-10)
SCRIPT 3: Move Up
[Events] when [up arrow v] key pressed
[Motion] change y by (10)
SCRIPT 4: Move Down
[Events] when [down arrow v] key pressed
[Motion] change y by (-10)
Explanation: The stage is a coordinate grid. The `x` position controls horizontal movement (positive is right, negative is left), and the `y` position controls vertical movement (positive is up, negative is down). Each time you press an arrow key, the corresponding event is triggered, and the cat's position is changed by 10 pixels.
🐭 Part 3: Programming the Autonomous Mouse
Now, select the Mouse sprite in the Sprite List. We want the mouse to move on its own, forever. It should glide to a random spot, wait a moment, and then pick a new random spot.
(This script is for the MOUSE sprite)
[Events] when green flag clicked
[Control] forever
[Motion] glide (1) secs to [random position v]
[Control] wait (1) seconds
Explanation: When the game starts, a `forever` loop begins for the mouse. Inside, it smoothly glides for 1 second to a completely random x and y coordinate on the stage. After it arrives, it waits for 1 second before the loop repeats, causing it to pick a new random destination. Click the green flag to test it! You should be able to move your cat while the mouse moves on its own.
💥 Part 4: Detecting the Catch
How does the game know when the cat catches the mouse? We need to add logic to the CAT sprite that constantly checks if it's touching the mouse.
(Add this NEW script to the CAT sprite)
[Events] when green flag clicked
[Control] forever
[Control] if < [Sensing] touching [Mouse1 v] ? > then
[Events] broadcast [message1 v]
Explanation: We create a new script for the cat that starts with the green flag. It has a `forever` loop that is always running in the background. Inside, it constantly asks the question: "Am I touching the Mouse1 sprite?" If the answer is yes, it runs the code inside the `if` block. Here, we introduce a new concept: broadcast. Broadcasting sends a secret message throughout the project that other sprites can listen for. Think of it like shouting "I caught you!".
Now, we need to make the mouse react to this broadcast.
(Add this NEW script to the MOUSE sprite)
[Events] when I receive [message1 v]
[Motion] go to [random position v]
Explanation: This script on the mouse lies dormant until it "hears" the broadcast message. When it does, it immediately jumps to a new random position on the stage. Now, when your cat touches the mouse, the mouse should instantly teleport away!
🏆 Part 5: Keeping Score
A game needs a score! Let's create a variable to track how many times the player has caught the mouse.
- Go to the Variables category on the left.
- Click the "Make a Variable" button. Name it `Score` and make sure "For all sprites" is selected. Click OK.
- You'll see a `Score` monitor appear on your stage. You'll also have new blocks for your `Score` variable.
We need to do two things: reset the score to 0 when the game starts, and increase it by 1 every time the mouse is caught. Both of these scripts should be added to the **CAT sprite**.
(MODIFY the Cat's main interaction script)
[Events] when green flag clicked
[Variables] set [Score v] to (0) <-- ADD THIS BLOCK AT THE TOP
[Control] forever
[Control] if < [Sensing] touching [Mouse1 v] ? > then
[Variables] change [Score v] by (1) <-- ADD THIS BLOCK
[Events] broadcast [message1 v]
[Control] wait (0.2) seconds <-- ADD THIS TO PREVENT MULTIPLE POINTS
Explanation: We modify the cat's main loop. Right after the green flag is clicked, we `set Score to 0` to reset the game. Then, inside the `if` statement, right before the broadcast, we `change Score by 1`. We also add a tiny `wait` to prevent the score from shooting up hundreds of points if the cat stays touching the mouse for a split second.
📝 The Final Game Scripts
Here are the complete scripts for both sprites. You can use this as a reference to check your work.
--- CAT SPRITE SCRIPTS ---
SCRIPT 1: Main Game Logic
[Events] when green flag clicked
[Variables] set [Score v] to (0)
[Control] forever
[Control] if < [Sensing] touching [Mouse1 v] ? > then
[Variables] change [Score v] by (1)
[Events] broadcast [message1 v]
[Control] wait (0.2) seconds
SCRIPT 2: Move Right
[Events] when [right arrow v] key pressed
[Motion] change x by (10)
SCRIPT 3: Move Left
[Events] when [left arrow v] key pressed
[Motion] change x by (-10)
SCRIPT 4: Move Up
[Events] when [up arrow v] key pressed
[Motion] change y by (10)
SCRIPT 5: Move Down
[Events] when [down arrow v] key pressed
[Motion] change y by (-10)
--- MOUSE SPRITE SCRIPTS ---
SCRIPT 1: Random Movement
[Events] when green flag clicked
[Control] forever
[Motion] glide (1) secs to [random position v]
[Control] wait (1) seconds
SCRIPT 2: React to Being Caught
[Events] when I receive [message1 v]
[Motion] go to [random position v]
🌟 Beyond the Game: Next-Level Ideas
You've built a complete game! Now, how can you make it your own? Here are some ideas to challenge yourself:
- Add Sounds: Go to the "Sounds" tab for the cat sprite. Add a "Meow" sound. In the cat's main script, add a start sound [Meow v] block right after you change the score.
- Create a Timer: Can you make the game end after 30 seconds? Create a new variable called "Timer". When the green flag is clicked, set it to 30. Then, create a new script: when green flag clicked -> repeat (30) times -> wait (1) seconds -> change [Timer v] by (-1). Finally, add a stop [all v] block at the end to stop the game.
- Add a "Game Over" Screen: Create a new sprite. Paint a simple "Game Over" text. Make this sprite hidden at the start of the game (hide). When the timer runs out, broadcast [Game Over] and make the sprite show.
- Increasing Difficulty: Can you make the mouse glide faster as the score gets higher? Inside the mouse's movement script, instead of gliding for 1 second, you could use operators to make the glide time `(10 / Score)` (but you'll need to handle the score being 0!).
🏁 Conclusion: From Blocks to Brackets
Congratulations! You have successfully designed and built a complete interactive game using Scratch. More importantly, you have gained hands-on experience with the universal principles of programming. Every concept you used here has a direct equivalent in text-based languages like Python.
- Your when green flag clicked script is like a `main()` function.
- A forever block is a `while True:` loop.
- An if < > then block is an `if` statement.
- A Score variable is just like a variable you'd declare with `score = 0`.
Scratch is more than just a tool for kids; it's a powerful and effective environment for learning to think logically and systematically. It builds the mental muscles required for computational thinking. The skills you've developed today—breaking a large problem into smaller parts, creating sequences of instructions, and using logic to control outcomes—are the exact skills you will use as you progress to more advanced programming. Keep experimenting, keep building, and most importantly, have fun with it!
Comments
Post a Comment