This week we built a Mad House with different rooms that you could go into and if you found the right place to click something would happen.
The coding for this project shows how you can re-use code, this has 2 benefits, it makes coding quicker and it also makes all the code consistent, so it all looks the same.
As always, it’s best to have a little bit of a plan.
We decided on the following:
- 4 Rooms – each room would have 2 Sprites
- Clicking a room would make it large
- Clicking the Space key would make the room small again
- We would build one room first so we could copy the code.
The first room we created was the Kitchen, the plan was when you clicked on the saucepan, it would boil over.
The Sprites need to fill the whole screen and also need a coloured background to ensure that the Mouse Click is recognised by the code.
These are the 2 Sprites that I built:
It’s not easy to see, but the “On” Sprite has some flames coming out of the pot.
Because we are having 4 Sprites, when the program starts we need to make the Sprite a quarter of it’s full size and move it to one of the corners of the Screen. We also discovered that we would need a variable (a flag) to indicate if the room was Large (1) or Small (0). We did this in the GreenFlag code like this:
We moved to top left corner.
we set the size to 50% (this makes it fill a quarter of the screen
We set the variable to 0 (0 = small, 1 = large)
We set the start costume to the Off costume.
Next step was to write the code for when the Sprite was clicked, this would make the Sprite fill the screen, slowly! It would also set the flag to say that the Sprite was large.
The biggest piece of the code was making the Sprite grow slowly, we did it in 50 steps, changing the size was easy as it just changed by 1 each step, but the X and Y positions were a little trickier as we needed to make sure they were going in the right direction and also changing by the right amount to reach the full size in 50 steps.
Only run this code if we are small (0)
Make we can’t run again set the flag to 1.
Make sure we are in front of the other Sprites
X needed to go from -120 to 0, 2.4 each time
Y needed to go from 90 to 0, so -1.8 each time
Size was simple, 1 each time
And to make it nice and smooth, we wait for .1 of a second in each step.
We then moved on to the code that should run when the Space key is pressed, this would reverse what happened when the Sprite was clicked.
Again, we only run if we are large (1)
The X and Y changes are the reverse of the ones above.
And finally we set the size back to small again (0)
Now we can move on to the code that changes the costume if the user clicked on a certain spot on the screen.
We decided that the user should click on the pan for the costume to change, so first we needed to work out where the pan is on the screen (It’s X and Y positions). This is easy in Scratch 2, when you move the mouse across the Stage the X and Y position is shown at the bottom of the screen, so you just need to place the Mouse on the 4 sides of the Pan and make a note of the X and Y values. X values for the min and max left/right positions, Y values for the min and max up/down positions. Hopefully this picture will help:
We needed to place the Mouse on each of the positions indicated, which then gave use the correct values to place in the code.
The code then looked like this:
We loop forever
Only check X and Y if we are large (1) and the Mouse is clicked. Then check where the Mouse is. This where we use the values we got when checking where the Pan was on the screen.
And that is it for the first Room.
The Second Room.
Now that all the code is written for the first Room, the second Room becomes a lot easier, we simply duplicate the first Room Sprite and then make the following changes to the code:
- Change the 2 Costumes to something else for this new Room.
- Add a new Variable for this Room
- Update all the places where the Variable is set to this new one.
- Update the starting X and Y positions to one of the other corners of the Stage.
- Update the X and Y changes when the Room grows and shrinks to make sure it is going to the centre of the screen correctly and also back to it’s own corner.
- Update the X and Y values to a new location on the Screen, depending on what you have drawn on your new Costumes.
The Finished Program
I only got 3 Rooms finished and this what it looked like at the end:
If you want to improve the program you can look at adding the following:
- The final Room to make it 4 rooms.
- Extra code change the Costume back to normal if the item is clicked again, this would check what Costume is currently, this can be done using the “costume #” from the Looks blocks.
The one I did in the class is available on the Scratch Web Site:
Project Name : ClassVersion-MadHouse
UserId : cdadvancers1819
Password : advancers