Project 15
What’s a desert frog to do when faced with racing cars, speeding motorcycles, and oh-so-slow camels? That’s what your player must contend with while crossing busy highways in Traffic Dodge!
In this project, you build your own Frogger-style game that includes levels. You build game pages — both Level 1 and Level 2. These are the pages where the player plays the game. Then you create a splash page — a page that introduces your game and gives a backstory.
The player controls the frog by using keyboard controls. If the jumping frog and a vehicle collide, the hit is announced, and the frog shape changes to appear squished. Also, the game has a variable that indicates lives remaining — each hit subtracts one life, and when the player runs out of lives, the game is over. Get jumping!
Don’t feel limited to jumping a frog through obstacles. You can choose any "mark" to move through any obstacle:
Begin creating your Traffic Dodge game by starting a new project as follows:
A new project opens.
The level 1 game page is where the player starts playing the game. Paint the level 1 game page and name it as follows:
The Painting/Clipart palette opens.
Painting the background gray — not black — makes it easier to see the turtle objects (which are black) when you add them to the workspace.
Figure 15-1 shows what the traffic scene and sky look like in the example.
The name of the page now shows in the lower-left corner of the window (refer to Figure 15-1).
The frog is the character that the player moves through the game. The frog character is a turtle object that wears one of two shapes: greenie or squished. Follow these steps to create the frog character:
Now is a good time to find the coordinates of the frog turtle position … you’ll need them later! To find the coordinates, on the backpack State tab, note the Xcor and the Ycor — the (x,y) coordinates — of this position. Write them down. Click the X button to close the backpack of frog.
The Shape Editor opens.
The frog shape for the example is shown in Figure 15-3.
The Shape Editor closes, and the greenie frog shape appears in a spot on the project Shapes pane. This is the shape the frog turtle usually wears.
The completed greenie and squished shapes now appear on the project Shapes tab, as shown in Figure 15-4.
The turtle now wears the shape.
If you accidentally click somewhere other than the turtle, the frog shape will appear on the background — simply right-click (Windows) or Ctrl-click (Mac) the shape and select Remove from the pop-up menu to get rid of it.
Traffic characters are turtles wearing a variety of shapes and speeding along the roads. Follow these steps to create the traffic characters:
The Painting/Clipart palette opens.
The turtle now wears the vehicle shape.
For east, the heading is 90. For west, the heading is 270. For the example, set the heading to 90, as shown in Figure 15-5.
The default size of a turtle is 40. For the example, enter 30 for the size, as shown in Figure 15-5.
Click the vehicle shape thumbnail in the upper-left corner of the turtle backpack to apply a change and see the effect of the change.
A copy of your traffic turtle appears.
Be sure to form lanes of traffic moving in both directions, and set the headings of the vehicles to match their directions of movement.
In Figure 15-6, you can see four lanes of traffic in Level 1 made up of elephants, motorcycles, race cars, and buses.
Freeze your frog turtle and your traffic turtles to prevent the player from clicking them and moving them during the game. Right-click (Windows) or Ctrl-click (Mac) each turtle and then select Freeze from the pop-up menu.
Traffic moves through the lanes and gets in the way of the frog crossing safely. Turtle objects in a single lane should all move at the same rate of speed, but different lanes can move at different speeds. Make traffic move as follows:
For example, set the speed value in the OnClick field to fd 10 wait 1.
An easy way to stop a moving turtle — and the action of the entire workspace — is to click the Stop All button on the toolbar.
Your game needs a way to show how many lives are left. Traffic Dodge begins with three lives, and each time the player's frog is hit by a traffic turtle, it loses a life. When the player has lost all three lives, the game is over.
In projects with a single page, you can just create a text box variable for lives. But the value of a text box variable exists on the page where it’s located. This means that you can’t carry over the value of a lives variable from a Level 1 page to a Level 2 page.
A project variable is a variable that exists everywhere in your game and whose value carries over from one page to another. To create a project variable that will be used to keep track of frog lives, enter the following command in the Command Center:
createprojectvar "livesremain
This command creates a new project variable with the name livesremain. The new project variable is visible on the Project pane, as shown in Figure 15-7.
The livesremain project variable tracks how many lives the frog has left. To show this value to the player, create a text box and then show the livesremain value in the text box. Follow these steps:
This text box will be used to show how many lives remain.
Don’t set the text box to transparent — text boxes that show information that changes, such as variable values, must remain opaque.
The code for showing the value of the livesremain variable in the lives text box will be added later in the “Write a Play Procedure” section.
A splash page is the first page players see when they open a game. It shows the title of the game and a colorful graphic with the main characters. The splash page usually explains the goal of the game and how to play. It may also show a short backstory that explains how the characters found themselves in the middle of the action.
Follow these steps to create the splash page:
A new page appears.
The Painting/Clipart palette opens.
The selected image is stamped to fill the entire background area.
The name of the page — splashpage — now shows in the lower-left corner of the window.
The title, instructions, and backstory for the example are shown in Figure 15-8.
Your game will use a start procedure to move to the Level 1 game page, set the lives remaining project variable to a starting value, and then begin the game action.
to start
gamepage1
setlivesremain 3
play
end
When the start procedure is executed, it moves to gamepage1. It then sets the value of the livesremain project variable to 3. Next, it runs the play procedure (which you will write later) to begin the game action.
After you've written the start procedure, MicroWorlds EX now recognizes it as a new command that you can use. Follow these steps to create a button on the splashpage to run the procedure:
The dialog box for the example is shown in Figure 15-9.
The Start button is added to the workspace of the splashpage.
Figure 15-10 shows the completed splash page, start procedure, and Start button.
One function of the Start button is moving from the splashpage to gamepage1. You can add a page transition to make the change from one page to another more eye-catching. Add a page transition as follows:
Add the transition to the page you are going to.
The Transitions dialog box appears, as shown in Figure 15-11.
The transition is applied to the page. Test the transition by using the arrow keys to turn away from the page, and then turn back to the page.
A play procedure begins the game action by placing the correct shapes on all characters, positioning characters in their starting positions, and then setting all the characters in motion. Turn to gamepage1.
to play
lives, ct pr livesremain
frog, setshape "greenie
frog, setpos [0 -190]
everyone [clickon]
end
Replace [0 -190] with whatever Xcor and Ycor values you discovered in the earlier section “Create a Frog Character.”
When the play procedure is executed, it tells the lives text box to clear its text and then print the value of the livesremain project variable in the box. Next, the play procedure tells the frog turtle to set its shape (setshape) to "greenie. It then positions the frog turtle at its starting coordinates — the Xcor and Ycor you found earlier. Finally, it clicks on all the turtles on the current page, activating the motion commands in their OnClick fields (everyone [clickon]), setting the game in motion.
A jump procedure lets the player jump, or control, a game character by using the keyboard.
For a Windows game:
to jump
let [key readchar]
if (ascii :key) = 37 [seth 270 fd 40]
if (ascii :key) = 38 [seth 0 fd 40]
if (ascii :key) = 39 [seth 90 fd 40]
if (ascii :key) = 40 [seth 180 fd 40]
end
For a Mac game:
to jump
let [key readchar]
if (ascii :key) = 28 [seth 270 fd 40]
if (ascii :key) = 30 [seth 0 fd 40]
if (ascii :key) = 29 [seth 90 fd 40]
if (ascii :key) = 31 [seth 180 fd 40]
end
The jump procedure reads the arrow key pressed on the keyboard by the player. It then points and moves the frog in the associated direction. Every arrow key is assigned a different compass direction so that the turtle points in the chosen direction and moves a small distance. (See Project 12 for details on writing a procedure for keyboard control of a character.)
Tell the frog turtle to use the jump procedure as follows:
After the play procedure player “clicks on” the frog, the player can use the keyboard arrows to jump it through the traffic.
Leave the frog’s backpack open.
A hit procedure lets the frog turtle know it has collided with a traffic turtle.
to hit
frog, setshape "squished
wait 10
announce [SPLAT]
setlivesremain livesremain - 1
if livesremain = 0 [endgame]
play
end
When it's executed, the hit procedure checks for a collision between the frog and any other turtle. If a collision occurs, it sets the alternate shape of the frog (setshape "squished), waits briefly (wait 10), and then announces the collision (announce [SPLAT]). It then removes one life (setlivesremain livesremain - 1).
Next, the procedure checks to see if the player has lost all lives remaining (if livesremain = 0). If so, it runs the endgame procedure (which you’ll write later in this project); otherwise, it runs the play procedure to continue the gameplay.
Tell the frog turtle to use the hit procedure. On the backpack Rules tab, type hit in the OnTouching field. Now whenever the frog collides with a traffic turtle during the game, the hit procedure is executed.
An endgame procedure ends the game action when the frog has failed to cross the roadways in three attempts. In the Procedures pane, type the following endgame procedure:
to endgame
everyone [clickoff]
announce [GAME OVER]
splashpage
end
The endgame procedure is executed when the livesremain variable equals zero. The value of this variable is checked in the hit procedure, which you created in the earlier section, “Writing the hit procedure.”
endgame stops the motion of all characters (everyone [clickoff]) and then announces that the game is over (announce [GAME OVER]). Finally, it returns the player to the splash page (splashpage).
A succeed1 procedure lets the player know that the frog turtle made it safely through the traffic of gamepage1 to the target zone.
to succeed1
everyone [clickoff]
wait 10
gamepage2
play
end
When it’s executed, the succeed1 procedure clicks off all objects on the page to halt the flow of traffic on Level 1. It then pauses briefly before moving to Level 2, gamepage2 (which you will make in “Lay Out and Code the Level 2 Game Page”). succeed1 then executes the play procedure to continue the game action.
Follow these steps to add the succeed1 procedure to the frog on Level 1:
When the player moves the frog turtle into the Level 1 target zone during the game, the color that the frog touches matches its backpack OnColor. When this occurs, the OnColor command is activated. Here, the succeed1 procedure is executed, advancing the player to Level 2.
Adding additional levels to Traffic Dodge is a snap! In this example you will add a Level 2, but note that you can add as many new levels as you want. The key tasks in adding a new level are duplicating the existing game page, creating a new succeed procedure, and adding the new procedure to the frog turtle’s backpack.
Follow these steps to create gamepage2:
The duplicate page appears in the workspace and is named page1.
This page is your Level 2 page.
to succeed2
everyone [clickoff]
announce [YOU WIN!]
splashpage
end
When it’s executed, the succeed2 procedure halts traffic by clicking everyone off. It then announces that the player has won the game (announce [YOU WIN!]) and returns the player to the splashpage.
Follow these steps to add the succeed2 procedure to the frog on Level 2:
When the player moves the frog turtle into the Level 2 target zone during the game, the color that the frog touches matches its backpack OnColor. When this occurs, the OnColor command is activated. Here, the succeed2 procedure is executed, informing the player that the game is won.
Choose File⇒Save Project from the menu bar to save your game.
The completed Traffic Dodge game with all procedures is shown in Figure 15-15. The figure shows Level 2 (gamepage2) in the workspace. Also note that the createprojectvar command in the Command Center is now deleted.
Test your game by playing it repeatedly. After you have worked out all the bugs, you can challenge friends to determine the Traffic Dodge champion!