Creating a Maze Game in Tynker

Size: px

Start display at page:

Download "Creating a Maze Game in Tynker"

Phyllis Washington
6 years ago
Views:

Creating a Maze Game in Tynker This activity is based on the Happy Penguin Scratch project by Kristine

To create this Maze the following characters have been used: Three different Fish characters from the

category An Arrow (created in Pages) used four times at different angles (0º, 90º, 180º and 270º) The

initially drawn with the pencil tool for the outline, then the fill tool to colour in and finally the

1 Creating a Maze Game in Tynker This activity is based on the Happy Penguin Scratch project by Kristine Kopelke from the Contemporary Learning Hub at Meridan State College. To create this Maze the following characters have been used: Three different Fish characters from the Ocean category in Tynker The Penguin character used twice (with different costumes) from the Winter category An Arrow (created in Pages) used four times at different angles (0º, 90º, 180º and 270º) The Stage or Background was drawn in Tynker using the light blue colour to denote the water hazards - initially drawn with the pencil tool for the outline, then the fill tool to colour in and finally the eraser tool to smooth out some corners. Starting up Open the Tynker App - go to the Projects page - Create New Project - use a Blank Template Creating a Maze Game in Tynker Page!1

A new blank project opens with a default character Use

appears at the top of the screen Select the three dots

2 A new blank project opens with a default character Use the trash can icon to delete the default character you will be asked to confirm this. Setting the Stage Select the code option The Stage icon appears at the top of the screen Select the three dots icon to bring the Properties option Select Add Scene Creating a Maze Game in Tynker Page!2

The Add an Actor window opens (although all the options are about the Stage not actors) select Draw

categories to use one of the images that come with the App If you use Import Photo to get the example

the stop sign in the bottom right corner select the arrow key to finish when you leave the Paint

draw the outline of the water hazards, fill them using the paint can (fill) tool and neaten up using

3 The Add an Actor window opens (although all the options are about the Stage not actors) select Draw New to create your own select Import Photo to get an image from the Camera Roll or select one of the categories to use one of the images that come with the App If you use Import Photo to get the example image from the Camera Roll it will appear small in the paint window use the eraser tool to get rid of the stop sign in the bottom right corner select the arrow key to finish when you leave the Paint Canvas window you will be asked to Save Changes If you use the Draw New option use the pencil tool to draw the outline of the water hazards, fill them using the paint can (fill) tool and neaten up using the eraser tool. At the end the Stage should look similar to this example Creating a Maze Game in Tynker Page!3

Adding characters To add a character select the plus sign in the top right corner of

the Ocean category Blue Fish Blow Fish Yellow Fish add the Penguin character from the

select the Winter category the Penguin is the first asset shown when you select the

Properties by default: the name of the character is Cute Penguin and it has 9

4 Adding characters To add a character select the plus sign in the top right corner of the stage The Add an Actor window opens for this example add: 3 different fish from the Ocean category Blue Fish Blow Fish Yellow Fish add the Penguin character from the Winter category TWICE once for the Mum and once for the Baby for example when you select the Winter category the Penguin is the first asset shown when you select the penguin it appears in the centre of the stage Select the Pen tool to open the Properties by default: the name of the character is Cute Penguin and it has 9 different costumes for this example we need to make a couple of changes Creating a Maze Game in Tynker Page!4

change the Name to PenguinMum change the Scale to 40 delete all

near the bottom right corner as shown Add a second Penguin character to

BabyPenguin change Scale to 20 delete all costumes except Cute Penguin

5 change the Name to PenguinMum change the Scale to 40 delete all costumes except Cute Penguin 8 Move the PenguinMum character to a spot near the bottom right corner as shown Add a second Penguin character to the Stage this one will become the baby penguin change Name to BabyPenguin change Scale to 20 delete all costumes except Cute Penguin 7 move BabyPenguin to a spot near the top left corner Creating a Maze Game in Tynker Page!5

Add the 3 Fish from the Ocean category to the spots as shown the only change to their properties is to set each Scale to 20 Moving

On an ipad it is more efficient to tap icons on the screen rather than use a keyboard.

It would also be possible to use say the Mitten from the Winter category or the Arrow from the Fantasy category and use them to point in

6 Add the 3 Fish from the Ocean category to the spots as shown the only change to their properties is to set each Scale to 20 Moving around The original game was created in Scratch on a computer and so the characters were moved around using the keys on the keyboard. On an ipad it is more efficient to tap icons on the screen rather than use a keyboard. For this example I am using an arrow key created in Pages and saved to the camera Roll. It would also be possible to use say the Mitten from the Winter category or the Arrow from the Fantasy category and use them to point in the four directions needed (Up, Down, Left and Right). use the Import Photo option when adding a character find the image in the Camera Roll you need to add the movement symbol four times up down left right Creating a Maze Game in Tynker Page!6

20 Angle is 270 position the four movement symbols as shown Coding the Maze Game Select the Code symbol at the top of the screen each

7 change the properties for each of the four symbols for example for the UP symbol Name is up Scale is 20 Angle is 0 the LEFT symbol: Name is left Scale is 20 Angle is 90 the RIGHT symbol: the DOWN symbol: Name is down Scale is 20 Angle is 180 Name is right Scale is 20 Angle is 270 position the four movement symbols as shown Coding the Maze Game Select the Code symbol at the top of the screen each of the characters are shown Select a character to see any code blocks most will have NONE at this point Creating a Maze Game in Tynker Page!7

Deleting a Code Block If a Code Block needs to be deleted drag it over the left column and a rubbish bin will appear let go on top of the rubbish bin and the code block will be deleted.

Adding a Code Block Each character will eventually have its own code block - let s start with the four movement characters as they have very simple code blocks they all look the same so you will need

8 Deleting a Code Block If a Code Block needs to be deleted drag it over the left column and a rubbish bin will appear let go on top of the rubbish bin and the code block will be deleted. This needs to be done for the two Penguin characters. Adding a Code Block Each character will eventually have its own code block - let s start with the four movement characters as they have very simple code blocks they all look the same so you will need to check the name when you select a character Remember each of the movement characters are replacing keys on the keyboard - so the UP character will need to broadcast the up movement when it is touched Control/Flow category is where both the needed Coding Blocks can be found Drag them onto the programming area and click together as shown Creating a Maze Game in Tynker Page!8

Initially the event to broadcast is blank Tap in the blank space and the Choose

BabyPenguin that will be moved around the Maze using these four movements In the

find the when I receive coding block You will need 4 of these (one for each

will need to set it to the correct movement event, then point the BabyPenguin in the

9 Initially the event to broadcast is blank Tap in the blank space and the Choose Event window will appear for this event type up Complete the other three It is the BabyPenguin that will be moved around the Maze using these four movements In the coding area select BabyPenguin In the Control/Flow coding blocks scroll until you find the when I receive coding block You will need 4 of these (one for each movement) - drag them into the programming area To complete each coding block you will need to set it to the correct movement event, then point the BabyPenguin in the correct direction and also set how far to travel with each press.. Creating a Maze Game in Tynker Page!9

Tap the blank space to get the list of events select

Adding Motion Coding Blocks Select the Motion category

and move Drag them and click into place as shown (do

10 Tap the blank space to get the list of events select one for each code block as shown above. Adding Motion Coding Blocks Select the Motion category The two Coding Blocks we need are point in direction and move Drag them and click into place as shown (do this for all four movement events) Creating a Maze Game in Tynker Page!10

Now we need to change the values for UP the

pixels moved to 50 (this may need to change

the Maze) complete the other three directions

each of the four movement buttons move the

11 Now we need to change the values for UP the direction needs to be 0º test by changing the pixels moved to 50 (this may need to change depending on how much space you have created in the Maze) complete the other three directions Time to test press the Play button check that each of the four movement buttons move the BabyPenguin as expected Creating a Maze Game in Tynker Page!11

If she touches the water she will be returned back to the start position.

12 Completing the Maze coding The Maze story Your task is to help BabyPenguin get back to PenguinMum. Along the way BabyPenguin needs to collect all three Fish and also keep out of the water as she cannot swim. If she touches the water she will be returned back to the start position. To keep a record of how many Fish she has collected we need to keep Score. Keeping Score Select the Functions Coding Blocks and choose New Variable create a New Variable called score it appears at the top of the Functions coding blocks Creating a Maze Game in Tynker Page!12

At the start of the game the score is set to zero this can be added to the code of the Stage Select

programming area From the Functions coding blocks drag the set select variable to 0 coding block and

variable area the code now reads on start set score to 0 Next we need to add some code to each of the

13 At the start of the game the score is set to zero this can be added to the code of the Stage Select Stage in the code area From the Control/Flow coding blocks drag the on start coding block into the programming area From the Functions coding blocks drag the set select variable to 0 coding block and the variable score that we created into the programming area drag the variable score into the select variable area the code now reads on start set score to 0 Next we need to add some code to each of the Fish so that when BabyPenguin collects that fish the score goes up by 1 Creating a Maze Game in Tynker Page!13

Fish Code All three Fish have exactly the same code First when the game starts they each need to be shown on the Stage First use the on start block from the

score will change by 1 and the Fish will disappear from the Stage.

14 Fish Code All three Fish have exactly the same code First when the game starts they each need to be shown on the Stage First use the on start block from the Control/Flow category From the Looks category add the show coding block Next the Fish have to wait until the BabyPenguin collects them - at that point the score will change by 1 and the Fish will disappear from the Stage. from the Control/Flow category drag another on start coding block and add a forever coding block and also add an if true then block from the Sensing category add the touching select actor select BabyPenguin for touching Creating a Maze Game in Tynker Page!14

15 from the Functions category add score and change select variable by 1 from the Looks category add hide putting it all together it looks like Creating a Maze Game in Tynker Page!15

Baby Penguin Code We have already added the code blocks to move the BabyPenguin - now we have to ensure that the BabyPenguin also starts the game at the

16 To finish drag each of the two coding blocks to each of the other two Fish Check that all three fish have the same two blocks of code - the one for the start and the one for when they are collected by BabyPenguin. Baby Penguin Code We have already added the code blocks to move the BabyPenguin - now we have to ensure that the BabyPenguin also starts the game at the same position and also returns to the starting position if it touches the water The following coding blocks will be needed Control/Flow Motion x = y = 320 Sensing choose the colour you used for the water Creating a Maze Game in Tynker Page!16

The BabyPenguin finished code should look like the following Penguin Mum Code PenguinMum initially asks for help in getting BabyPenguin home, making sure BabyPenguin collects all three

If you help BabyPenguin return home with all three fish PenguinMum thanks you - if BabyPenguin gets home without all three fish PenguinMum reminds you that BabyPenguin has to collect all

17 The BabyPenguin finished code should look like the following Penguin Mum Code PenguinMum initially asks for help in getting BabyPenguin home, making sure BabyPenguin collects all three Fish and stays out of the water because she can t swim. Then PenguinMum waits for you to help BabyPenguin to collect all three fish and return home. If you help BabyPenguin return home with all three fish PenguinMum thanks you - if BabyPenguin gets home without all three fish PenguinMum reminds you that BabyPenguin has to collect all three fish. For the first part of the PenguinMum code you will need: from the Control/Flow category the on start coding block and from the Looks category two say Hello for 2 coding blocks Creating a Maze Game in Tynker Page!17

The start of the game will then become PenguinMum saying something like the following: change the time if necessary

Functions For this section of code PenguinMum is waiting for BabyPenguin to get home by touching her.

mean the variable score equals 3 if they have all been collected then the game is over if some of the Fish have not

18 The start of the game will then become PenguinMum saying something like the following: change the time if necessary The rest of the PenguinMum code requires the following coding blocks: Control/Flow Looks 3 of these Sensing Math Functions For this section of code PenguinMum is waiting for BabyPenguin to get home by touching her. When BabyPenguin is touching PenguinMum it also necessary to check that all 3 Fish have been collected this would mean the variable score equals 3 if they have all been collected then the game is over if some of the Fish have not been collected BabyPenguin will have to continue collecting them. See next page for the full PenguinMum code Creating a Maze Game in Tynker Page!18

PenguinMum Code first check to see if BabyPenguin is touching second check to see if all the fish have been collected if all the fish are

Add some sound effects to enhance the play (for example a cowbell sound whenever BabyPenguin touches the water and is sent back to the

Use different costumes for BabyPenguin during the game (for example the Cute Penguin 4 costume could be used whenever a Fish is collected) 3.

19 PenguinMum Code first check to see if BabyPenguin is touching second check to see if all the fish have been collected if all the fish are collected end of game otherwise keep collecting the fish Test the game to check that everything works. Extension Activities 1. Add some sound effects to enhance the play (for example a cowbell sound whenever BabyPenguin touches the water and is sent back to the start) 2. Use different costumes for BabyPenguin during the game (for example the Cute Penguin 4 costume could be used whenever a Fish is collected) 3. Enhance the scoring options - (for example each fish collected earns 10 points and each time BabyPenguin touches the water 2 points are lost) 4. Add another character to keep the score updated as fish are collected or points lost by touching the water. Creating a Maze Game in Tynker Page!19

20 More Extension Activities 5. Add another character (perhaps a shark) that moves across the stage at random and if it touches BabyPenguin the game ends 6. Finally, you could create a similar sort of Maze game with completely different characters for instance an Office where IT Girl has to collect all the technology equipment and return it to her office desk Creating a Maze Game in Tynker Page!20

Let s start by making a pencil, that can be used to draw on the stage.

Paint Box Introduction In this project, you will be making your own paint program! Step 1: Making a pencil Let s start by making a pencil, that can be used to draw on the stage. Activity Checklist Start