Student Instructions

Using Multiframe Animations

In the sample defender game the sprites themselves were animated. Before getting started on programming this game, take a minute to get familiar with this new way of animating sprites.

Do This

This program already includes several sprites but they don't yet have any animations.

• Go to the Animation Tab and check out the multi-frame animations already added to your project. Choose one for each of your characters.
• Remember you can use setAnimation to give your sprites animations you've created in the Animation Tab.

Student Instructions

Slow Down

Nice work! Time to start learning how to control these multiframe animations.

Do This

Your sprites should be animated but they're moving really quickly.

• Head back to the Animation Tab. Underneath each animation you should see a slider.
• Use these sliders to slow down your animations so they look more realistic.

Student Instructions

Editing Multiframe Animations

Your sprites will look a lot more realistic if they turn around when they're moving. You can switch back and forth between multiframe animations when the user presses different keys.

Do This

Read this code and run the program. Make sure you know how the sprite responds to the arrow keys.

• In the Animation Tab, create a copy of the alien animation by clicking the following button:
• Use the tool to flip your animation. Make sure you flip both frames using this button:
• Rename your new animation.
• Use your new animation and old animation so that the alien faces the correct direction when moving. Where do you think you'll need to set the sprite's animation in your code?

Student Instructions

Getting Started: Set Animations

You should have already reviewed the planning guide for this project. A lot of the work to turn this project guide into a working game has already been started. Based on the project guide you're going to do the rest of this work.

Do This

Before we get started you'll want some better animations for each of your sprites.

• In the Animation Tab are animations for each of your sprites. Go look at what they are.
• In your code give each sprite its appropriate animation. Use the ones provided for now but later you'll be able to go change them.
• Head to Level 4 if you need help remembering how to do this.

Student Instructions

Moving The Enemies

It's time to start writing the code that will move your sprites. To begin you'll need to get your enemy sprites to a random position and moving across the screen.

Do This

At the top of your program, after you create each enemy sprite, write code that will move it to the correct position and give it the correct velocity.

• Use sprite.x to set the x position to 0.
• Use sprite.y to set the y position should be a random number between 150 and 250.
• Use sprite.velocityX to set the x velocity to 2.

Test your program. Your enemy sprites should now be moving across the bridge.

Student Instructions

Touching the Cake

If the enemies get all the way across to the cake you should place them back at the left side of the screen and decrease the score. To start you'll write code for only one of your enemies.

Do This

Inside the enemiesTouchCake function you'll need to write code that checks when a ladybug is touching the cake, resets its position, and changes the score.

• Use an if and isTouching to detect whether enemy1 has touched the cake.
• Inside your if block place code that:
• sets enemy1's x position back to 0.
• sets enemy1's y position to a random number between 150 and 250.
• uses the counter pattern to decrease the score by 2.

(Hint: You can reuse some code you already wrote)

Test your code. One of your ladybugs should now reset when it gets across to the cake, and the score should go down by 2.

Student Instructions

Touching the Cake: Second Ladybug

Your first enemy sprite should now be resetting when it gets to the cake. Now you'll want the other ladybug to reset as well.

Do This

Inside the enemiesTouchCake function you should have written code that resets enemy1.

• Copy the entire if-statement you wrote in the last level (Ctrl-C).
• Paste the code inside of the enemiesTouchCake function, just below the last one (Ctrl-V).
• Change the name of the sprite in that code from enemy1 to enemy2.

Test your code. Now both bugs should reset when they touch the cake.

Student Instructions

Creating Functions

Your program now includes code in two places to set the enemies on the left side of the screen at a random y location. You can create functions to reset each of your two enemies to remove repetitions from your program. This will make your program easier to read, allow you to change it more easily, and allow you to quickly reset your sprites at other points in your program if you need to.

Do This

• At the bottom of your program create two new functions, setEnemy1 and setEnemy2.
• Inside each of these functions place the code that sets the enemies on the left side of the screen and gives them a random y position.
• Wherever the code for setEnemy1 and setEnemy2 appears in your program replace them with a call to the functions you just created.

Student Instructions

Moving Left and Right

Now that your enemy sprites are moving correctly, it's time to write the code to move your player. For now you'll just need to get your character moving left and right and changing its animations.

Do This

For this level you'll be writing code inside the movePlayer function.

• Use an if block along with keyDown to detect when the "right" arrow is pressed.
• Use sprite.x and the counter pattern increase the player's x position by 3.
• Use another if block to move the player to the left when the "left" arrow is pressed. This time you'll need to decrease the player's x position.

Test your game. Your character sprite should now move left and right when you press the left and right arrows.

Student Instructions

Moving Up and Down

You'll want your player sprite to move up and down as well.

Do This

For this level you'll still be writing code inside the movePlayer function.

• Use an if block along with keyDown to detect when the "up" arrow is pressed.
• Use sprite.y to make the player go up by 3 using the counter pattern.
• Use another if block to move the player down when the "down" arrow is pressed.

Test your code. Your character should now move in all 4 directions.

Student Instructions

Change Player Animations

Right now your player is always facing the same direction. You can make things look a lot more realistic by switching between animations. Your player should switch between a left-facing and right-facing animation depending on which key was last pressed. Remember, you can quickly copy and edit animations inside the Animation Tab.

Do This

• Inside the Animation Tab copy the animation of your player sprite.
• Flip each frame of the new animation so that the sprite is facing in the opposite direction.
• Rename your new animation.
• Use the setAnimation command inside the movePlayer function so that the player changes the direction it is facing when the "left" and "right" arrows are pressed.

Student Instructions

Displace Enemies

It's time to write code for some more sprite interactions. Your player sprite should displace the enemy sprites.

Do This

For this level you'll be writing code inside the displaceEnemies function.

• Write code that makes player displace both enemy sprites.
• Test your program to make sure your player is displacing enemies but they keep moving right after the player moves away.

Hint: You can use sprite.debug to see your sprites' colliders if you need to debug your program.

Student Instructions

Touching the Water

The last part of the game that you'll need to write is the code to reset the sprites when they touch the water. Luckily you should have already written functions that reset each sprite, so you'll just need a good way to know when either sprite leaves the bridge. Start by writing the code for a single enemy and then copy-paste and make small changes to create code for your second enemy.

Do This

For this level you'll be writing code inside the enemiesTouchWater function.

• Use an if statement to check whether enemy1 is off the top of the bridge by checking whether its y value is below 140. Within your if statement:
  • use your setEnemy1 function to reset the sprite.
  • add 1 to the score.
• Use an if statement to check whether enemy1 is off the bottom of the bridge by checking whether its y value is above 260. Within your if statement:
  • use your setEnemy1 function to reset the sprite.
  • add 1 to the score.
• Test your program for the first enemy sprite. Make sure the sprite is resetting and the score goes up.
• Once it is working copy and paste the code you wrote to create the same behavior for enemy2. You'll need to change the name of the sprite and the name of the functions you use.

Student Instructions

Make It Your Own

You just walked through someone else's plan for creating a game, so now it's time to make it your own. What additional features or challenges do you want to create?

Do This

Select one of the challenges below to add to the game or come up with a challenge of your own.

• Change the visuals of the game so that your player, enemies, or cake look different.
• End the game when the enemies get to the cake and print the score. For an extra challenge end the game only after 3 enemies get through.
• Randomize the speed of the enemies.
• Create a new background that shows up when players reach a higher score.