Haunted House Adventure Game in Scratch

Haunted House Adventure Game in Scratch!
The base of this project is at

http://scratch.mit.edu/projects/30789866/
A more complete version of the basic haunted house project is at
For an intermediate-advanced version see
Introduction
Welcome to Haunted House Adventure Game in Scratch. We are so glad you joined us today, and are
excited to show you how to make your own game.
What is We Can Code IT

We Can Code IT is a non-profit organization that provides motivation, education, and mentorship in
Computer Science and Engineering in a fun, creative way. Our main focus is getting a diverse population,
particularly girls and women, back in technology and engineering fields. We also have co-ed workshops,
courses, and community outreach events with female mentors and leaders.
What is Scratch
Scratch is a fun, easy to use, programming language. Basically, its like scripting your own play. You make
actors perform scripts on a stage. You can make games, art, animations, tell stories, and so much more,
using Scratch.
What is our goal?

Our goal is to have you learn some programming basics and have fun while doing it! The end result
today will be that you have created your own haunted house game using Scratch. Feel free to make it
your own! Change pictures, add your own scripts to the actors, play around and explore!
In programming there are often many ways to accomplish the same task. If you find a new way, great!
We also want to teach you about Computational Thinking, which means, you start thinking like a
programmer. Dont worry about this, it will come naturally.
Copyright 2014, We Can Code IT, Inc.
http://WeCanCodeIT.org
STEP 1: Open Scratch in your Browser.

Here is the URL (the web address): http://scratch.mit.edu
It will look like this
//Comment: Do you see this page?

If (yourAnswer = true) then
Say Got it.;
else
raiseYourHand();
Step 2: Join Scratch so you can save your project!

If you have a Scratch login, login now.
Otherwise, click on the Fish Picture to Join Scratch.
Fill out the username and password fields. Make these something memorable to you. Continue by
clicking Next and finishing the registration process by adding your email and other information.
If you need help, then
raiseYourHand();
Were almost there! Lets pause for a moment and talk about the odd
way Ive been writing.
At this point, youve seen a few of these statements
If (youveNoticedTheseStatements == true) then
raiseYourHand();
else
keepYourHandDown();
What are some of the things you notice about these statements?
What does this mean to you? How would you say it in English?
Step 3: Writing pseudocode

Computers are not very bright, but people are. If you bought a computer from the store and it didnt
have an operating system, like Windows or Mac operating systems, then the computer would just sit
there, looking at you with a blank stare.
A computer needs someone to tell it what to do. It needs very specific instructions!
Thats where you come in.
Lets write down some instructions that a computer might understand. When you write this using
English (or any other human language), its called pseudocode.
Using pseudocode, lets tell the computer how a person raises her hand.
function raiseYourHand(){
//write your instructions here, between the curly braces.
}
Here is an example:
function raiseYourHand(){
put my arm up, towards the sky;
point fingers to the sky;
if I am called on then
put my arm down to a natural position;
}
Youll notice that sometimes I write my pseudocode with titles like function, and with
parentheses, curly braces, and sometimes semi-colons. This is not required by you. Im just trying
to get you used to other languages people program in besides Scratch.
Your version may differ. This is the fun of programming, you get to make your own recipes!
What did you notice about your pseudocode?

How was it different than the example?
Would you change anything?
Step 4: Create with Scratch
On the scratch web page, click Create.

Remember:
If (needHelp == true) then
raiseYourHand();
Notice the tip bar on the right. Go ahead and follow along for the next ten to fifteen minutes, and
play with Scratch!
Note: If the tip bar doesnt show, click Tips at the top of the screen, then click Getting Started from
the list that appears.
Tips
Getting Started
Step 5: What can you tell us about Scratch?
Youve played around with Scratch, so what are some of the things youve noticed?
Share with the class.
Did you notice colors, stages, actors, commands?
Step 6: Saving a Project:
Name
your file
Look at the arrow in the image, above.

Name your project something memorable, like Getting Started.
Save Now
Then Click File -> Save Now.

Heres some of my pseudocode explaining what we just did.
If (doneWithProject == true) then
nameProject();
clickFile();
clickSaveNow();
Step 6: Haunted House Adventure: Select your sprite (character)

Click File -> New
This starts a new project.
New
Youll see the cat,
called Sprite1 is selected, and we are on the Scripts tab.
If you dont like the cat as your main character, go ahead and choose a new character.
Select your main character, a.k.a. main sprite.
C
l
i
c
k
10
Look around and double-click the sprite you like (or single-click, then click OK.)
Next, I want to remove the Cat sprite, so I right-click on the cat, and left-click on delete.
My sprite is now ready for use!
11
Step 7: Haunted House Adventure: Move your sprite around with arrows
Click the Script Tab to select it.

Click Events under scripts.
Drag the
block in to the scripts area.
Change space to up arrow
12
Step 7: Haunted House Adventure move sprite around with arrows

(continued)
We are telling the computer to do something in this Scratch Program when the up arrow is pushed on
your keyboard. This is our first step into the world of programming, and we are using Scratch as our
programming language!
Lets continue
Click Motion
Drag change y by [10] in to the scripts area,
Attach it underneath the when [up arrow] key pressed block.
Test! Click the up arrow on your keyboard and see what happens.
Motion
y is up and down.
x is left and right.
Think of a number line!
13
ALWAYS: Test and Debug!

The best programmers test their creations as they go along. Its a way to see if your instructions are
correct, and catch any issues as they happen.
How would you test to see if your Scratch code is working?
Did you test it? Is it working?

If (not working) then
debug();
raiseHand();
What is debugging?
Errors in programming are called bugs. We want to catch the bugs in our code as soon as possible.
Debugging is sort of like getting rid of bugs in your house. Theres an interesting story about
how computer bugs were named.
As the story goes, pioneer computer programmer Admiral Grace Murray Hopper coined the
phrase in the early 1940s, when her computer crashed. Searching for the cause of the problem,
Admiral Hopper discovered the original computer bug, inside her computer, was a moth.
As she removed the moth, her coworker asked what she was doing.
Im debugging the machine, she answered.
http://indianapublicmedia.org/amomentofscience/computer-bugs-and-amazing-grace/
How do you fix these bugs?

You review your work to see if its a typo or a simple mistake, like not joining related blocks
together, in Scratch.
You ask for help.
You look things up in books or online.
You take classes to learn more.
You practice, practice, practice!
14
Step 8: Duplicating and Code Reuse in Scratch

Now that your up arrow is controlling the cat, moving her up (name that axis, X or Y?), lets reuse that
set of blocks, that code, to create events for the right arrow, down arrow, and left arrow.
Right-click on the set of blocks that you want to copy.
A menu will appear.
Select duplicate from the menu by left-clicking on duplicate.
duplicate
Drag the newly-formed set of blocks to an open space in the scripts window, then left-click to place it.
Now, click the drop-down on this duplicated set of blocks, to change when [up arrow] key pressed, to
when [down arrow] key pressed.
Change to down arrow
Now Test and Debug!
15
Step 8: What is missing?
Did you test the down arrow?

What did you expect to happen?
What did happen?
The sprite still moved up when you pressed the down arrow, didnt she? Why?
How do we make her go down? Hint: think of positive numbers as up and right, and negative numbers as
down and left.
Change the value of change y by [10] to the correct number [-10], under the duplicated block.
Test.
16
Step 9: Deleting Blocks and Considering X-axis

Duplicate the up arrow block again.
Drag it in to an available area of the scripts workspace.
Change up arrow to right arrow
Test
Debug: what is the problem?
Y is up and down. We dont want to change the Y position when we click the right arrow, we want to
change the X position.
Lets disconnect the change y by . . . motion block from the when right arrow key pressed event
by dragging it away from that block.
Delete the change y by . . . block by right-clicking it, and choosing delete.
delete
Now, attach the change x by . . . block under the when right arrow key pressed event, and leave
the number at 10.
Test!
17
Understanding the x-axis and y-axis
To make moving a sprite around easier to program, we place an imaginary

grid on our Scratch game.
This grid has positions that are left and right, or horizontal.
It also has positions that are up and down, or vertical.
We name the left-right horizontal line the x-axis.
We name the up-down vertical line the y-axis.
If we want to move our sprite to the left, we use negative numbers on our x-axis (see image above)
Likewise to move our sprite down, we use negative numbers on our y-axis (see image above)
Conversely, we use positive numbers on our x-axis to move right, and on our y-axis to move up.
Youll notice motion blocks in Scratch that use x and y. This is to what they are referring!
18
Step 10: On Your Own

Your goal is to create the when left arrow key pressed event programming on your own. Raise your
hand if you are stuck.
Test!
If you are done and waiting,

1) Help someone else debug. Helping them will help you learn too!
2) Right click in an open area of the scripts window. What does clean up do?
3) Click around and see the different types of blocks available: Motion, Looks, Sound, Pen, Data,
Events, Control, Sensing, Operators, and More Blocks.
Common issues at this stage:

1) Instead of change by number of steps, you accidentally chose go to (x or y position).
Change by is a relative position (a position based on where you are now), versus go to,
which is an absolute position. A real world example of this is like if I told you to move forward
10 steps, versus saying go to 10 Main Street.
2) You press the right arrow, but the sprite moves left (Or up goes down, down goes up, left
goes right). Look at your event for when right arrow clicked. Is the number you are moving by
negative or positive? Positive is right when using the x axis, and negative is left when using the
x axis. Similarly, Positive is up when using the y axis, and negative is down when using the
y axis.
19
Step 11: Add a backdrop

Lets dress up our stage by adding a backdrop of a room to it. This is the first scene in our game.
Left-click on the image icon at the bottom left of your screen.
A new screen appears. Click the Castle category and double- click a picture of a door.
1) Castle
2)
pick a
scene
3) Click OK
20
Step 11: Add a backdrop (continued)

The result? A new backdrop in your game!
Note: you can add multiple backdrops, multiple sprites, multiple sounds . . .
21
Step 12: Upload a Sprite and create some interaction

Lets add a new sprite (another actor or prop) to the scene. This will be a witch flying across the screen
with directions. This time, lets upload your own sprite. You have either made this sprite in another
image editing program, received the file . . . the important thing is that this sprite is being sent from your
computer to Scratch. Click the Upload Sprite icon.
Click folder icon.
A new window will appear.
Find the file you want to use and

double-click.
(Note: You can download this image at http://WeCanCodeIT.org/scratch-haunted-house)
22
Step 12: Upload a Sprite and create some interaction (continued)

Youll see your new sprite appear.
Test.
Move around.
Make sure nothing has changed. Its looking good, but nothing much is happening.
Create an outline of what the witch should do with pseudocode.
Lets forget the programming-like pseudocode weve been using previously, and just write this in basic
English.
When the game starts, start the witch from the top, left corner.
Make sure the witch is shown.
Have the witch glide down a bit for a second.
Have the witch give an ominous warning to start the game for a several seconds.
Have the witch glide up and off the screen for a second.
Ensure the witch is out of sight by hiding her.
Heres what that code looks like in Scratch.
23
Make sure the witch sprite is selected, and that you are on the Scripts tab. Then find the blocks above
on your own to make the witch do your bidding!
TEST!
Click the Green Flag to start your game.
Did the witch glide from the left towards the center,
pause and say an ominous greeting,
then glide off to the upper-right of the screen and then disappear?
Why or why not?
Debug or ask for help if you need it!
If its smooth sailing for you, go ahead and try different things.
Examples:
Change the x and y values, then test to see what happens.
Change how many seconds it takes her to glide, or to say her message.
24
Step 13: Initialize your main sprite
Make sure your main characters sprite is selected, and you are on the Scripts tab.
Then add the When (flag) clicked event to the scripts view by dragging it on the screen.
Lets set an initial position for the main character first. I set her to x = 170 and y = -90.
Go ahead and try that.
Test by dragging her to a new position on the stage, then clicking the flag. Her position should move to
what you have set on the When flag clicked event.
Variables and objects like sprites are often initialized when a program starts. This sets everything up so
it is ready to be used. Lets continue to set up our main characters actions when flag clicked.
25
Step 14: Initialize your main sprite -> Rotation Style & Direction
When you move your main sprite around the screen by pushing the left arrow and right arrow, you may
notice that she doesnt turn to face left, when pressing the left arrow. She may simply walk backwards.
Lets fix that with 3 motion blocks.
TEST!
When you click the green flag to
start the game, then click the
left arrow, does your character
turn to the left now?
When you click the right arrow, does
she turn back to the right?
26
Extra Booster
Understanding Rotation Style & Direction in Scratch
Waiting for others? Try this out!
Click on your main sprite, then click on the I icon (circled above). Your window will change to show
some extra options (below).
Try altering the rotation style, and direction. Click your left and right arrows after each change.
What happens?
The code you added from the previous page alters the rotation style and direction of your sprite
programmatically!
27
Step 15: Changing costumes

Some sprites have multiple costumes included. Check out the costumes on your sprite!
Click the sprite you want to view, then, click the Costumes tab.
Click
Click
The sprite Im viewing has 4 costumes, each with a distinct name, girl1-a, girl1-b, girl1-c, and girl1-d.
girl1-a
girl1-b
girl1-c
girl1-d
28
Step 16: Changing costumes (cont.)
Click the Scripts tab.

Choose the Looks block category (circled above).
Drag a switch costume to block and add it to the
end of the when flag clicked blocks.
I am initializing which costume my sprite will
wear when the game starts.
I chose girl1-d.
After you do this, click the Green flag to start your game and TEST!
29
Step 17: Initializing your backdrop

When we enter our game, we want to show the door where our sprite will eventually enter the haunted
house. We previously added a backdrop for that.
We will eventually add new backdrops to create different scenes in our haunted house.
Given that, let's get ready for changes in backdrops later by making sure we always start on the right
backdrop for our first scene. Lets initialize our backdrop in a similar way to how we initialized our
sprites costume.
Go to Scripts -> Looks

Drag switch backdrop block
Add switch
to the end of your
backdrop block
when flag clicked blocks.
Use the dropdown to select which of your backdrops
with which you want to start the game.
After you do this, click the Green flag to start your game and TEST!
30
Extra Booster
Adding Music to your game
Waiting for others? Try this out!
Click the speaker icon
Select medival2 (or a sound of your liking), and click OK
Click OK
31
Extra Booster
Adding Music to your game (continued)
Now, look at the code to the

right. We are adding our
own event, called
playThemeSong.
32
Extra Booster
Adding Music to your game (continued)
To add a new broadcast block, click the Scripts tab, then choose Events (brown blocks), and look
towards the bottom for broadcast [message1]. Drag that to the last position in your main characters
when flag clicked blocks.
The name, message1, isnt very
descriptive. Lets change the name of
the broadcasted event.
Click on the arrow next to the dropdown
name message1, and click
new message.
Name it playThemeSong, and click OK.
Next, drag the event called when I receive [] on the screen. Make sure you change the dropdown to
state when I receive [playThemeSong].
Look at the next picture to complete
the process.
Can you figure out
why we add another
broadcast [playThemeSong]
to the end of the
when I receive playThemeSong
event?
Hint: its called an infinite loop for
a reason!
33
Step 18: Setting up our next actions -> Find a Key

In this game, I want my character to look for a key, wait until it is found, then have the backdrop change
to look like shes entered the castle and in another room.
Write the pseudocode here
Will you need another sprite to represent the key?
34
Step 19: Add your key sprite

Its your turn to take control! Add a new sprite one that is a key.
Remember to click add new sprite, click on the one that looks like a key, then click OK.
The key is pretty big. Lets initialize the size and key position when the game starts.
Make sure the Key is selected, then choose the Scripts tab.
On your own, add the rest of the blocks, as shown

in the image to the right.
TEST your game!
35
Step 20: Broadcast an event: findKey.

We are going to do something a bit tricky now. We are going to broadcast an event called findKey.
That broadcast is a shout-out. Youre yelling out a command to all the sprites that are set up to
receive it.
We want to broadcast an event that we will name findKey right after the witch hides.
Therefore we will put this broadcast on the witch sprites Script, at the end of the when flag clicked
blocks.
After you place the block, make sure to change the name of the broadcasted event.
Click on the arrow next to the broadcast dropdown, and click new message.
Name it findKey and click OK.
36
Step 21: Add Event Listeners (when I receive [findKey])

The witch sprite block sent a message. Now, lets have our main characters sprite event pick up that
message, like a friend who will always pick up a phone call.
Click on your main character sprite. (Mine is girl1.)
Locate when I receive [findKey] in the events area.
Drag that block to a blank area in the scripts window.
Make sure the dropdown reads findKey (other messages may appear by default)
Add the Looks block called think [text] for (a number) secs on to when I receive findKey block.
37
TEST!
Is it working as expected? If not, here are some common issues:
Your broadcast event is not within the witch sprite.

Your receive event is not within the girl sprite.
Your broadcast and receive events do not have the same name.
(Youre dialing the wrong number.)
Your think message is not attached to the when I receive findKey event on the main
character.
If your think message will not go away after a couple of seconds, look to see if you
selected the think . . . for (number) secs block, or just the think . . . block (the think
block wont go away.)
Pseudocode Time!
How do we know when our main sprite has found the key?
What Sensing blocks might signal that the key has been found.
What sprite should hold this information?
Where could we make the broadcast to
start being aware that the girl is touching the key?
Share your thoughts with the class.
38
Step 22: Add Event Listener (when I receive [findKey]) to the Key Sprite
Did your pseudocode read something like this?
Add a when I receive findKey to the key element to start off the process of waiting to be found.
Wait until the girl is touching the key.
After the girl touches the key then do something else (like change scenes).
Heres how we do it!
Use the colors of the blocks as guides to which Script category under which the blocks are listed.
You probably dont have castle4 added as a backdrop.
Go ahead and add a new backdrop. It may or may not
be castle4. I am switching mine to that because it looks
like the eerie interior of a haunted house. Feel free to
choose one of your liking.
Waiting around? Feel free to add a sound, like a door creak! Click the Sounds tab when you are on the
Key sprite to and choose a sound you want to play. After it is in your Sounds tab, you can add it to the
Keys findKey event listener (when I receive findKey) by clicking the Scripts tab, then looking under the
Sound category.
39
Step 23: On Your Own!

You have enough information to start taking control of your Sprites fate!
Team up, if possible, and come up with an action plan.
What do you want to have happen next? Should a ghost fly by, like the witch did?
Do you want to have the Sprite look for other objects, like when she looked for and
found the key?
Use the next page to

1) write out the plan for your scene, and
2) write down your pseudocode.
Good Luck, have fun, and discover more about following people, sharing your project,
adding your own artwork and more in the remainder of this workbook!
40
41
Share Your Project in Scratch

Save your project by going to File, then clicking Save Now.
Share your project with others by clicking the Share button.
share
The Project Page
Instructions
Notes and Credits
After you click Share, you will end up on your project page. Fill out the instructions, as well as the
Notes and Credits. If you are building off of someone elses project, its important to give them credit.
You would want the same, right?
42
Follow We Can Code IT on Scratch!

In the Search bar, type in WeCanCodeIT (no spaces), and click Enter on your keyboard.
Click the first link. Thats us!
Click
Click the Follow Button.
Click
43
Get Back to Your Stuff
Click the Folder icon to get back to your stuff.
Click
Click Title for Project Page

Click See Inside for Code
Click See Inside to get back to your Scratch Code

OR
Click the title of your project to see the Project Page.
44
Project Page
You can Share your project outside of Scratch with your friends by clicking Embed, and giving them the
URL of your project page. You can also add your project to Facebook, Twitter, or even code in a Web
Page from the Embed area.
First, Click Embed
URL of your project
Special
Embed
code for
web
sites.
45
Paint a New Sprite

Scratch allows you to select sprites from their library, but you may also paint your own sprites, upload
your own pictures to use as a sprite, and more!
Lets start by painting a new sprite.
Click the paintbrush icon above the spite window region.

The rightmost window changes to an artists canvas. Explore by dragging your mouse in this area. Click
different colors, Different shapes. See what they do!
You can use these sprites as characters and props, in the same way we used the cat and the food!
46
Upload an Image File to Use as a New Sprite
Click
the
Folder
Icon
Click the New sprite: folder icon.
Choose a file you want to upload from your computer, and double-click on it to start the upload.
47
Copy code from one sprite to another
1) Right Click and

choose Duplicate
2) Drag new block here.

Click on a current sprite to see its code.
For every block set, right-click and duplicate, then drag onto the new sprites thumbnail in the Sprites
window. This will copy the code from one sprite to the other.
Test.
You may want to delete the original sprite by right-clicking on that sprite and choosing delete.
Warning: when copying one sprites code to another, if you dont delete the original sprite, you may
have code that is run twice when you would only like it to run once. Make sure to review and test.
48
Keep Coding!
Links to We Can Code IT
Please follow us and spread the word by sharing our posts!
Web: http://WeCanCodeIT.org
Facebook: http://facebook.com/WeCanCodeIT
Twitter: http://twitter.com/WeCanCodeIT
Follow us on Scratch: http://mit.scratch.edu/users/WeCanCodeIT
Email us at hello@WeCanCodeIT.org
We have monthly workshops. Sign up for our newsletter online to get all the info!
We Can Code IT is a non-profit organization.
If you would like to donate money, time, and/or computers, visit us online, or call
844-WeCanCodeIT
49

Haunted House Adventure Game in Scratch

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Haunted House Adventure Game in Scratch

Caricato da

Copyright:

Formati disponibili

Haunted House Adventure Game in Scratch!

The base of this project is at

What is We Can Code IT

What is our goal?

Copyright 2014, We Can Code IT, Inc.

STEP 1: Open Scratch in your Browser.

It will look like this

//Comment: Do you see this page?

Copyright 2014, We Can Code IT, Inc.

Step 2: Join Scratch so you can save your project!

Copyright 2014, We Can Code IT, Inc.

Copyright 2014, We Can Code IT, Inc.

Step 3: Writing pseudocode

Copyright 2014, We Can Code IT, Inc.

What did you notice about your pseudocode?

Copyright 2014, We Can Code IT, Inc.

Step 4: Create with Scratch

On the scratch web page, click Create.

Step 5: What can you tell us about Scratch?

Copyright 2014, We Can Code IT, Inc.

Step 6: Saving a Project:

Look at the arrow in the image, above.

Then Click File -> Save Now.

Copyright 2014, We Can Code IT, Inc.

Step 6: Haunted House Adventure: Select your sprite (character)

Youll see the cat,

called Sprite1 is selected, and we are on the Scripts tab.

Select your main character, a.k.a. main sprite.

Copyright 2014, We Can Code IT, Inc.

My sprite is now ready for use!

Copyright 2014, We Can Code IT, Inc.

Click the Script Tab to select it.

block in to the scripts area.

Change space to up arrow

Copyright 2014, We Can Code IT, Inc.

Step 7: Haunted House Adventure move sprite around with arrows

Copyright 2014, We Can Code IT, Inc.

ALWAYS: Test and Debug!

How would you test to see if your Scratch code is working?

Did you test it? Is it working?

How do you fix these bugs?

Copyright 2014, We Can Code IT, Inc.

Step 8: Duplicating and Code Reuse in Scratch

Change to down arrow

Now Test and Debug!

Copyright 2014, We Can Code IT, Inc.

Step 8: What is missing?

Did you test the down arrow?

Copyright 2014, We Can Code IT, Inc.

Step 9: Deleting Blocks and Considering X-axis

Debug: what is the problem?

Understanding the x-axis and y-axis

To make moving a sprite around easier to program, we place an imaginary

Copyright 2014, We Can Code IT, Inc.

Step 10: On Your Own

If you are done and waiting,

Common issues at this stage:

Copyright 2014, We Can Code IT, Inc.

Step 11: Add a backdrop

Copyright 2014, We Can Code IT, Inc.

Step 11: Add a backdrop (continued)

Copyright 2014, We Can Code IT, Inc.

Step 12: Upload a Sprite and create some interaction

Click folder icon.