Create Your First Scratch Game: A Step-by-Step Guide
Scratch is a visual programming language developed by MIT, designed to make coding accessible and fun for beginners of all ages. Its drag-and-drop interface allows you to create interactive stories, animations, and, most importantly, games! This guide will walk you through the process of creating a simple yet engaging game using Scratch. We’ll build a classic chase game where a character tries to avoid being caught by another. Let’s get started!
What You’ll Need
* A computer with internet access.
* A web browser (Chrome, Firefox, Safari, or Edge are all compatible).
* A free Scratch account (optional, but recommended to save your projects).
* Enthusiasm and a willingness to learn!
Step 1: Setting Up Your Scratch Project
1. **Go to the Scratch Website:** Open your web browser and navigate to [https://scratch.mit.edu/](https://scratch.mit.edu/).
2. **Create an Account (Optional):** Click on “Join Scratch” in the top right corner to create a free account. This allows you to save your projects online and access them from any computer.
3. **Start a New Project:** Click on “Create” in the top left corner. This will open the Scratch editor.
Step 2: Choosing Your Sprites and Background
Sprites are the characters or objects in your game. Let’s select the sprites for our chase game:
1. **Delete the Default Cat Sprite (Optional):** If you want different characters, click on the cat sprite in the Sprite pane (bottom right corner) and then click the trash can icon to delete it. We’ll keep it for now.
2. **Choose a Player Sprite:** Click on the “Choose a Sprite” button (the cat icon with a plus sign) in the Sprite pane. A library of sprites will appear. Select a sprite that you want to control as your player. Good choices might be a person, animal, or even a simple shape. Let’s rename it to “Player”.
3. **Choose a Chaser Sprite:** Click on the “Choose a Sprite” button again. Select a different sprite that will act as the chaser, trying to catch the player. Rename this sprite to “Chaser”. A contrasting sprite works best to differentiate them easily. Maybe a different animal, a monster, or a robot.
4. **Choose a Background:** Click on the “Choose a Backdrop” button (the landscape icon with a plus sign) in the Stage pane (bottom right corner, next to the Sprite pane). Select a backdrop that fits the theme of your game. You could choose an outdoor scene, a city, or even a fantasy world.
Step 3: Coding the Player Sprite
Now, let’s add code to control the movement of the player sprite. We’ll use the arrow keys:
1. **Select the Player Sprite:** Click on the “Player” sprite in the Sprite pane to select it. This ensures that the code you write will be applied to that sprite.
2. **Add the “When Green Flag Clicked” Event:** Drag a “when green flag clicked” block from the “Events” category (yellow) into the scripting area (the large white area). This block will start the code when the green flag above the Stage is clicked.
3. **Add the Forever Loop:** Drag a “forever” block from the “Control” category (orange) and attach it below the “when green flag clicked” block. This will make the code inside the loop run continuously.
4. **Add the “If…Then” Statements:** Inside the “forever” loop, add four “if… then” blocks from the “Control” category. These blocks will check if a specific key is pressed and then execute the corresponding code.
5. **Add Key Press Sensors:** Inside each “if… then” block, add a “key [space] pressed?” block from the “Sensing” category (light blue). Change the “space” to “up arrow”, “down arrow”, “right arrow”, and “left arrow” for each of the four blocks respectively. These blocks will detect when the corresponding arrow key is pressed.
6. **Add Movement Code:** Inside each “if… then” block, add a “change y by [10]” or “change x by [10]” block from the “Motion” category (blue).
* For the “up arrow” block, use “change y by 10” (move up).
* For the “down arrow” block, use “change y by -10” (move down).
* For the “right arrow” block, use “change x by 10” (move right).
* For the “left arrow” block, use “change x by -10” (move left).
Here’s what the code for the Player sprite should look like:
scratch
when green flag clicked
forever
if
change y by (10)
end
if
change y by (-10)
end
if
change x by (10)
end
if
change x by (-10)
end
end
Step 4: Coding the Chaser Sprite
Now, let’s add code to make the chaser sprite follow the player sprite:
1. **Select the Chaser Sprite:** Click on the “Chaser” sprite in the Sprite pane to select it.
2. **Add the “When Green Flag Clicked” Event:** Drag a “when green flag clicked” block from the “Events” category into the scripting area.
3. **Add the Forever Loop:** Drag a “forever” block from the “Control” category and attach it below the “when green flag clicked” block.
4. **Add the “Point Towards” Block:** Inside the “forever” loop, add a “point towards [mouse-pointer]” block from the “Motion” category. Change “mouse-pointer” to “Player” from the dropdown menu. This will make the chaser sprite constantly point towards the player sprite.
5. **Add the “Move Steps” Block:** Below the “point towards [Player]” block, add a “move [10] steps” block from the “Motion” category. Adjust the number of steps to control the chaser’s speed. A value between 3 and 7 usually works well.
Here’s what the code for the Chaser sprite should look like:
scratch
when green flag clicked
forever
point towards [Player v]
move (5) steps
end
Step 5: Adding Collision Detection
We need to determine what happens when the chaser catches the player. Let’s stop the game and display a message:
1. **Select the Player Sprite:** Click on the “Player” sprite in the Sprite pane.
2. **Add another “When Green Flag Clicked” Event:** Drag another “when green flag clicked” block from the “Events” category into the scripting area. We can have multiple event triggers.
3. **Add the Forever Loop:** Drag a “forever” block from the “Control” category and attach it below the “when green flag clicked” block.
4. **Add the “If…Then” Statement:** Inside the “forever” loop, add an “if… then” block from the “Control” category.
5. **Add the “Touching” Sensor:** Inside the “if… then” block, add a “touching [mouse-pointer]?” block from the “Sensing” category. Change “mouse-pointer” to “Chaser” from the dropdown menu. This block will detect if the player sprite is touching the chaser sprite.
6. **Add the “Stop All” Block:** Inside the “if… then” block, add a “stop all” block from the “Control” category. This will stop the game when the player is caught.
7. **Add a message (Optional):** You can add a “say [Hello!] for [2] seconds” block from the “Looks” category inside the “if… then” block, before the “stop all” block, to display a message like “You got caught!” or “Game Over!”. Change the “Hello!” text to your desired message.
Here’s what the collision detection code for the Player sprite should look like:
scratch
when green flag clicked
forever
if
say [You got caught!] for (2) seconds
stop [all v]
end
end
Step 6: Adding a Score
Let’s add a score to make the game more engaging. The score will increase as long as the player avoids the chaser:
1. **Create a Variable:** Go to the “Variables” category (orange) and click on “Make a Variable”. Name the variable “Score” and make sure it’s “For all sprites”.
2. **Set Initial Score:** Select the Player sprite. Drag a “set [my variable] to [0]” block from the “Variables” category and place it below the “when green flag clicked” block *before* the forever loop in the *movement* script of the Player Sprite. Change “my variable” to “Score”. This will set the score to 0 at the beginning of the game.
3. **Increase the Score:** Inside the “forever” loop in the *movement* script of the Player Sprite, *before* the if statements that check for key presses, add a “change [my variable] by [1]” block from the “Variables” category. Change “my variable” to “Score”. Then, since we don’t want the score to increase *too* quickly, add a “wait [1] seconds” from the “Control” category right *after* the score is changed but still inside the forever loop. Change this to a much smaller value, like 0.1 or 0.05.
Here’s the updated code for the Player sprite (movement section) including the score:
scratch
when green flag clicked
set [Score v] to [0]
forever
change [Score v] by (1)
wait (0.05) seconds
if
change y by (10)
end
if
change y by (-10)
end
if
change x by (10)
end
if
change x by (-10)
end
end
Step 7: Adding a Starting Position
To ensure a fair start, let’s set the initial positions of the Player and Chaser sprites:
1. **Player Starting Position:** Select the “Player” sprite. Drag a “go to x: [0] y: [0]” block from the “Motion” category and place it below the “when green flag clicked” block in the *collision detection* script. Change the x and y values to your desired starting position (e.g., x: -150, y: 0).
2. **Chaser Starting Position:** Select the “Chaser” sprite. Drag a “go to x: [0] y: [0]” block from the “Motion” category and place it below the “when green flag clicked” block. Change the x and y values to your desired starting position for the chaser (e.g., x: 150, y: 0). You want it far enough away from the player to give them a chance.
Step 8: Adding Difficulty
Let’s increase the chaser’s speed over time to make the game more challenging:
1. **Chaser Speed Variable:** Create a new variable called “Chaser Speed” (For all sprites).
2. **Set Initial Chaser Speed:** Select the “Chaser” sprite. Drag a “set [my variable] to [0]” block from the “Variables” category and place it below the “when green flag clicked” block. Change “my variable” to “Chaser Speed” and set the value to something like 3. This will be the initial speed of the chaser.
3. **Replace Fixed Speed:** In the Chaser’s code where you have “move (5) steps”, replace the “5” with your new “Chaser Speed” variable block. You can find the variable block in the Variable category and dragging the oval that represents your variable into the move steps command. It should now read “move (Chaser Speed) steps”.
4. **Increase Chaser Speed Over Time:** Drag a “change [my variable] by [1]” block from the “Variables” category and place it below the “point towards” block and *before* the “move” block in the Chaser’s script, inside the forever loop. Change “my variable” to “Chaser Speed”. The chaser will incrementally speed up and become harder to avoid. To make it less drastic, try a value like 0.1 instead of 1.
5. **Adjust Starting Speed:** You may need to adjust the initial value of “Chaser Speed” to fine-tune the difficulty.
Here’s the updated code for the Chaser sprite:
scratch
when green flag clicked
go to x: (150) y: (0)
set [Chaser Speed v] to [3]
forever
point towards [Player v]
change [Chaser Speed v] by (0.1)
move (Chaser Speed) steps
end
Step 9: Adding Winning Condition
Currently, the game only ends when the player is caught. Let’s add a winning condition, such as reaching a certain score:
1. **Select the Player Sprite:** Click on the “Player” sprite in the Sprite pane.
2. **Add another “When Green Flag Clicked” Event:** Drag another “when green flag clicked” block from the “Events” category into the scripting area.
3. **Add the Forever Loop:** Drag a “forever” block from the “Control” category and attach it below the “when green flag clicked” block.
4. **Add the “If…Then” Statement:** Inside the “forever” loop, add an “if… then” block from the “Control” category.
5. **Add the “Greater Than” Operator:** Inside the “if… then” block, add a “[ ] > [ ]” operator block from the “Operators” category (green).
6. **Add the Score Variable:** Drag the “Score” variable block from the “Variables” category into the left side of the “greater than” operator.
7. **Add the Target Score:** Type the target score (e.g., 100) into the right side of the “greater than” operator.
8. **Add Winning Message and Stop All:** Inside the “if… then” block, add a “say [You Win!] for [2] seconds” block from the “Looks” category and a “stop all” block from the “Control” category. Change the “You Win!” text to your desired message.
Here’s what the winning condition code for the Player sprite should look like:
scratch
when green flag clicked
forever
if <(Score) > (100)> then
say [You Win!] for (2) seconds
stop [all v]
end
end
Step 10: Adding Sound Effects (Optional)
Add sound effects to enhance the gameplay experience:
1. **Player Caught Sound:** Select the “Player” sprite. In the collision detection code, *before* the “say” block, add a “start sound [Meow]” block from the “Sound” category. You can select a different sound from the dropdown menu or choose a new sound from the sound library (the speaker icon on the bottom left). A crashing or game over sound works best here.
2. **Chaser Moving Sound:** Select the “Chaser” sprite. Inside the forever loop, *before* the “point towards” block, add a “start sound [Meow]” block from the “Sound” category. Choose a subtle sound so it doesn’t become irritating. Try a low hum or bubbling sound. Add a “wait (0.5) seconds” command *after* the “start sound” command. This is important to keep the sound from being overwhelming.
Step 11: Testing and Refining Your Game
Now that you’ve coded the basic game mechanics, it’s time to test and refine your game:
1. **Click the Green Flag:** Click the green flag above the Stage to start the game.
2. **Play the Game:** Use the arrow keys to control the player sprite and try to avoid the chaser sprite.
3. **Observe and Adjust:**
* Is the player moving smoothly?
* Is the chaser following the player effectively?
* Is the game too easy or too difficult? Adjust the chaser’s speed and the target score accordingly.
* Are the sound effects appropriate?
* Are the starting positions ideal?
4. **Make Changes:** Based on your observations, make changes to the code and settings to improve the gameplay.
5. **Repeat:** Repeat the testing and refining process until you are satisfied with the game.
Step 12: Saving and Sharing Your Game
Once you are happy with your game, it’s time to save and share it:
1. **Save Your Project:** If you have a Scratch account, your project will automatically save as you work. You can also manually save by clicking on “File” in the top left corner and then “Save Now”. Give your project a descriptive name.
2. **Share Your Project:** If you want to share your game with others, click on the “Share” button in the top right corner. Add instructions on how to play your game and any notes you want to share. You can then share the link to your game with friends, family, or the Scratch community.
Congratulations!
You have successfully created your first Scratch game! This is just the beginning. Explore the different categories of blocks in Scratch, experiment with different sprites and backdrops, and try adding more features to your game, such as power-ups, obstacles, or multiple levels. The possibilities are endless! Keep coding and have fun!