ROOK 10
You have seen it in the movies. You have played it in the mall. Now here’s your chance to
create your own version of the arcade and console hit Dance Dance Revolution!
CREATE THE SPRITES
Its all about the arrows!
Save the pic above to your computer or network drive. (copy and paste the pic into MS PAINT
or another photo editor - then save as a .jpg)
Start a new SCRATCH project.
Right click on the SCRATCH kitty and delete this SPRITE.
Click on the CHOOSE NEW SPRITE FROM FILE button.
Find the arrow pic that you just saved. Import it into SCRATCH.
Click on the Arrow and Choose the costumes tab, then choose edit. Use the fill tool and choose
the color box located in the bottom left hand corner of the color pallet (the one with both
white and gray squares). Fill the background.
For the game we will need four versions of this graphic – one for each of four directions the
arrow points.
Right click on the sprite and choose DUPLICATE to make four total arrows.
Now use the COSTUMES tab for SPRITE 1. Click the EDIT button to open the SCRATCH PAINT
EDITOR.
Use the ROTATE CLOCKWISE button to make a left pointing arrow.
Now is a good time to use the PAINT EDITOR’S SHRINK button to size the sprite down so that it
fits well in our game. Use the SHRINK button to reduce the SPRITE in size. Click OK and take a
look at how the SPIRTE fits on the game screen. Adjust as needed.
Click OK.
Continue this process with the other SPRITES until you have LEFT, UP, DOWN, RIGHT arrows as
shown here:
Use the mouse to place these SPRITES near the bottom of the game screen as shown.
These are our four TARGET arrows. They will stay in place here at the bottom of the screen.
Next we will create four moving arrows. These SPRITES are duplicates of the targets. As we
play the game they will come falling from the top of the screen. The user will try to click the
correct arrow key just at the moment when the falling arrow overlaps its duplicate target.
Right click and DUPLICATE SPRITE 1, SPRITE 2, SPRITE 3, SPRITE 4. This will create SPRITE 5,
SPRITE 6, SPRITE 7, and SPRITE 8. Rename the duplicated Arrows if needed.
So far, so good. Now we simply need to create a stack of SCRATCH blocks that will control the
arrows falling from the top of the screen.
SCRATCH MOVEMENT
SCRATCH uses an X:Y COORDINATE PLANE to define the game playing field.
At the center of the SCRATCH game screen X=0 and Y=0.
We move up and down on the screen by increasing or decreasing the Y value.
We move left and right on the screen by increasing or decreasing the X value.
In this case we want the arrows to fall from the top of the screen downward, these are all Y
values. We simply need to start them at Y=180 (the top of the screen) and decrease (subtract)
from the Y value until we reach -180 (the bottom of the screen.
Lets grab some tiles!
Click on SPRITE 5 (this is the first of the “falling” arrows). Go to the SCRIPTS tab.
For now we want the arrows to start when the green flag is clicked.
Grab the yellow WHEN GREEN FLAG IS CLICKED tile from CONTROL, and the blue SET Y TO __
tile from MOTION. Set the Y value here to 180. This starts the arrow out at the top of the
screen.
We want the arrow to fall from top to bottom on the screen. Thus, we simply need to decrease
or subtract from its Y value. Take a look at the blue MOTION menu. There is a blue tile made
just for this task.
Grab the blue CHANGE Y BY 10 tile and add it to the stack. Since we want to subtract here, we
wil use -10 (negative ten) for the CHANGE Y BY value.
Try it out by clicking the green flag. Notice not much happens. One little fall of -10 doesn’t
really catch our eye. If we can “loop” a number of these little falls together, we will be getting
somewhere.
Grab the yellow FOREVER tile in the CONTROL menu. Use it to wrap around the blue CHANGE Y
BY -10 tile. A FOREVER tile is used to create a LOOP of events to do over and over again.
Click the green flag to give it a test drive. Now we are getting somewhere! Notice the arrow
falls down the screen and crashes into the bottom edge. In order to produce a scroll effect,
let’s find some tiles that will sense when the arrow is bottom and start it back at the top.
Go to the blue SENSING menu and grab the X POSITION OF SPRITE 1 tile. Place it on the scripts
workplace.
From the dropdown menus change the tile to read Y POSITION of SPRITE 5.
Grab a yellow IF loop from the yellow CONTROL menu. Place it on the workplace.
In the green OPERATORS menu grab a green LESS THAN (the tile that looks like __<__ )
Remember the bottom of the screen y=(-180). The top has a Y VALUE of 180. Thus, if we react
when the y value for the arrow is less than say -175, we can then move it back to the top of the
screen. In other words, the y value of the arrow decreases until it is less than -175 at that point
we reset the Y VALUE of the arrow to 180. Here’s how.
Grab the yellow IF tile and place it in the stack.
Put the green LESS THAN tile in the hole of the IF tile
Now place the blue Y POSITION OF SPRITE 5 tile in the first hole of the green tile.
type in -175 in the remaining place – the right hole of the green tile.
The stack now says; “ IF the Y VALUE of the bug is less than -175 we are going to do
something”. What we are going to do is a bit “sleight of hand”. We are going to HIDE the
arrow, move it back to the top, and then make it reappear, SHOW.
From the purple LOOKS menu grab a purple HIDE tile and place it in the stack.
Next a blue SET Y TO ___. Type in 180 (the top of the screen).
Lastly a purple SHOW tile. Your stack should now look like this one.
Give it a test flight. “Houston, we have a falling arrow.”
Now is a good time to ALIGN ALL OF THE ARROW graphics so that they OVERLAP EXACTLY.
Simply stop the game and use the mouse to move all the falling SPRITES 5-8, untill they
completely covers up their targets – SPRITES 1-4.
One of the amazing things about SCRATCH is once we have a stack of tiles we like, we can
simply grab that stack and drop it on another SPRITE. The stack of tiles goes straight to the
SCRIPTS window of the new SPRITE.
Now that SPRITE 1 is falling – lets grab the stack of tiles we created for it and drop them onto
the other SPRITES to teach them to fall as well.
Grab the tiles from the SCRIPTS TAB of SPRITE 5 and drop them onto SPRITE 6, SPRITE 7, SPRITE
8.
FOR EACH OF THE FALLING SPRITES 5-8 we will need to change the value in the blue Y POSITION
OF SPRITE <_> to match the name of each SPRITE. You will need to make this change for SPRITE
6, SPRITE 7 and SPRITE 8.
Ok so far so good. Click the GREEN FLAG and give it a try. All the arrows should now be falling
from the sky. On with the rest of the game.
GAME PLAY
The game play dynamics of DDR are simple. We want the player to press the correct (1 out of
4) arrow key just when the falling arrow passes over its copy at the bottom of the screen. So
there are two conditions that need to be true for a “score”. The correct arrow key press, and
the two arrow SPRITES are touching each other. Lets get crackin!
Since the “score” conditions have to do with the target object – we are going to create them in
the SCRIPTS window for the target SPRITES – these are SPRITE 1, SPRITE 2, SPRITE 3, SPRITE 4.
Go to the SCRIPTS tab for SPRITE 1.
Lets start with the WHEN GREEN FLAG CLICKED and a yellow FOREVER IF <__> tiles.
This will start our “scoring” tiles working at the start of the game (WHEN THE GREEN FLAG IS
CLICKED) and keep them working FOREVER, looking for what we put in the IF conditions. Again
we are looking for SPRITES TOUCHING and a KEY PRESS. These are our IF conditions. Since
there are TWO conditions – we are going to need a green AND tile. We will use this green AND
tile to carry our two conditions.
Grab a green <_> AND<_> tile from the green OPERATORS menu.
The first condtion for success is the falling and target SPRITES touching.
Grab a blue TOUCHING? __ tile from the blue SENSING menu.
This SCRIPT is for target SPRITE 1. Its falling SPRITE is SPRITE 5. Choose SPRITE 5 (the falling
copy of this target arrow) and place the blue tile into the green.
Now the second condition – the key press.
Grab a blue <__> KEY PRESSED tile from the blue SENSING menu . Choose LEFT ARROW from
the dropdown window and place it into the green tile.
Perfect. The green AND tile does a great job of “gluing” together our two conditions. Now
BOTH conditions must be true for the AND condition to be true.
Place this new tile creation into the hole in the FOREVER IF <_> tile above.
Now our tile stack says “if SPRITE 1 is touching SPRITE 5 AND the LEFT ARROW KEY is pressed,
all at the same time – lets do something. What are we going to do? We are going to say
“PERFECT!”.
Grab a purple SAY <hello> FOR 2sec tile from the purple LOOKS menu, type in “PERFECT!”. type
in .5 sec. and place it in the FOREVER IF loop.
Give it a try. YEAH!!! We are almost done. Just a few more tweaks.
Grab the stack of tiles that we just created – the ones in the SPRITE 1 SCRIPTS tab. DRAG them
to SPRITE 2 (in the window at the bottom right of the screen) and drop them.
REPEAT this for SPRITE 3 and SPRITE 4. Now open the SRIPTS TAB for SPRITE 2. Notice our tiles
are already there waiting. HOWEVER, we need to Change the SPRITE name and the ARROW
KEY name for SPRITE 2, SPRITE 3, SPRITE 4. Here are the settings for each of the target SPRITES.
SPRITE 1
SPRITE 2
SPRITE 3
SPRITE 4
Time for another test drive. CLICK THE GREEN FLAG and see how it goes.
The game is really taking shape, yet, there is one obvious fix. All of the arrows are falling at the
same time. In the arcade DDR the arrows fall “with” the music, starting their fall at different
times. For our simulation of this, we simply need to put a timed “pause” before the arrow
starts its fall. We will also use a RANDOM function to choose RANDOM time lengths for this
pause so that the arrows fall independently. Here we go.
Grab the yellow WAIT 1 SEC tile from the yellow CONTROL menu.
The green PICK RANDOM <_> TO <_> tile is found in the green OPERATORS menu. Type in 3 for
the second value in this tile and place in the yellow WAIT tile
Now the green PICK RANDOM tile will choose a number for us (at random) from one to three.
We will use this as the duration of our wait.
Place the WAIT tiles between HIDE and SHOW.
Duplicate these changes for SPRITE 6, SPRITE 7, and SPRITE 8.
Test flight time!
ADD A BACKGROUND
Click on the STAGE icon>
Click on the IMPORT button to bring in a background picture.
ADD MUSIC
Use the SOUNDS TAB for the stage. IMPORT a music file for your game. SCRATCH will import
sound files in the .wav format.
Add these tiles to the SRIPTS for the STAGE to start the music as the game begins.
SCORE
Use the orange VARIABLES menu to MAKE A VARIABLE. Name the VARIABLE “SCORE”.
Click OK.
A SCORE box pops up on your game screen.
The player gains SCORE points by a successful PERFECT! event. Therefore we simply need to go
back to the target SPRITES and add to the score each time the SPRITE says “PERFECT!”
Lets start with the SCRIPT for SPRITE 1 – our first target sprite.
Find the orange SET SCORE TO 0 tile in the orange VARIABLES menu. Put this tile at the top of
the stack to RESET the SCORE each time the game is played.
Now find the orange CHANGE SCORE BY 1 tile and put it just above or below the purple tile.
Repeat this process for the other target SPRITES. (Put an orange CHANGE SCORE BY 1 tile in the
SRIPTS for SPRITE 2, SPRITE 3, SPRITE 4)
That’s just about it. Have fun moding the different elements of the game to make it your own.
Here are a few things to think about.
SPEED/LEVELS
The blue CHANGE Y VALUE BY <_> tile controls the speed of the falling arrows. Increasing this
value will increase the falling speed and make the game more difficult. Reducing this value will
slow the falling arrows and make the game easier. This value is found in the SCRIPTS for
SPRITES 5-8.
TIMER
How might you use a timer to take the player through different levels of the game?
DIFFERENT “PERFECT!” REWARDS
The “PERFECT!” reward is offered when the player presses the correct key and the falling arrow
TOUCHES the target. How could we use the Y position of the falling arrow to create other
responses. For example a “TOO SOON!” response if the key is pressed early. “TOO LATE! for a
late press, and “PERFECT!” for a key press when the falling arrow is only a very few Y values
away from its target?
MOVEMENT WITH THE MUSIC
All music has a particular speed or tempo. Musical tempo is measured in beats per minute,
bpm. A speed of 120 bpm is music that has two beats or pulses every second! How could you
use the programming tools of SCRATCH to sync the movement of the arrows with the tempo of
the accompanying music?
Have fun – enjoy – keep dancing!
dr vic 4/10